将HTML5 Canvas转换为要上传的文件？

Question

标准HTML文件上载的工作方式如下:

<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"  
     name="form" url="someurl">

    <input type="file" name="file" id="file" />

</form>

在我的情况下,我将图像加载到html5画布,并希望将其作为文件提交到服务器.我可以:

var canvas; // some canvas with an image
var url = canvas.toDataURL();

这给了我一个image/png作为base64.

如何将base64映像以与输入类型文件相同的方式发送到服务器？

问题是base64文件的类型与文件类型不同,后者位于input type ="file"中.

我可以以某种方式转换服务器类型相同的base64吗？

Answer 1

出于安全原因,您无法直接设置文件输入元素的值.

如果要使用文件输入元素:

1. 从画布创建一个图像(就像你一样).
2. 在新页面上显示该图像.
3. 让用户右键单击 - 保存 - 与本地驱动器一样.
4. 然后,他们可以使用您的文件输入元素上传新创建的文件.

或者,您可以使用Ajax POST画布数据:

你问过blob:

var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
    array.push(blobBin.charCodeAt(i));
}
var file=new Blob([new Uint8Array(array)], {type: 'image/png'});


var formdata = new FormData();
formdata.append("myNewFileName", file);
$.ajax({
   url: "uploadFile.php",
   type: "POST",
   data: formdata,
   processData: false,
   contentType: false,
}).done(function(respond){
  alert(respond);
});

注意:最新的浏览器通常支持blob.

Answer 2

画布图像需要转换为base64,然后从base64转换为二进制.这是使用.toDataURL()和完成的dataURItoBlob()

这是一个非常繁琐的过程,需要拼凑几个SO答案,各种博客文章和教程.

我已经创建了一个您可以遵循的教程,它将引导您完成整个过程.

在回答Ateik的评论时,如果您在查看原始链接时遇到问题,这是一个复制原始帖子的小提琴.你也可以在这里分叉我的项目.

有很多代码,但我正在做的核心是采用canvas元素:

<canvas id="flatten" width="800" height="600"></canvas>

将其上下文设置为2D

var snap = document.getElementById('flatten');
var flatten = snap.getContext('2d');

Canvas => Base64 =>二进制

function postCanvasToURL() {
  // Convert canvas image to Base64
  var img = snap.toDataURL();
  // Convert Base64 image to binary
  var file = dataURItoBlob(img);
}

function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
else
    byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}

你可以在base64停止,如果这就是你所需要的,在我的情况下我需要再次转换为二进制,以便我可以将数据传递给twitter(使用OAuth)而不使用数据库.事实证明你可以推特二进制这很酷,推特会将它转换回图像.

Answer 3

目前在规范中(截至2017年4月的支持很少)

Canvas.toBlob();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

编辑:

该链接提供了一个polyfill(它似乎比措辞慢),该代码与@pixelomo答案相当,但与本机toBlob方法具有相同的api :

基于toDataURL的低性能polyfill:

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      var canvas = this;
      setTimeout(function() {

    var binStr = atob( canvas.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i = 0; i < len; i++ ) {
      arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );

      });
    }
  });
}

要以这种方式使用:

canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality

要么

canvas.toBlob(function(blob){...}); // PNG

Answer 4

这最终对我有用。

canvas.toBlob((blob) => {
  let file = new File([blob], "fileName.jpg", { type: "image/jpeg" })
}, 'image/jpeg');

Answer 5

const canvas = document.querySelector("canvas");
canvas.toBlob(blob => {
  const file = new File([blob], "image.png");
});

Answer 6

另一种解决方案:将数据发送到隐藏字段的var url中,解码并保存在服务器上.

Python Django中的示例:

if form.is_valid():
    url = form.cleaned_data['url']
    url_decoded = b64decode(url.encode())        
    content = ContentFile(url_decoded) 
    your_model.model_field.save('image.png', content)