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 = "http://lorempixel.com/400/200/";
};

Answer 2

首先，它应该是画布 .toDataURL（）？

以下是将内容添加到图像元素http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

的类似示例

当从其他主机名加载图像时，我也收到以下错误：

Uncaught SecurityError：无法执行'toDataURL' 'HTMLCanvasElement'：可能无法导出受污染的画布。

当图像未添加到画布时，它可以正常工作，因此问题可能与CORS HTTP headers not added with image有关。尝试删除

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

看到它没有图像

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

JavaScript的;使用画布在图像上添加文本并保存到图像

2 个答案: