Javascript；使用画布在图像上添加文本并保存到图像

Question

我只想制作一个页面，您可以在其中键入文本并将其添加到所选图像上并将其另存为新图像。

我尝试通过几种方式做到这一点，但没有运气。

<body>
<canvas id = "idCanvas" width = "576" height = "577"> </canvas>
<img id="canvasImg" width = "576" height = "577"></img>
<script>
window.onload = function(){
  var canvas = document.getElementById('idCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  var dataURL = canvas.toDataURL();

  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0, 576, 577);
    context.font = "20px Calibri";
    context.fillText("My TEXT!", 50, 200);

    document.getElementById('canvasImg').src = toDataURL();
    window.alert(dataURL);
  };
  imageObj.src =  "image.png";

  };



</script>

当我在 img src 中使用 toDataURL() 时，图像不会显示，只有当我不在画布中使用 drawImage 时才有效。

Answer 1

好的，是的，出于安全原因，它不起作用，但有一个解决方案。 在这里看到一个工作演示： FIDDLE

draw();

function draw() {

    var canvas = document.getElementById('idCanvas');
    var context = canvas.getContext('2d');

    var imageObj = new Image();


  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    context.font = "40px Calibri";
    context.fillStyle = "red";
    context.fillText("My TEXT!", 50, 300);

    var canvas = document.getElementById('idCanvas');
    var dataURL = canvas.toDataURL();

    alert(dataURL);
  }
imageObj.setAttribute('crossOrigin', 'anonymous');
imageObj.src = "https://loremflickr.com/400/200";
};

Answer 2

首先，它应该是canvas .toDataURL() 吗？

这是一个类似的例子，将内容放入图像元素http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

从另一个主机名加载图像时，我也收到以下错误：

未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

当图像未添加到画布时，它工作正常，因此问题可能与未添加图像的 CORS HTTP 标头有关。 尝试删除

context.drawImage(imageObj, 0, 0, 576, 577);

看看它在没有图像的情况下工作

这是一个基于相关代码的演示。 http://jsbin.com/logikuwefo/1/edit

Javascript；使用画布在图像上添加文本并保存到图像

问题描述

2 个解决方案

解决方案1
2 2015-01-19 00:11:25

解决方案2
0 2015-01-18 21:58:11

Javascript； 使用画布在图像上添加文本并保存到图像

问题描述

2 个解决方案

解决方案1 2 2015-01-19 00:11:25

解决方案2 0 2015-01-18 21:58:11

Javascript；使用画布在图像上添加文本并保存到图像

解决方案1
2 2015-01-19 00:11:25

解决方案2
0 2015-01-18 21:58:11