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();
}
}
Related
I am trying to get the base64 of some images in Javascript and was using this function:
function getBase64Image(img) {
return new Promise((data) => {
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
data(canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
})
}
Then I call the function to load in the image using:
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
getBase64Image(this).then(data => {})
}
img.src = wha[1][0]
If I look at the naturalWidth of the image (96px), it is different from the actual image itself (640px). I had been looking at other methods of getting base64 from an image but they also return the same results.
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...
I'm trying to resize an image via HTML canvas, but when I display it, it displays all black.
My code
function onSuccess(imageData) {
var img = new Image();
img.src = imageData;
window.setTimeout(function() {
var maxSize = 200;
var canvas = document.createElement("canvas");
canvas.width = maxSize;
canvas.height = maxSize;
var ctx = canvas.getContext("2d");
ctx.drawImage(img.src, 0, 0, maxSize, maxSize);
dataurl = canvas.toDataURL("image/jpeg");
alert(dataurl);
}, 1000);
}
I'm not exactly sure what it is I'm doing incorrectly. Thanks for the help!
So I'm using Protractor in my project and in my test I want to convert the canvas element to an image with a specific size. I have the conversion down but can't seem to change the size of the image. Here's my code:
it('should save an image', function(done) {
//because of Protractor
browser.driver.executeScript(function () {
var can = document.querySelector('#workspace-canvas');
var data = can.toDataURL("image/png");
var image = new Image();
image.width = 500;
image.height = 500;
image.src = data;
console.log(image.height, image.width); //1122 1888
var link = document.createElement('a');
link.href = image.src;
link.download = 'study-chart.png';
link.click();
return data;
}).then(function (result) {
browser.sleep(2000);
done();
});
});
I'm not able to change the size of the canvas. In my fiddle you can see the image size is changed in the DOM, but when I download it, the image is only 200x200 pixels because of the canvas size. What am I missing?
The problem is that adjusting the width and height of the image element doesn't actually change its original size. It will appear larger when displayed in the browser, but the original size of the image is still the size of the canvas.
I've modified your fiddle to show you how you can create a new image with a desired size by dynamically creating a new canvas with the specified width and height and drawing your original image on it.
var can = document.querySelector('#canvas1');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 50, 50);
var img = new Image();
img.src = can.toDataURL();
var link = document.createElement('a');
var img2 = resizeImage(img, 500, 500);
link.href = img2.src;
link.download = 'study-chart.png';
link.click();
function 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;
}
canvas {
border: 1px solid gray;
}
<canvas id="canvas1" width="200" height="200"></canvas>
Have you tried using the canvas context and scaling that and then saving out as an image?
context.scale
#Kurumi, your codes can work somehow but better to add onload method
var img = new Image();
img.src = c.toDataURL('image/jpeg');
var img2 = '';
img.onload = function () {
img2 = resizeImage(img, oWidth, oHeight);
var link = document.createElement('a');
img2.onload = function () {
link.href = img2.src;
link.download = 'study-chart.jpeg';
link.click();
}
}