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

Question

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

\n

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

\n

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

\n

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

\n

另一方面，我有一个<canvas>，我需要<canvas>加载<input type ="file">. 完成后，该附加组件就可以开始工作了。

\n

所以我的问题是：\n如何将画布的内容作为文件放入<input>？

\n

Answer 1

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

但由于它似乎是供个人使用的，并且您已经有一些与 <form> 一起使用的东西，您可能可以使用我的这个答案中仍然暴露的黑客内容。请注意，这仍然仅适用于最新的 Chromium 和 Geckos 浏览器（不支持 Webkit，这意味着不支持 iOS）。

所以一步一步来就是，

• 在画布上画画。
• 使用该方法将其导出到 Blob HTMLCanvasElement.toBlob()。
• 从这个 Blob构建一个文件
• 构建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>