将HTML5画布转换为要上传的文件?

2020/11/29 09:11 · jquery ·  · 0评论

标准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文件与输入type =“ file”内部的文件类型不同。

我能以某种方式将服务器的类型转换为base64吗?

出于安全原因,您不能直接设置文件输入元素的值。

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

  1. 从画布创建图像(完成操作)。
  2. 在新页面上显示该图像。
  3. 让用户右键单击另存为本地驱动器。
  4. 然后,他们可以使用您的file-input元素上载该新创建的文件。

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

您询问了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。

画布图像需要转换为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');

画布=> 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处停止,就我而言,我需要再次转换为二进制,以便无需使用db就可以将数据传递到twitter(使用OAuth)。事实证明,您可以鸣叫非常酷的二进制文件,twitter会将其转换回图像。

目前处于规格中(截至17年4月,几乎没有支持)

Canvas.toBlob();

https://developer.mozilla.org/zh-CN/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

另一个解决方案:在隐藏字段中以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)

这最终对我有用。

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

我以前做的很简单

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,
    });
});
本文地址:http://jquery.askforanswer.com/jianghtml5huabuzhuanhuanweiyaoshangchuandewenjian.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!