将图像保存到画布，然后绘制更多

save image to canvas then draw more

本文关键字：然后 绘制 图像 保存      更新时间：2023-09-26

im试图将图像保存到画布上，然后绘制更多图像。这就是我所得到的。它会吐出我的图像和绘图，但当我添加文本时会删除图像

-

绘制图像

var  tCtx2 = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
var ttyl = document.getElementById('newimg');
tCtx2.drawImage(ttyl,0,0);
imageElem.src = tCtx2.canvas.toDataURL("images/image.png");

开始文本绘制

document.getElementById('text').addEventListener('keyup', function (){
tCtx.globalCompositeOperation="source-over";
var mytxt = document.getElementById('text').value;
var mystr1 = mytxt.substr(0, 31);
var mystr2 = mytxt.substr(31, 31);
var mystr3 = mytxt.substr(62, 31);
var mystr4 = mytxt.substr(93, 31);
tCtx.canvas.width = imageElem.width; 
tCtx.fillStyle = '#000000';
tCtx.font = '17pt "Lucida Sans Unicode", "Lucida Grande", sans-serif';
tCtx.fillText(mystr1, 10, 98); 
tCtx.fillText(mystr2, 10, 122);
tCtx.fillText(mystr3, 10, 146);
tCtx.fillText(mystr4, 10, 168);

开始一起保存

var copiedImg = new Image();
copiedImg.onload = function(){
tCtx.drawImage(copiedImg, 0, 0);
};
copiedImg.src = imageElem.src;

imageElem.src = tCtx.canvas.toDataURL('image/png')
}, false);

我有一种感觉是这行：

tCtx.canvas.width = imageElem.width;

从这里：

当您通过为宽度或高度poperties指定值时JavaScript它有重置画布的副作用。所以类似于clearRect函数，这意味着画布恢复透明度。

相关文章：