Question

是否可以通过画布（canvas.toDataURL("image/png")）导出图像并以编程方式绑定到<input type="file" />上传控件，而无需使用服务器端技术（因此，只有javascript）？

基本上，我的客户端有一个<form>，除了其他字段之外，他还希望有一个可编辑的图像字段，该字段将被添加到POST上的文件上传HTML控件中。由于现有的<form>是第三方，这意味着我无法修改服务器端逻辑并且客户端坚持要保留第三方<form>，所以我不能这样做。

所以，我有一个客户的特定愿望，我不知道这是否可能。任何提示/指示/帮助将不胜感激。谢谢！

编辑：可能应该提到解决方案必须跨浏览器工作到包括IE7

Answer 1

可能您可以使用FormData来实现它。您需要使用BlobBuilder将画布图像转换为二进制。使用FormData，您可以：

var dataURL = canvas.toDataURL('image/jpeg', 0.5),
    blob = dataURItoBlob(dataURL),
    fd = new FormData(document.getElementById('form'));
fd.append("canvasImage", blob);

您可以在此处详细了解此方法Convert Data URI to File then append to FormData

base64图像从canvas到文件上传HTML控件

1 个答案: