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

Question

i just want to make a page where u can type a text and add it on selected image and save that as new image.我只想制作一个页面，您可以在其中键入文本并将其添加到所选图像上并将其另存为新图像。

I tried to do it in few ways, but without luck.我尝试通过几种方式做到这一点，但没有运气。

<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>

When i use toDataURL() in img src, the image won't be displayed, it only works if i'm not using drawImage in canvas.当我在 img src 中使用 toDataURL() 时，图像不会显示，只有当我不在画布中使用 drawImage 时才有效。

Answer 1

Ok so yes it will not work for security reason, but there is a solution.好的，是的，出于安全原因，它不起作用，但有一个解决方案。 See here a working demo: FIDDLE在这里看到一个工作演示： 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

First of all, Should it be canvas .toDataURL() ?首先，它应该是canvas .toDataURL() 吗？

Here is a similar example with getting contents into image element http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/这是一个类似的例子，将内容放入图像元素http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Also I was getting the following error when image is loaded from another hostname:从另一个主机名加载图像时，我也收到以下错误：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

When image is not added to canvas it works fine, so issue could be related to CORS HTTP headers not added with image .当图像未添加到画布时，它工作正常，因此问题可能与未添加图像的 CORS HTTP 标头有关。 Try removing尝试删除

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

to see that it works without image看看它在没有图像的情况下工作

Here is a demo based on code in question.这是一个基于相关代码的演示。 http://jsbin.com/logikuwefo/1/edit 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