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

Question

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

4

我希望您能制作一个页面，使用户可以在选定的图像上输入文本并将其保存为新图像。我尝试了几种方法，但都没有成功。

<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()时，图片不会显示，只有在canvas中没有使用drawImage时才有效。

- Deividas Pekunas

问题是，toDataURL() 方法来自哪里？ - Tasos Vogiatzoglou

我的错，我是指 document.getElementById('canvasImg').src = dataURL。 - Deividas Pekunas

2个回答

0

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

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

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

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

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

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

为了查看它是否可以在没有图像的情况下工作

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

- Maksym Kozlenko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michelangelo · Accepted Answer

好的，出于安全原因它将无法工作，但有一种解决方案。在这里可以看到一个可工作的演示：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";
};