Javascript 如何将画布内容作为文件放入输入类型文件中

经过数月的示例和答案搜索，我找不到任何适合我的。欢迎一切帮助

系统--Woocommerce--单一产品页面

我买了一个附加组件，当你在

上时附加一个图像。这是在单一产品页面

基本上，该插件在表单中添加了一个

，并允许您按顺序附加图像。我对它很满意，因为它工作得很好，而且很多后端工作都得到了处理

另一方面，我有一个

，我需要在

中加载

内容。完成后，附加组件就可以开始工作了

所以我的问题是： 如何将画布内容作为文件放到

中？

最好还是通过a和AJAX发送文件。 但既然它似乎是供个人使用的，而且你已经有了与a一起工作的东西，那么你可能可以使用我的文章中揭露的仍然是黑客的东西。请注意，这仍然只适用于最新的Chromium和Geckos浏览器（不支持Webkit，这意味着不支持iOS）

所以一步一步是,

• 在画布上画画
• 使用以下方法将其导出为Blob
• 从这个Blob构建一个
• 构建一个对象
• 将文件附加到数据传输的

  项

  列表
• 将的

  .files

  属性设置为数据传输的

  .files

//在画布上绘制
const canvas=document.createElement（“canvas”）；
const ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,260,110）；
//转换为Blob（异步）
canvas.toBlob（（blob）=>{
const file=新文件（[blob]，“mycanvas.png”）；
const dT=新数据传输（）；
dT.items.add（文件）；
document.querySelector（“input”）.files=dT.files；
} );
//为了证明图像存在
document.querySelector（“#test”）.onclick=（evt）=>{
const file=document.querySelector（“输入”）.files[0]；
document.body.appendChild（新图像（））
.src=URL.createObjectURL（文件）；
};



提交（检查开发工具网络面板以查看文件是否已发送）


将输入的内容作为图像加载
最好还是通过a和AJAX发送文件。
但既然它似乎是供个人使用的，而且你已经有了与a一起工作的东西，那么你可能可以使用我的文章中揭露的仍然是黑客的东西。请注意，这仍然只适用于最新的Chromium和Geckos浏览器（不支持Webkit，这意味着不支持iOS）

所以一步一步是,


在画布上画画
使用以下方法将其导出为Blob
从这个Blob构建一个
构建一个对象
将文件附加到数据传输的
项
列表
将的
.files
属性设置为数据传输的
.files


//在画布上绘制
const canvas=document.createElement（“canvas”）；
const ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,260,110）；
//转换为Blob（异步）
canvas.toBlob（（blob）=>{
const file=新文件（[blob]，“mycanvas.png”）；
const dT=新数据传输（）；
dT.items.add（文件）；
document.querySelector（“input”）.files=dT.files；
} );
//为了证明图像存在
document.querySelector（“#test”）.onclick=（evt）=>{
const file=document.querySelector（“输入”）.files[0]；
document.body.appendChild（新图像（））
.src=URL.createObjectURL（文件）；
};



提交（检查开发工具网络面板以查看文件是否已发送）


将输入的内容作为图像加载
您可以将画布转换为base64图像路径并使用该路径。第1步：问自己为什么需要画布内容：你在上面画了图像吗？就用那个图像吧。第2步：如果必须使用画布，则只有在画布上绘制的内容都是“干净”数据时（根据CSP），才能使用画布。如果您从没有明确将您列入白名单的第三方站点绘制图像：太糟糕了，您无法访问画布的数据。第3步：在第2步中确认后，使用该函数将画布转换为图像，仅对数据url进行编码，然后将其放入您的输入中。在
toDataURL
之后，我从画布中获取base64数据，然后，我需要将其作为文件类型输入中的文件放入，但我不知道如何操作。我已尝试将input.value设置为等于此获取的数据，但没有结果。您可以将画布转换为base64图像路径并使用该路径。第1步：问自己为什么需要画布内容：你在上面画了图像吗？就用那个图像吧。第2步：如果必须使用画布，则只有在画布上绘制的内容都是“干净”数据时（根据CSP），才能使用画布。如果您从没有明确将您列入白名单的第三方站点绘制图像：太糟糕了，您无法访问画布的数据。第3步：在第2步中确认后，使用该函数将画布转换为图像，仅对数据url进行编码，然后将其放入您的输入中。在
toDataURL
之后，我从画布中获取base64数据，然后，我需要将其作为文件类型输入中的文件放入，但我不知道如何操作。我已尝试将input.value设置为等于获取的此数据，但没有结果。