I have 2 canvases, I save the first one as a dataURL, and then try to display it on a second canvas.
I tried many things but nothing shows up.
Here is my code.
How can I fix that ?
image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var compCanvas = document.getElementById("final-composition");
var ctx = compCanvas.getContext("2d");
var img = new Image;
img.src = image;
img.width = compCanvas.width;
img.height = compCanvas.height;
img.onload = function(){
ctx.drawImage(img,0,0);
};
Related
We need to download the canvas chart as png image with higher resolution. tried the below code snippet to resize the image by setting the width and height. but the below solution is giving empty image in download. something failed in below code.
how to resize the canvas chart in downloaded png image.
resizeImage(img, w, h) {
var result = new Image();
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
result.src = canvas.toDataURL();
return result;
}
downloadChart(event: any, chartName: string) {
var img = new Image();
img.src = (document.getElementsByClassName('chartclassname')[0] as HTMLCanvasElement).toDataURL(); // chartclassname for canvas chart classname
var link = document.createElement('a');
var img2 = this.resizeImage(img, 500, 500);
const anchor = document.getElementById('dynamicDownloadLink') as HTMLAnchorElement;
anchor.href = img2.src;
anchor.download = `${this.getChartNameForDownload(chartName)}.png`;
anchor.click();
}
Because you are creating a new Image dynamically you have to wait until it's loaded before you can use it with drawImage.
This should work:
downloadChart(event: any, chartName: string) {
var img = new Image();
img.src = (document.getElementsByClassName('chartclassname')[0] as HTMLCanvasElement).toDataURL(); // chartclassname for canvas chart classname
img.onload = () => {
var link = document.createElement('a');
var img2 = this.resizeImage(img, 500, 500);
const anchor = document.getElementById('dynamicDownloadLink') as HTMLAnchorElement;
anchor.href = img2.src;
anchor.download = `${this.getChartNameForDownload(chartName)}.png`;
anchor.click();
}
}
I am trying to create PDF with Image. I have URL of Image as below:
var url = "https://firebasestorage.googleapis.com/v0/b/dicom-poc.appspot.com/o/images%2FNiouCzjBYna8Wx1VO2x3UST5tDc2%2F2020-10-07%2F05%3A03%3A58%2Fvisualization%2FL-CC.png?alt=media&token=dce8859a-3427-432b-8176-590e9569aad9"
and my code is here:
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}
After running above code PDF is getting downloaded successfully with text "Hi" but image is not there.
I have tried multiple solutions suggested by people but no result.
Could you please guide me for same.
Thanks in advanace!
You did not draw anything on the canvas.
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, img.width, img.width);
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}
i'm currently trying to load a base64 img into my canvas
console.log('Change');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = stack[1].save;
stack[1].save contains a valid base64 png img URL('data:image/png;base64,xxxxxx'), when i paste this URL into my browser i can see a valid img
The fact is that nothing changes and i dont have any error
If you could help me this will be awesome, thank's
Yes the code you have shared should work OK.
Here is an example
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
var image = new Image();
image.onload = () => { ctx.drawImage(image, 0, 0) }
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAF0lEQVR42mNk+M9AFGAcVTiqcFQhCAAAf0sUAaSRMCEAAAAASUVORK5CYII="
var image2 = new Image()
image2.onload = () => { for(i=1; i<9; i++) ctx.drawImage(image2, 30*i, 5+4*i) }
image2.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="
<canvas id="canvas"></canvas>
The only thing that could be wrong is that stack[1].save that you are using...
Result convert is null png image, pls help me
var img = new Image();
img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataurl = canvas.toDataURL().replace("data:image/jpeg;base64,", "");
localStorage.setItem("img", dataurl);
$('#bannerImg').attr('src', dataurl);
<img id="bannerImg" src="" alt="Banner Image" width="100%" height="200px" alt="Embbed Image"/>
<canvas id="myCanvas"></canvas>
You have to include everything (drawing to canvas + reading from it + setting this elsewhere) in the onload event of the image. It doesn't work on this snippet (the call to toDataURL) due to a cross-domain issue, but it shall work on your website.
An explanation of why it doesn't work here the call to toDataURL
var imgCanvas = function() {
var img = new Image();
//Wait for image to load before doing something with content
img.onload = function() {
var canvas = document.getElementById("myCanvas");
//Set canvas size to fit the image
canvas.style.height = img.height + 'px';
canvas.style.width = img.width + 'px';
//Draw the image in canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
//Get a dataurl representation of the image where the image itself is in BASE64
var dataurl = canvas.toDataURL();
//Store it in localStorage
localStorage.setItem("img", dataurl);
//Show image from localStorage
//Need jQuery to use this line instead of next one : $('#bannerImg').attr('src', localStorage.getItem("img"));
document.getElementById('bannerImg').setAttribute('src', localStorage.getItem("img"));
};
img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
};
imgCanvas();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Canvas:<br>
<canvas id='myCanvas'></canvas>
<br><br>
Image from dataurl:<br>
<img id='bannerImg'>
Use document.getElementById('bannerImg').setAttribute('src', dataurl); instead.
var showImage = function() {
var img = new Image;
img.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataurl = canvas.toDataURL();
localStorage.setItem("img", dataurl);
document.getElementById('bannerImg').setAttribute('src', dataurl);
};
img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
};
showImage();
Example: https://jsfiddle.net/atg5m6ym/6152/
I have been trying to convert images to base64 string in Javascript. So far with this code which I found on stackoverflow I was able to convert jpeg and png images to their respective base64 strings. But when i try to convert GIF into a base64 it does conversion but the string always have :
data:image/png;base64,............................<string continues>
and when i try to open that, gif image doesn't work.
It should be:
data:image/gif;base64,............................<string continues>
Here's the code:
function convertImgToBase64(url,callback,outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
I am passing the image from a url for example take : http://www.howtogeek.com/wp-content/uploads/2010/10/DANCING_BABY.gif
Please help.