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