Javascript 从不带Canvas元素的HTML Canvas ImageData创建Base64数据

我有一个canvas元素

CA

，我在上面画了一些奇特的东西。然后我从canvas

CA

对ImageData

IDA

运行某种过滤器，并创建新的、修改过的ImageData

IDB

。现在，我希望将这个

IDB

转换为base64字符串，而不需要第二个辅助画布

我在本主题中找到的所有内容都显示了整个画布正在转换为dataURL。没有CB是否可能？怎么做

var CA=document.getElementById（“CA”）；
var ctx=CA.getContext（“2d”）；
ctx.beginPath（）；
ctx.fillRect（100100100100）；
ctx.stroke（）；
ctx.closePath（）；
var srcImg=ctx.getImageData（0，0，CA.width，CA.height），
srcData=srcImg.data，
dstImg=ctx.createImageData（srcImg），
dstData=dstImg.data；
对于（vari=0，maxI=srcData.length；i0）{
dstData[i]=dstData[i+1]=dstData[i+2]=255；
dstData[i+3]=0；
}
否则{
dstData[i]=dstData[i+1]=dstData[i+2]=0；
dstData[i+3]=255；
}
}
//如何从dstImg创建base64？？
//...
//只是为了形象化
document.getElementById（“CB”）.getContext（“2d”）.putImageData（dstImg，0,0）
画布{
边框：1px实心；
}

您可以克隆原始的
元素，
.putImageData（）
，
克隆.toDataURL（）


var CA=document.getElementById（“CA”）；
var ctx=CA.getContext（“2d”）；
ctx.beginPath（）；
ctx.fillRect（100100100100）；
ctx.stroke（）；
ctx.closePath（）；
var srcImg=ctx.getImageData（0，0，CA.width，CA.height），
srcData=srcImg.data，
dstImg=ctx.createImageData（srcImg），
dstData=dstImg.data；
对于（var i=0，maxI=srcData.length；i0）{
dstData[i]=dstData[i+1]=dstData[i+2]=255；
dstData[i+3]=0；
}否则{
dstData[i]=dstData[i+1]=dstData[i+2]=0；
dstData[i+3]=255；
}
}
var clone=document.getElementById（“CA”）.cloneNode（）；
var ctx=clone.getContext（“2d”）；
ctx.putImageData（dstImg，0,0）；
var url=clone.toDataURL（）；
var img=document.createElement（“img”）；
img.onload=函数（）{
document.body.appendChild（本文件）；
console.log（url）；
}
img.src=url
画布{
边框：1px实心；
}
您可以克隆原始的
元素，调用
.clearRect（）
，
.putImageData（）
，
克隆.toDataURL（）
@guest271314:嘿，谢谢您的帮助。这确实很有效。我正在使用
CA.cloneNode（false）用于此。如果你能创建一个答案，我会接受它：）顺便问一句：
clearRect（）
真的需要吗，或者
putImageData（）
会像我预期的那样替换整个内容吗？这会让它变得更好。再次感谢：）即使它确实解决了OP的问题，但不幸的是它没有回答标题问题，因为
clone
是一个画布元素。问题标题应重新格式化为…不带Visible canvas元素。（我这么说是因为我知道我们将寻找一个独立的png编码器）@kaido尝试过，尽管不确定如何从
ImagData
对象创建
文件
对象，但这也可能是问题的另一个变体。在链接帖子中，应该可以使用
canvas.toBlob（）
，然后使用
FileReader
创建
数据URL
。另一种方法是发送
FormData
对象，包括
Blob
作为
File
对象，在
message
事件中使用
FileReader
。另一种方法可以使用
SharedWorker
作为
文件
对象发送或接收图像，或者
数据URL
作为我评论中的链接问题，他需要完全摆脱画布，因此他必须从头开始在js中生成png文件。他的问题不在于base64编码，而在于png解码/编码在每个实现中都是不同的。他甚至不能使用图像数据。