javascript - 将文字放在图像上并另存为图像

Question

我在使用 HTML5 Canvas 时遇到了一个问题。我有一张图片。我想在此图像上放置文本并将其显示/保存为图像。

我有这个代码:

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);
 };
 imageObj.src = "mail-image.jpg"; 
};

这很好用。上面有我的图片和文字。但它仍然是一 block Canvas ，没有图像。谁能帮帮我？

Answer 1

出于安全原因，没有方便的方法将 Canvas 绘图保存到用户的本地驱动器。

作为变通方法，使用“老派”:将 Canvas 转换为图像并在新窗口中显示。

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);

     // open the image in a new browser tab
     // the user can right-click and save that image
     var win=window.open();
     win.document.write("<img src='"+canvas.toDataURL()+"'/>");    

 };
 imageObj.src = "mail-image.jpg"; 
};