Save Canvas With Background Image And Text Content As image

Question

How can I save canvas with background data and text content as Image.

I have tried toDataUrl but its returning me only blank canvas.

<canvas id="canvas" width="578" height="250" crossOrigin="Anonymous"></canvas>
<a id="link_save" href="https://google.com/" target="_blank">SAVE</a>

<script>

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        context.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    context.fillText(line, x, y);
  }

var canvas = document.getElementById('canvas');
var image = new Image();
image.src = './img/bg.jpg';
var base = canvas.toDataURL();
console.log(base);
image.onload = function () {
var context = canvas.getContext('2d');

var width = 500;
var height = 500;
context.drawImage(image, 10, 0, 300, 200); // resizes image to 300px wide, 200px high


  var maxWidth = 400;
  var lineHeight = 25;
  var x = (canvas.width - maxWidth) / 2;
  var y = 60;
  var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';

  context.font = '16pt Calibri';
  context.fillStyle = '#333';

  wrapText(context, text, x, y, maxWidth, lineHeight);
};

</script>

I have tried saving canvas but only returns blank canvas, not with content.

I didn't notice you define an onload function in there. You will have to wait for that to execute before doing .toDataURL — James, Nov 04 '18 at 21:44
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Image.image.onload (file:///C:/Nest/start.html:61:21) — Mayank S. Gupta, Nov 04 '18 at 21:46
Re tainted canvases - https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported — James, Nov 04 '18 at 21:49
try saving canvas AFTER onload and add a small delay, eg with `setTimeout(function(){/* canvas.todataUrl();*/}, 40)` — Nikos M., Nov 06 '18 at 13:57

NoLogig · Answer 1 · 2018-11-06T14:03:40.727

0

You call canvas.toDataUrl() before the image has been load.

Put the code at the end of onload event

image.onload = function () {

    // Do stuff...

    var base = canvas.toDataURL();
    console.log(base);
}

Another hack: After your done manipulate...just right click in your browser on the canvas and save as .png ;)

edited Nov 06 '18 at 14:03

answered Nov 06 '18 at 13:31

NoLogig

131
7

Save Canvas With Background Image And Text Content As image

1 Answers1