Set size of image from canvas - javascript

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();
}
}

Related

Download canvas chart as PNG image with higher resolution javascript

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();
}
}

Chrome javascript image to canvas causes empty image

Converting image to the canvas with canvas.drawImage fails(but not throws err), the canvas looks transparent empty image
It doesn't happen for all image files I could not figure out which property of the image causes this but I uploaded an example photo with this issue
I started having this problem with chrome v83-v84
firefox works fine.
I want to upload a specified photo (its inside fiddle) and want to make canvas and draw canvas from the uploaded image and display it on chrome (chrome version should bigger or equal v85)
function testimg(src) {
var img = document.createElement("img");
img.src = src;
document.querySelector('#test').appendChild(img)
}
$('#file').on('change', fileAdded)
function fileAdded(event) {
var reader = new FileReader;
reader.onload = function () {
var image = new Image();
image.src = reader.result;
image.onload = function () {
document.querySelector('#test').appendChild(this)
var imgToSend = processImg(this, this.width, this.height);
testimg(imgToSend)
};
};
reader.readAsDataURL(event.currentTarget.files[0]);
}
function processImg(image, srcWidth, srcHeight) {
var canvas = document.createElement('canvas');
canvas.width = srcWidth;
canvas.height = srcHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
ctx.fill();
return canvas.toDataURL();
}
https://jsfiddle.net/msacar/2Lgmc85t/24/

try to load base64 img into a canvas

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...

How do I get an image from a blob url in JS?

I have a problem loading an image to a canvas from a file (image) input. The fileInput object is the image picker. This is all one block JS file on my site:
<script>
function picEditor() {
var fileInput = document.createElement("input");
fileInput.setAttribute("type", "file");
fileInput.setAttribute("accept", "image/png");
fileInput.setAttribute("id", "fluff");
document.body.appendChild(fileInput);
Second part, the image is created. The image and load button are created first. The button's click function is supposed to set the source of the image to that of the file input's blob URL, then draw the image on the canvas.
var img = document.createElement("img");
var loadButton = document.createElement("button");
loadButton.onclick = function() {
img.src = window.URL.createObjectURL(fileInput.files[0]);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
loadButton.innerHTML = "Click here";
document.body.appendChild(loadButton);
Third part, the canvas and rendering context are created.
var canvas = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.left = "740px";
canvas.style.top = "15px";
canvas.style.border = "1px #fa0 solid";
canvas.width = 600;
canvas.height = 600;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
}
window.onload = picEditor();
</script>
My three visible objects are getting drawn, but the image isn't getting drawn when an image has been inputted and the load button has been clicked.
You have to wait till the image is ready before drawing it on the canvas
loadButton.onclick = function() {
img.onload = function() {
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
};
img.src = window.URL.createObjectURL(fileInput.files[0]);
};

Drawing ends up all black

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!

Categories