get a CouchDB attachment and show it on a html page - javascript

I want to show in my html page an image that I've attached in a document on couchdb.
How I can do this using javascript (jquery)?
I solved using
$.couch.db("mydb").view(...)
to obtain the id of document that I'm interesting. And
$.couch.db("mydb").openDoc(id, {...})
to obtain the image coded in base64. After that I put this base64's code in tag
<img src="data:image/jpg; base64, ...">

Actually you can do this by adding img tag:
<img src="http://somehost/somedatabase/document/attachment">

Related

How to add dynamic content into image src url using Javascript and HTML

<img src="https://website.example/convention?plastic_id=**{add-id-here}**&muppet_id=**{add-id-here}**">
I'm trying to add dynamic content (stored in an external database) into the {add-id-here} fields. Please note it's not exactly an image but more of a tracking link used for Email reporting. I am able to add it by surrounding the {add-id-here} fields with double quotes but that breaks the link all together.
you can render a dynamic url through java script keep the url inside backticks (``) and the variable inside ${}
var addidhere="some random text"
document.getElementById("imageid").src=`https://website.example/convention?plastic_id=${addidhere}&muppet_id=${addidhere}`;
<img src="" id="imageid">

How I can create a button for save a image with Javascript or any Javascript framework?

I would like save with a button a generated picture. I see the fastest solution is JavaScript, probably JQuery or any framework.
My application generate a img label, for example:
<img src = "data:image/png;base64,iVBORw0KGgo...(it's very long)"/>
The many problem is the src attribute because change for my application, first I need catch the URL of this.
Thank you very much!
You can use the download attribute in HTML. If the img src is automatically generated, you could use the script below to put it in the href:
$('#save').prop('href', $('img').prop('src'));
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/><br/>
<a id='save' download>Save</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

How do I use jsp form element contents (base64, text) as my html image src?

The jsp form contents are already formatted as such:
<form id="textpage"
<textarea name="textbox" id="text">
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAcC0lEQVR4nO3dd1SUZ.....
</textarea></form>
I want to click a button on another html page
<button>Load Image!!</button>
and replace an existing image placeholder src="putImageHere.png" with
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAcC0lEQVR4nO3dd1SUZ..."
ALSO !!! The src above must be a variable as it will be different each time its loaded so it cant be hard coded.
So basically I ended up loading an element with jquery and in the end it was as simple as
$('#elementId').load(URL,data,function(){
$('#myImage').attr("src", $('#elementId').innerHTML);
});

Copy an image with zclip

Is it possible to copy an image using zclip? I want to copy the actual image and the hyperlink using zclip instead of copying its HTML code.
Assuming that I have the following html part:
<div id="fooDiv">
<a href="http://www.google.com">
<img src="foo.png"/>
</a>
</div>
I can get its html using the following copy function:
copy: function(){
return $('#fooDiv').html();
}
So how can I replace this function in order to get the actual image instead of HTML. The reason I need this functionality is to be able to paste the result in e-mails immediately. HTML code won't benefit me.

javascript change Image by clicking thumbnail

I am a newbie in javascript and tried a lot of things for hours, but nothing worked.
I will change a big imgage by clicking on a thumbnail.
Untill now I got following script. Not much really... :-(
<script type="text/javascript">
function changeImage() {
document.getElementById("img").src="img/upload/test1.jpg";
}
</script>
<img id="img" name="change" src="img/upload/test.jpg">
<img src="img/thumbnail/test.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
<img src="img/thumbnail/test1.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
All big picture are under src"img/upload/xxx.jpg" and all thumbnails under src="img/thumbnail/xxx.jpg". When I click the thumbnail, it have to change the big picture and it have to give the parameter in the javascript. Like onclick="changeImage(xxx.jpg).
The problem is every page have other pictures. I get them from a database. So the name of the picture is like a variable. I hope you understand. It is hard for me to explain. :-(
Thanks for your help in advance.
Greets Yanick
Pass the image parameter to the function like,
function changeImage(image) {
document.getElementById("img").src=image;
}
<img src="img/thumbnail/test.jpg" alt="" id="img"
onclick="changeImage('img/upload/test1.jpg')" />
Keep ids unique. DOM elements "must" possess unique IDs for all practical reasons.
Though you could do an inline onclick, a better way to proceed with it is something as follows.
Assuming you have the images generated from some templating library either on the client or from the server, add data attributes with the image sources and a common class to all of these elements right there and add an event listener from your Javascript bound to elements matching the class and picking up the data attribute to replace the image source.

Categories