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();
}
}
Hello I created a promise and call it recursively from a loop to fill an array but the onload never triggers thus never resolving the promise.
Can anyone see anything I'm doing wrong?
function imageResizeToDataUriPromise(url, width, height) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function () {
var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;
var result = _scaleImage(imgWidth, imgHeight, width, height, true);
//create an off-screen canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = result.width;
canvas.height = result.height;
//draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, result.width, result.height);
resolve(canvas.toDataURL());
};
img.src = url;
});
}
this is my basic calling block but its in a loop
caller(logo, 150, 150).then
(function (response) {
console.log("Success!", response);
base64Urls.push(response);
});
It works after I use that promise to get an URL and set it to an image element... not sure how you would use the return Data URL. One possible issue is: can you check whether your image source is serving you the image. (double check the network tab in developer tool).
function imageResizeToDataUriPromise(url, width, height) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function() {
console.log("IMG ONLOAD handler invoked");
var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;
var result = img;
//create an off-screen canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = result.width;
canvas.height = result.height;
//draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, result.width, result.height);
ctx.fillStyle = "white";
ctx.font = '21px sans-serif';
ctx.fillText('Hello world', 21, 51);
resolve(canvas.toDataURL());
};
img.src = url;
});
}
imageResizeToDataUriPromise("https://i.imgur.com/j7Ie7pg.jpg", 100, 100)
.then(url => document.querySelector("#an-image").src = url);
console.log("Promise obtained");
<img id="an-image">
I need some help with code review and re-translate it out of jQuery to plain JS.
I've tried to translate this into pure JS, but I don't get clearly why it doesn't work. If needed, I can show what I've made.
After the user selects an image from the first input, it should be rendered on canvas.
After the user selects an image from the second input, it should be rendered on the same canvas to the right of the first image.
Images should be rendered in scale, so two pictures will have the same height on canvas, but with the original aspect ratio.
User can select images in any order, but rendering order should stay the same: image from first input appears on canvas before image from the second input.
Inputs should accept only images.
$('.file1, .file2').on('change', function() {
var reader = new FileReader(),
imageSelector = $(this).data('image-selector');
if (this.files && this.files[0]) {
reader.onload = function(e) {
imageIsLoaded(e, imageSelector)
};
reader.readAsDataURL(this.files[0]);
}
});
$('.btn-merge').on('click', merge);
function imageIsLoaded(e, imageSelector) {
$(imageSelector).attr('src', e.target.result);
$(imageSelector).removeClass('hidden');
};
function merge() {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageObj1 = new Image(),
imageObj2 = new Image();
imageObj1.src = $('.image1').attr('src');
imageObj1.onload = function() {
ctx.globalAlpha = 1;
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.src = $('.image2').attr('src');;
imageObj2.onload = function() {
ctx.globalAlpha = 0.5;
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = canvas.toDataURL('image/jpeg');
$('.merged-image').attr('src', img);
$('.merged-image').removeClass('hidden');
}
};
}
You should define the onload before changing source and not inside another onload
function merge() {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageObj1 = new Image(),
imageObj2 = new Image();
imageObj1.onload = function() {
ctx.globalAlpha = 1;
ctx.drawImage(imageObj1, 0, 0, 328, 526);
}
imageObj2.onload = function() {
ctx.globalAlpha = 0.5;
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = canvas.toDataURL('image/jpeg');
$('.merged-image').attr('src', img);
$('.merged-image').removeClass('hidden');
}
imageObj1.src = $('.image1').attr('src');
imageObj2.src = $('.image2').attr('src');
}
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 have a little problem, sometimes work or not work drawimage, i tried to begin with draw background and if drawed then next draw 9 images(sometimes images is this same or not same).
var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");
$('button').on('click',function(){
var img = new Image();
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var img6 = new Image();
var img7 = new Image();
var img8 = new Image();
var img9 = new Image();
img.src = $(location).attr('href')+'/img/frames/'+$('#frames option:selected').val();
img1.src = $(location).attr('href')+'/img/mercmain/'+$('#merc1 option:selected').val();
img2.src = $(location).attr('href')+'/img/mercmain/'+$('#merc2 option:selected').val();
img3.src = $(location).attr('href')+'/img/mercmain/'+$('#merc3 option:selected').val();
img4.src = $(location).attr('href')+'/img/mercmain/'+$('#merc4 option:selected').val();
img5.src = $(location).attr('href')+'/img/mercmain/'+$('#merc5 option:selected').val();
img6.src = $(location).attr('href')+'/img/mercmain/'+$('#merc6 option:selected').val();
img7.src = $(location).attr('href')+'/img/mercmain/'+$('#merc7 option:selected').val();
img8.src = $(location).attr('href')+'/img/mercmain/'+$('#merc8 option:selected').val();
img9.src = $(location).attr('href')+'/img/mercmain/'+$('#merc9 option:selected').val();
img.onload = function(){
ctx.clearRect(0, 0, c.width, c.height);
ctx.drawImage(img, 0, 0,307,382);
img1.onload = function(){
ctx.drawImage(img1,$xyframe[0][0],$xyframe[0][1],$xyframe[0][2],$xyframe[0][3]);
};
img2.onload = function(){
ctx.drawImage(img2,$xyframe[1][0],$xyframe[1][1],$xyframe[1][2],$xyframe[1][3]);
};
img3.onload = function(){
ctx.drawImage(img3,$xyframe[2][0],$xyframe[2][1],$xyframe[2][2],$xyframe[2][3]);
};
img4.onload = function(){
ctx.drawImage(img4,$xyframe[3][0],$xyframe[3][1],$xyframe[3][2],$xyframe[3][3]);
};
img5.onload = function(){
ctx.drawImage(img5,$xyframe[4][0],$xyframe[4][1],$xyframe[4][2],$xyframe[4][3]);
};
img6.onload = function(){
ctx.drawImage(img6,$xyframe[5][0],$xyframe[5][1],$xyframe[5][2],$xyframe[5][3]);
};
img7.onload = function(){
ctx.drawImage(img7,$xyframe[6][0],$xyframe[6][1],$xyframe[6][2],$xyframe[6][3]);
};
img8.onload = function(){
ctx.drawImage(img8,$xyframe[7][0],$xyframe[7][1],$xyframe[7][2],$xyframe[7][3]);
};
img9.onload = function(){
ctx.drawImage(img9,$xyframe[8][0],$xyframe[8][1],$xyframe[8][2],$xyframe[8][3]);
};
};
});
and link to test script https://tajkjs-olszam.c9users.io/genform/
and if i remove from img1-9.onload, leave ctx.drawimage(img1-9) and make settimeout from 3 to 5 sec then it's ok but i want without settimeout.
setTimeout(function(){
//img.onload = function(){
ctx.drawImage(img, 0, 0,307,382);
// };
ctx.drawImage(img1,$xyframe[0][0],$xyframe[0][1],$xyframe[0][2],$xyframe[0][3]);
ctx.drawImage(img2,$xyframe[1][0],$xyframe[1][1],$xyframe[1][2],$xyframe[1][3]);
ctx.drawImage(img3,$xyframe[2][0],$xyframe[2][1],$xyframe[2][2],$xyframe[2][3]);
ctx.drawImage(img4,$xyframe[3][0],$xyframe[3][1],$xyframe[3][2],$xyframe[3][3]);
ctx.drawImage(img5,$xyframe[4][0],$xyframe[4][1],$xyframe[4][2],$xyframe[4][3]);
ctx.drawImage(img6,$xyframe[5][0],$xyframe[5][1],$xyframe[5][2],$xyframe[5][3]);
ctx.drawImage(img7,$xyframe[6][0],$xyframe[6][1],$xyframe[6][2],$xyframe[6][3]);
ctx.drawImage(img8,$xyframe[7][0],$xyframe[7][1],$xyframe[7][2],$xyframe[7][3]);
ctx.drawImage(img9,$xyframe[8][0],$xyframe[8][1],$xyframe[8][2],$xyframe[8][3]);
},100);
this code is work but unfortunately I have use settimeout
Try not to draw on each image load. Use counter for loaded images and run draw function on last load. Also Pablo said right thing - set onload listener before set source. This code should run inside your click listener function
var img;
var counter = 0;
var imagesLength = 9;
var images = [];
var backgroundImage = new Image();
var imgFolder = location.href+'/img/mercmain/';
function drawImages(){
ctx.clearRect(0, 0, c.width, c.height);
ctx.drawImage(backgroundImage, 0, 0,307,382); //draw background
for ( var i=0; i<imagesLength ; i++ ){ //draw images
ctx.drawImage(images[i],$xyframe[i][0],$xyframe[i][1],$xyframe[i][2],$xyframe[i][3]);
}
}
function onLoad(){
counter++;
if( counter === imagesLength + 1 ){ // +1 - we must count also background image
drawImages(); // draw all the images at once
}
}
for ( var i=0; i<imagesLength ; i++ ){
img = new Image();
images.push( img ); // push in array before src,
// onload should not fire while image is not in array
img.onload = onLoad; // set onload before src,
// image should not load before onload listener is set
img.src = imgFolder + $('#merc'+ (i+1) +' option:selected').val();
}
// do not forget to set the same for background image
backgroundImage.onload = onLoad;
backgroundImage.src = location.href + '/img/frames/' + $('#frames option:selected').val();
You have a race condition: You are loading all the images at the same time, but if the background image is not the first one to be loaded, you are adding the onload listeners AFTER the images have been loaded, so the event has already happened and the drawing logic is never executed.
Solution? the imgN.onload=function() {...} assignments should be outside the img.onload function:
$('button').on('click',function(){
var img = new Image();
var imgArr=[];
for (var i=0;i<9;i++) {
imgArr[i]=new Image();
}
img.src = $(location).attr('href')+'/img/frames/'+$('#frames option:selected').val();
for (var i=0;i<9;i++) {
imgArr[i].src=$(location).attr('href')+'/img/mercmain/'+$('#merc'+i+' option:selected').val();
}
img.onload = function(){
ctx.clearRect(0, 0, c.width, c.height);
ctx.drawImage(img, 0, 0,307,382);
}
//Here, instead in the previous function
for (var i=0;i<9;i++) {
imgArr[i].onload = function(){
ctx.drawImage(img1,$xyframe[i][0],$xyframe[i][1],$xyframe[i][2],$xyframe[i][3]);
};
}
});