-2

I'm try to load image into canvas and text over it, then download it with text.

I successfully load image into canvas and text over it. but when I try to download the image with text it's download black, after many attempts, I tried to ger the canvas's "toDataURL" and discovered it's blank.

I don't know what's the problem, but I think it's get the toDataURL before the image loaded.

here's my piece of code

function addTextToImage(imagePath, text) {
    var circle_canvas = document.getElementById("canvas");
    var context = circle_canvas.getContext("2d");

    // Draw Image function
    var img = new Image();
    img.src = imagePath;
    img.onload = function () {
        context.drawImage(img, 0, 0);
        context.lineWidth = 1;
        context.fillStyle = "#F00";
        context.lineStyle = "#F00";
        context.font = "18px sans-serif";
        context.fillText(text, 50, 50);
    };
    
}
addTextToImage("myImage.jpeg", "My Name is Muhammad");

console.log(circle_canvas.toDataURL());
<canvas id="canvas" width="340" height="340"></canvas>

** Edit The image I wanna write over it, it's from my PC

MuhammadElshater
  • 49
  • 1
  • 7
  • `circle_canvas` is a variable inside `addTextToImage` function - that's why you get the error that it is not defined – Bravo Apr 02 '22 at 02:46
  • yeah, if I wrote it like that 'document.getElementById("canvas").toDataURL()' .. I got a blank urlData – MuhammadElshater Apr 02 '22 at 12:48
  • I don't - so, something else you're not telling us – Bravo Apr 02 '22 at 23:06
  • oh, wait ... do the `console.log(circle_canvas.toDataURL());` inside the `img.onload`, because then the image will be loaded – Bravo Apr 02 '22 at 23:09
  • you get the "tainted" error because you're not running the code on a HTTP server, you're probably opening your web page using `file://` protocol, right? – Bravo Apr 02 '22 at 23:11
  • yeah I think this's the issue, I take the file without any change and put it on the server and it's work like charm, Thank You. – MuhammadElshater Apr 09 '22 at 14:16

2 Answers2

0

You have to wait after img is finished loading. Or use async or callback function instead.

function addTextToImage(imagePath, text) {
var circle_canvas = document.getElementById("canvas");
var context = circle_canvas.getContext("2d");

// Draw Image function
var img = new Image();
img.src = imagePath;
img.onload = function () {
    context.drawImage(img, 0, 0);
    context.lineWidth = 1;
    context.fillStyle = "#F00";
    context.lineStyle = "#F00";
    context.font = "18px sans-serif";
    context.fillText(text, 50, 50);
    console.log(circle_canvas.toDataURL());
};
img.setAttribute('crossorigin', 'anonymous');
}

Visit:
https://playcode.io/880411/

Get canvas toDataUrl() after processing Javascript

Tainted canvases may not be exported

thanh trang Nguyen
  • 3
  • 2
  • console.log(circle_canvas.toDataURL()); inside load img get an error 'Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Image.img.onload', if put console.log(circle_canvas.toDataURL()) after the call of function there's no error, but it will get data of blank canvas ! – MuhammadElshater Apr 02 '22 at 11:11
  • Make sure you have right to access/download to the picture. – thanh trang Nguyen Apr 03 '22 at 23:39
0

try doing this, here I'm doing the downloading process inside the onload event.

function addTextToImage(imagePath, text) {
      var circle_canvas = document.getElementById("canvas");
      var context = circle_canvas.getContext("2d");

      // Draw Image function
     var img = new Image();
     img.src = imagePath;
     img.onload = function () {
        context.drawImage(img, 0, 0);
        context.lineWidth = 1;
        context.fillStyle = "#F00";
        context.lineStyle = "#F00";
        context.font = "18px sans-serif";
        context.fillText(text, 50, 50);

        // after image loads
        let fileName = `ImageName.png`
        const link = document.createElement('a')
        link.href = circle_canvas.toDataURL("image/png").replace("image/png", 
         "image/octet-stream")
        link.download = fileName
        link.click();
    
   };

}
 addTextToImage("myImage.jpeg", "My Name is Muhammad");
Robinson Batista Madrigal
  • 126
  • 1
  • 7
  • get an error 'Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Image.img.onload' – MuhammadElshater Apr 02 '22 at 10:46