i have a div with several images fixed in position that i want to put into a single canvas so that i can save the composite picture. is this possible?
i read through the canvas tutorial at w3schools and i checked out the API with MDN and came up with the following code that does nothing...
<div id="pics" >
<img id="i1" class="images"
src="http://chris.chrisjneeds.com/images/stars/stars01.jpg" width="300" height="277" style="position: fixed;">
<img id="i2" class="images"
src="http://chris.chrisjneeds.com/images/ships/ships26.png" width="300" height="277" style="position: fixed;">
</div>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3; horizontal-align: right; float: right">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function myCanvas() {
var aImages = document.getElementsByClassName('images'),
nImgsLen = aImages.length;
var oCanvas = document.getElementById("myCanvas");
var oCtx = oCanvas.getContext("2d");
for (var oImgData, nImgId = 0; nImgId < nImgsLen; nImgId++) {
oImgData = oCtx.getImageData(0, 0, 300, 277);
oCtx.putImageData(oImgData, 0, 0);
}
var img=new Image();
img.src = oCanvas.toDataURL();
oCtx.drawImage(img,10,10);
}
i'm expecting the composite image in the canvas but so far i don't get anything. please help
Sure, it is possible, but not that way like in your code.
getImageData/putImageData methods are intended for pixel manipulation and absolutely useless for your problem. Your code just copies an area of just created canvas into itself (i.e. does nothing). But what you actually need is draw your images one by one onto the canvas using drawImage method. Also note that you don't need to use toDataURL method (it's mostly used for images sending/saving) cause you with drawImage calls you'll already have needed composite image in the canvas.
So your code should look like this:
...
var aImages = document.getElementsByClassName('images');
var oCanvas = document.getElementById("myCanvas");
var oCtx = oCanvas.getContext("2d");
for (var img of aImages) {
oCtx.drawImage(img, 0, 0, img.width, img.height);
}
the second part of my question is "so that i can save the composite picture"
this is what i found from HOW TO SAVE AN IMAGE TO DISK FROM A CANVAS
here is the complete code (i hope it helps someone)
function getImgs4Canvas() {
var aImages=$("#cloneimages img");
var oCanvas = document.getElementById("imgCanvas");
var oCtx = oCanvas.getContext("2d");
for (var oimg of aImages) {
oCtx.drawImage(oimg, 0, 0, oimg.width, oimg.height);
}
var jpgFile = oCanvas.toDataURL('image/jpeg', 1.0);
// save the image as a jpg 'blob' in the user's download (default) directoy
ImageSaver.download_data_uri(jpgFile, "downloadimgtest");
}
var ImageSaver = {
// function to force-download from a data uri as a filename
// NB the download="filename" attribute isn't yet supported by safari
download_data_uri: function(dataURI, fileName) {
var tempUrl = ImageSaver.make_url_from_data(dataURI);
var link = $(' ');
$("body").append(link);
$("#download").get(0).click();
},
// function to generate a temporary browser index url for a datauri
// if a data-uri is larger than 2mb, chrome's address bar can't handle it.
// fortunately, you can blob it and then use a temporary blob url
make_url_from_data: function(dataURI) {
var blob = ImageSaver.make_blob(dataURI);
var tempUrl = URL.createObjectURL(blob);
return tempUrl;
},
// function to convert a datauri to a blob
// Blobs are temporary data structures that can hold binary data, and make that data accessible through a short url. They can probably do other things too; I have no idea.
make_blob: function(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
};
// write the ArrayBuffer to a blob, and you're done
return new Blob([ab], {
type: mimeString
});
}
}
Related
I want to generate an image of the DOM element containing base64 images. For the same, I am converting the DOM element to SVG and then drawing that SVG on the canvas and obtaining base64 from it.
It is observed that HTML element having a smaller image is rendered properly, while that having larger image isn't rendered in the canvas in Edge.
Here is a snippet for the same:
<html>
<body>
<div id="content1">
<img id="smallImg" style="width: 200px; height: 150px;" src="data:image/jpeg;base64,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">
</div>
<div id="content2">
<img id="bigImg" src="data:image/jpeg;base64,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"
style="width: 300px; height: 200px" src="">
</div>
</body>
<script>
function htmlToXml(html) {
var doc = document.implementation.createHTMLDocument();
var text = html.innerHTML;
doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
doc.documentElement.innerHTML = text;
let htmls = (new XMLSerializer).serializeToString(doc.documentElement);
return htmls;
}
function getImage(element) {
var htmlElement = element;
var canvasElement = document.createElement('canvas');
canvasElement.height = 800;
canvasElement.width = 500;
var canvasContext = canvasElement.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="800" crossorigin="anonymous">' +
'<foreignObject width="500" height="800">' +
htmlToXml(htmlElement) +
'</foreignObject>' +
'</svg>';
var url = '';
var DOMURL = window.URL;
var svg = new Blob([data], {
type: 'image/svg+xml;charset=utf-8'
});
url = DOMURL.createObjectURL(svg);
var img = new Image();
img.setAttribute('width', '500');
img.setAttribute('height', '800');
img.onload = function() {
canvasContext.drawImage(img, 0, 0);
var res = canvasElement.toDataURL('image/png');
console.log(res);
}
img.crossOrigin = 'Anonymous';
img.src = url;
}
var htmlElement1 = document.getElementById('content1');
var htmlElement2 = document.getElementById('content2');
getImage(htmlElement1);
getImage(htmlElement2);
</script>
</html>
Run it in Edge and observe the output in the console. The base64 images of both the HTML elements are logged separately. The base64 for content1 is generated properly while that for content2 contains a blank image.
Loading an image is an asynchronous task, even when the src is set to a dataURL.
I guess Edge's young integration of <foreignObject> still has some quirks for delaying the outside's <img> onload event until all its inner resources are effectively loaded.
I don't think there is much you can do here, apart from filling an issue, or adding a delay inside the <img>'s onload event handler.
You may want to try HTMLImageElement.decode() but I'm not even sure Edge supports this, nor if it may work at all.
And for your more general case, you may want to avoid this foreignObject hack altogether and rather draw your DOM directly from the canvas API, just like html2canvas does.
I'm trying to get a base64 version of a canvas in HTML5.
Currently, the base64 image that I get from the canvas is blank.
I have found similar questions for example this one:
HTML Canvas image to Base64 problem
However, the issue that I have is that because I am adding 2 images in the canvas, I cannot use the example provided in those answers as most of them are using single image.
I understand that I have to wait until the canvas image is loaded properly before trying to get the base64 image. But I don't know how in my case.
This is my code:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.canvas.width = 1000;
context.canvas.height = 1000;
var imageObj1 = new Image();
imageObj1.src = "http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg";
imageObj1.onload = function() {
context.drawImage(imageObj1, 0, 180, canvas.width, canvas.height);
};
var imageObj2 = new Image();
imageObj2.src = "http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg"
imageObj2.onload = function() {
context.drawImage(imageObj2, 0, 0, canvas.width, 180);
};
// get png data url
//var pngUrl = canvas.toDataURL();
var pngUrl = canvas.toDataURL('image/png');
// get jpeg data url
var jpegUrl = canvas.toDataURL('image/jpeg');
$('#base').val(pngUrl);
<div class="contents" style="overflow-x:hidden; overflow-y:scroll;">
<div style="width:100%; height:90%;">
<canvas id="myCanvas" class="snap" style="width:100%; height:100%;" onclick="takephoto()"></canvas>
</div>
</div>
<p>
This is the base64 image
</p>
<textarea id="base">
</textarea>
and this is a working FIDDLE:
https://jsfiddle.net/3p3e6Ldu/1/
Can someone please advice on this issue?
Thanks in advance.
EDIT:
As suggested in the comments bellow, i tried to use a counter and when the counter reaches a specific number, I convert the canvas to base64.
Like so:https://jsfiddle.net/3p3e6Ldu/4/
In both your examples (the one from the question and the one from the comments), the order of commands does not really respect the async nature of the task at hand.
In your later example, you should put the if( count == 2 ) block inside the onload callbacks to make it work.
However, even then you will run into the next problem: You are loading the images from different domains. You can still draw them (either into the canvas or using an <img> tag), but you are not able to access their contents directly. Not even with the detour of using the <canvas> element.
I changed to code so it would work, if the images are hosted on the same domain. I also used a function to load the image and promises to handle the callbacks. The direct way of using callbacks and a counting variable, seem error-prone to me. If you check out the respective fiddle, you will notice the SecurityError shown. This is the result of the aforementioned problem with the Same-Origin-Policy I mentioned.
A previous question of mine in a similar direction was about how to detect, if I can still read the contents of a <canvas> after adding some images.
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.canvas.width = 1000;
context.canvas.height = 1000;
// function to retrieve an image
function loadImage(url) {
return new Promise((fulfill, reject) => {
let imageObj = new Image();
imageObj.onload = () => fulfill(imageObj);
imageObj.src = url;
});
}
// get images
Promise.all([
loadImage("http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg"),
loadImage("http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg"),
])
.then((images) => {
// draw images to canvas
context.drawImage(images[0], 0, 180, canvas.width, canvas.height);
context.drawImage(images[1], 0, 0, canvas.width, 180);
// export to png/jpg
const pngUrl = canvas.toDataURL('image/png');
const jpegUrl = canvas.toDataURL('image/jpeg');
// show in textarea
$('#base').val(pngUrl);
})
.catch( (e) => alert(e) );
Okay, I know that there are loads of subjects that look identical to this one on SO, but none of them have fixed my issue...
I'm trying to grab an image from a file input and throw it onto a canvas so that I can later turn it into a base-64 image... But I've hit a snag in the process that I was not expecting, in drawing the image to the canvas...
Taking the following HTML:
<input type="file" id="fileIn" onchange="preview()"><br>
<img id="filePreview"><br>
<canvas id="fileCanvas"></canvas>
And the following script:
var dataurl = '';
function preview(){
document.getElementById('filePreview').src = URL.createObjectURL(document.getElementById('fileIn').files[0]);
document.getElementById('filePreview').onload = showInCanvas;
cnv = document.getElementById('fileCanvas');
ctx = cnv.getContext('2d');
}
function showInCanvas(){
cnv.style.width = document.getElementById('filePreview').naturalWidth + 'px';
cnv.width = document.getElementById('filePreview').naturalWidth;
cnv.style.height = document.getElementById('filePreview').naturalHeight + 'px';
cnv.height = document.getElementById('filePreview').naturalHeight + 'px';
ctx.clearRect(0, 0, cnv.width, cnv.height);
ctx.drawImage(document.getElementById('filePreview'), 0, 0);
dataurl = cnv.toDataURL('image/png');
}
The problem I'm having is that the image simply refuses to draw onto the canvas. Even going into the console and drawing the image to the canvas manually, after the script has run, it still refuses to draw. Because of this, the image data simply runs through as data:,
It's an https site, if that affects anything.
For clarification, here's my question:
Why is the canvas refusing to render this image? How can I fix this issue?
If the intent is to convert the image to Data-URI ("base64"), the FileReader can be used - no need for canvas (which can also alter the image/final compression):
fileIn.onchange = function(e) {
var fr = new FileReader();
fr.onload = done.bind(fr);
fr.readAsDataURL(e.target.files[0]);
}
function done() {
var dataURI = filePreview.src = this.result;
alert(dataURI.substr(0, 35) + "...")
}
<input type="file" id="fileIn"><br>
<img id="filePreview"><br>
<canvas id="fileCanvas"></canvas>
I'm using a plugin (dom-to-image) to generate a SVG content from a div.
It returns me a dataURL like this:
data image/xml, charset utf-8, <svg...
If a put this on a <img src the image is shown to normally.
The intent is to grab this dataURL, convert it to base64 so I can save it as an image.png on a mobile app.
Is it possible?
I tryied this solution https://stackoverflow.com/a/28450879/1691609
But coudn't get to work.
The console fire an error about the dataUrl
TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.
==== UPDATE :: PROBLEM EXPLANATION/HISTORY ====
I'm using Ionic Framework, so my project is an mobile app.
The dom-to-image is already working cause right now, its rendering a PNG through toPng function.
The problem is the raster PNG is a blurry.
So I thought: Maybe the SVG will have better quality.
And it IS!! Its 100% perfect, actually.
On Ionic, I'm using 2 step procedure to save the image.
After get the PNG generated by the dom-to-img(base64) dataURL, I convert it to a Blob and then save into device.
This is working, but the final result, as I said, is blurry.
Then with SVG maybe it will be more "high quality" per say.
So, in order to do "minimal" change on a process that s already working :D I just need to convert an SVG into base64 dataURL....
Or, as some of you explained to me, into something else, like canvas...
I don't know any much :/
===
Sorry for the long post, and I really, really thank your help guys!!
EDIT COUPLE OF YARS LATER
Use JS fiddle for a working example: https://jsfiddle.net/msb42ojx/
Note, if you don't own DOM content (images), and those images don't have CORS enabled for everyone (Access-Control-Allow-Origin header), canvas cant render those images
I'm not trying to find out why is your case not working, here is how I did when I had something similar to do:
get the image sourcce (dom-to-image result)
set up a canvas with that image inside (using the image source)
download the image from canvas in whatever image you like: png, jpeg whatever
by the way you can resize the image to a standard format
document.getElementById('mydownload').onclick= function(){
var wrapper = document.getElementById('wrapper');
//dom to image
domtoimage.toSvg(wrapper).then(function (svgDataUrl) {
//download function
downloadPNGFromAnyImageSrc(svgDataUrl);
});
}
function downloadPNGFromAnyImageSrc(src)
{
//recreate the image with src recieved
var img = new Image;
//when image loaded (to know width and height)
img.onload = function(){
//drow image inside a canvas
var canvas = convertImageToCanvas(img);
//get image/png from convas
var pngImage = convertCanvasToImage(canvas);
//download
var anchor = document.createElement('a');
anchor.setAttribute('href', pngImage.src);
anchor.setAttribute('download', 'image.png');
anchor.click();
};
img.src = src;
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
}
#wrapper{
background: red;
color: blue;
}
<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script>
<button id='mydownload'>Download DomToImage</button>
<div id="wrapper">
<img src="http://i.imgur.com/6GvKdxY.jpg"/>
<div> DUDE IS WORKING</div>
<img src="http://i.imgur.com/6GvKdxY.jpg"/>
</div>
I translated #SilentTremor's solution into React/JS-Class:
class SVGToPNG {
static convert = function (src) {
var img = new Image();
img.onload = function () {
var canvas = SVGToPNG.#convertImageToCanvas(img);
var pngImage = SVGToPNG.#convertCanvasToImage(canvas);
var anchor = document.createElement("a");
anchor.setAttribute("href", pngImage.src);
anchor.setAttribute("download", "image.png");
anchor.click();
};
img.src = src;
};
static #convertImageToCanvas = function (image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
};
static #convertCanvasToImage = function (canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
};
}
export default SVGToPNG;
Usage:
let dataUrl = someCanvas.toDataURL("image/svg+xml");
SVGToPNG.convert(dataUrl);
I need to write a new HTML file from a string using file system, I'm using Cordova 2.4.0. . That HTML would have some images loaded from a local folder, so because I need just one file (a HTML without png/jpg images alongside it) I'm trying to encode this images and apply them through CSS as background images (The CSS code is embeded in the same String, future HTML file). Well, the way I make these modifications to the string is by using functions returns. For example:
padding-top: 5%; background-image: url(' + agregaImagenLocal('../img/ESTELAR.png') + '); background-color: white;
The function "agregaImagenLocal(pathToLocalImage)" :
function agregaImagenLocal(pathToLocalFile) {
var canvas = document.getElementById('canvasOculto');
var imagen = new Image(150,100);
canvas.width = imagen.width;
canvas.height = imagen.height;
var contextoCanvas = canvas.getContext('2d');
imagen.onload = function () {
contextoCanvas.drawImage(imagen, 0, 0);
urlImagenLocal = canvas.toDataURL();
}
imagen.src = pathToLocalFile;
return urlImagenLocal //???????
}
I was doing this without the "onload" event, so it returned a blank image. But with this function inside the "onload" I don't know how to return the base64 encoded image to the first function.
This is the function to convert an Image (by file path) to Base64:
function convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
// Clean up
canvas = null;
};
img.src = url;
}
Once the conversion is made, you can use jQuery to set the background CSS using the Base64 code.
var imageUrl = ""; //Your Local Image Path HERE
convertImgToBase64(imageUrl, function(base64Img){
$('.output').css("background-image", base64Img);
}
This will set the source of an element with the class 'output' to the base64 image.