Canvas =＆gt; Base64 =＆gt;二进制

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

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

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

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

或者，您可以使用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答案，各种博客文章和教程。

I've created a tutorial you can follow which walks you through the process。

在回答Ateik的评论时a fiddle复制原帖，以防您在查看原始链接时遇到问题。您还可以fork my project here。

有很多代码，但我正在做的核心是画布元素：

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

将其上下文设置为2D

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

Canvas =＆gt; Base64 =＆gt;二进制

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

另一种解决方案：将数据发送到隐藏字段的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)

Answer 5

这最终对我有用。

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

Answer 6

我以前做起来很简单

var formData = new FormData(),
    uploadedImageName = 'selfie.png';

canvas.toBlob(function (blob) {
    formData.append('user_picture', blob, uploadedImageName);
    $.ajax({
        data: formData,
        type: "POST",
        dataType: "JSON",
        url: '',
        processData: false,
        contentType: false,
    });
});

Answer 7

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

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

7 个答案:

Canvas =＆gt; Base64 =＆gt;二进制