个人中心
gpt4 book ai didi

Java脚本；使用 Canvas 在图像上添加文本并保存到图像

转载 作者：可可西里 更新时间：2023-11-01 14:47:13 28 4
gpt4 key购买 nike

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

我尝试了几种方法，但没有成功。 

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

最佳答案

好的，是的，出于安全原因，它不会工作，但有一个解决方案。在这里查看工作演示: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";
};

关于Java脚本；使用 Canvas 在图像上添加文本并保存到图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28015211/

28 4 0
文章推荐： html - 如何防止打印::在 css 之后？
文章推荐： hadoop - 澄清映射任务并减少hadoop中的任务？
文章推荐： scala - 如何对 RDD 进行分区
文章推荐： html - 将 SVG 高度和宽度设置为其内部 节点的高度和宽度
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com