I'm working on this app where I need to upload image to an html5 canvas from both url as well as user's hard drive. I have the functionality already implemented for the user's input from hard drive but I don't know how to add an image from url.
The code I used to load from input type file are all inside the input's event listener. It has a lot of functions in it as the app requires text input on the image as well. So image from url should have the same functionality as well.
Please note that the imgObj is inside the event listener. I tried changing the img.src to a url to test it out, but even though the image loads, I can't download it anymore. The console throws this error:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at HTMLButtonElement.<anonymous>
Here's the code minus some functions which is unnecessary to show it here:
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const btnDownload = document.getElementById('btnDownload');
const fileUpload = document.getElementById('file-upload');
fileUpload.addEventListener('change', function(e) {
let imgObj = new Image();
imgObj.onload = draw;
imgObj.onerror = failed;
imgObj.src = URL.createObjectURL(this.files[0]);
// imgObj.src = 'https://static.vecteezy.com/system/resources/previews/000/094/478/original/free-abstract-pattern-vector.jpg';
// some functions to write on image
});
function draw() {
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
const nw = this.naturalWidth;
const nh = this.naturalHeight;
ctx.drawImage(this, 0, 0, nw, nh);
};
function failed() {
console.error("The provided file couldn't be loaded as an Image media");
};
btnDownload.addEventListener('click', () => {
const a = document.createElement('a');
document.body.appendChild(a);
a.href = canvas.toDataURL();
a.download = "canvas-image.png";
a.click();
document.body.removeChild(a);
});<canvas id="canvas" width="800" height="500"></canvas>
<input type="file" id="file-upload" />
<button id="btnDownload">Download</button>So in short how can I add upload from url functionality by keeping upload from input functionality?
Note that the things inside the input listener are gonna be the same for upload from url functionality. So may be I have to do something with imgObj and img.src.
