javascript - 如何将 Canvas 内容作为文件放入输入类型文件中

Question

经过几个月的搜索示例和答案，我找不到任何适合我的东西。欢迎所有帮助。

系统 --- Woocommerce -- 单个产品页面。

我购买了一个附加组件，以便在您使用时附加一张图像 <form class="cart"> 。这是在单个产品页面中。

基本上，该插件添加了一个 <input type ="file">并允许您按顺序附加图像。我对它很满意，因为它运行良好，并且处理了很多后端工作。

另一方面，我有一个 <canvas>我需要你加载 <canvas>内容在 <input type ="file"> 。完成后，该插件就可以开始执行其工作了。

所以我的问题是: 如何将 Canvas 内容作为文件放入 <input> ？

Answer 1

最好的仍然是通过 FormData 发送文件和 AJAX。

但是由于它似乎是供个人使用的，并且您已经有一些与

一起使用的东西，您可能可以使用 this answer 中仍然暴露的黑客攻击。我的。请注意，这仍然仅适用于最新的 Chromium 和 Geckos 浏览器(不支持 Webkit，这意味着不支持 iOS)。

所以一步一步是，

• 在 Canvas 上绘画。
• 使用 HTMLCanvasElement.toBlob() 将其导出到 Blob方法。
• 建立一个 File来自这个 Blob
• 建立一个 DataTransfer对象
• 将文件附加到 DataTransfer 的 items 列表
• 将 <input type="file"> 的 .files 属性设置为 DataTransfer 的 .files

// draw on the canvas
const canvas = document.createElement( "canvas" );
const ctx = canvas.getContext( "2d" );
ctx.fillStyle = "red";
ctx.fillRect( 20, 20, 260, 110 );

// convert to Blob (async)
canvas.toBlob( (blob) => {
  const file = new File( [ blob ], "mycanvas.png" );
  const dT = new DataTransfer();
  dT.items.add( file );
  document.querySelector( "input" ).files = dT.files;
} );

// to prove the image is there
document.querySelector( "#test" ).onclick = (evt) => {
  const file = document.querySelector( "input" ).files[ 0 ];
  document.body.appendChild( new Image() )
    .src = URL.createObjectURL( file );
};

<form method="POST">
  <input type="file" name="file"><br>
  <button>submit</button> (check your dev tools network panel to see the File is sent)
</form>
<br>
<button id="test">
  load input's content as image
</button>