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

Javascript; Adding text on image using canvas and save to image

本文关键字：图像 添加 文本 保存 Javascript      更新时间：2023-09-26

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

我试图用几种方式做到这一点，但没有运气。 

<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 时才有效。

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

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";
};

首先，它应该是 canvas.toDataURL（） 吗？

下面是将内容放入图像元素 http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/的类似示例

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

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

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

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

看看它没有图像就可以工作

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

相关文章：