Chuyển đổi URI dữ liệu thành tệp sau đó nối vào FormData

Tôi đã cố gắng triển khai lại trình tải lên hình ảnh HTML5 giống như trên trang web Mozilla Hacks , nhưng nó hoạt động với các trình duyệt WebKit. Một phần của nhiệm vụ là trích xuất một tệp hình ảnh từ canvasđối tượng và nối nó vào đối tượng FormData để tải lên.

Vấn đề là trong khi canvascó toDataURLchức năng trả về một đại diện của tệp hình ảnh, đối tượng FormData chỉ chấp nhận các đối tượng Tệp hoặc Blob từ API tệp .

Giải pháp Mozilla đã sử dụng chức năng chỉ dành cho Firefox sau đây trên canvas:

var file = canvas.mozGetAsFile("foo.png");

... không khả dụng trên các trình duyệt WebKit. Giải pháp tốt nhất tôi có thể nghĩ đến là tìm cách chuyển đổi URI dữ liệu thành đối tượng Tệp, mà tôi nghĩ có thể là một phần của API tệp, nhưng tôi không thể tìm thấy điều gì đó để làm điều đó.

Có thể không? Nếu không, có sự thay thế nào không?

Cảm ơn.

Sau khi chơi xung quanh với một vài thứ, tôi đã tự mình tìm ra điều này.

Trước hết, điều này sẽ chuyển đổi dataURI thành Blob:

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});
}

Từ đó, việc thêm dữ liệu vào một biểu mẫu sao cho nó sẽ được tải lên dưới dạng tệp rất dễ dàng:

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

BlobBuilder và ArrayBuffer hiện không được chấp nhận, đây là mã nhận xét hàng đầu được cập nhật với hàm tạo Blob:

function dataURItoBlob(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

Cái này hoạt động trong iOS và Safari.

Bạn cần sử dụng giải pháp ArrayBuffer của Stoive nhưng bạn không thể sử dụng BlobBuilder, như vava720 chỉ ra, vì vậy đây là bản mashup của cả hai.

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

Firefox có các phương thức canvas.toBlob () và canvas.mozGetAsFile () .

Nhưng các trình duyệt khác thì không.

Chúng ta có thể lấy dataurl từ canvas và sau đó chuyển đổi dataurl sang đối tượng blob.

Đây là dataURLtoBlob()chức năng của tôi . Nó rất ngắn.

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

Sử dụng chức năng này với FormData để xử lý canvas hoặc dataurl của bạn.

Ví dụ:

var dataurl = canvas.toDataURL('image/jpeg',0.8);
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");

Ngoài ra, bạn có thể tạo một HTMLCanvasElement.prototype.toBlobphương thức cho trình duyệt động cơ không tắc kè.

if(!HTMLCanvasElement.prototype.toBlob){
    HTMLCanvasElement.prototype.toBlob = function(callback, type, encoderOptions){
        var dataurl = this.toDataURL(type, encoderOptions);
        var bstr = atob(dataurl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {type: type});
        callback.call(this, blob);
    };
}

Bây giờ canvas.toBlob()hoạt động cho tất cả các trình duyệt hiện đại không chỉ Firefox. Ví dụ:

canvas.toBlob(
    function(blob){
        var fd = new FormData();
        fd.append("myFile", blob, "thumb.jpg");
        //continue do something...
    },
    'image/jpeg',
    0.8
);

Cách ưa thích của tôi là canvas.toBlob ()

Nhưng dù sao ở đây vẫn là một cách khác để chuyển đổi Base64 thành blob bằng cách sử dụng fetch ^^,

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => {
  var fd = new FormData()
  fd.append('image', blob, 'filename')
  
  console.log(blob)

  // Upload
  // fetch('upload', {method: 'POST', body: fd})
})

Nhờ @Stoive và @ vava720, tôi đã kết hợp cả hai theo cách này, tránh sử dụng BlobBuilder và ArrayBuffer không dùng nữa

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) {
        content[i] = byteString.charCodeAt(i)
    }

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

Tiêu chuẩn đang phát triển có vẻ là canvas.toBlob () chứ không phải canvas.getAsFile () như Mozilla nguy hiểm để đoán.

Tôi chưa thấy trình duyệt nào hỗ trợ nó :(

Cảm ơn cho chủ đề tuyệt vời này!

Ngoài ra, bất kỳ ai đang thử câu trả lời được chấp nhận cũng nên cẩn thận với BlobBuilder vì tôi thấy việc hỗ trợ bị hạn chế (và được đặt tên):

    var bb;
    try {
        bb = new BlobBuilder();
    } catch(e) {
        try {
            bb = new WebKitBlobBuilder();
        } catch(e) {
            bb = new MozBlobBuilder();
        }
    }

Bạn có đang sử dụng polyfill của thư viện khác cho BlobBuilder không?

var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);

có thể được sử dụng mà không cần thử bắt.

Cảm ơn bạn đã kiểm tra. Công việc tuyệt vời

Câu trả lời ban đầu của Stoive có thể dễ dàng sửa chữa bằng cách thay đổi dòng cuối cùng để phù hợp với Blob:

function dataURItoBlob (dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    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 an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab],{type: mimeString});
}

Đây là phiên bản ES6 của câu trả lời của Stoive :

export class ImageDataConverter {
  constructor(dataURI) {
    this.dataURI = dataURI;
  }

  getByteString() {
    let byteString;
    if (this.dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(this.dataURI.split(',')[1]);
    } else {
      byteString = decodeURI(this.dataURI.split(',')[1]);
    }
    return byteString;
  }

  getMimeString() {
    return this.dataURI.split(',')[0].split(':')[1].split(';')[0];
  }

  convertToTypedArray() {
    let byteString = this.getByteString();
    let ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return ia;
  }

  dataURItoBlob() {
    let mimeString = this.getMimeString();
    let intArray = this.convertToTypedArray();
    return new Blob([intArray], {type: mimeString});
  }
}

Sử dụng:

const dataURL = canvas.toDataURL('image/jpeg', 0.5);
const blob = new ImageDataConverter(dataURL).dataURItoBlob();
let fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

Cảm ơn! @steovi cho giải pháp này.

Tôi đã thêm hỗ trợ cho phiên bản ES6 và thay đổi từ unescape sang dataURI (unescape bị phản đối).

converterDataURItoBlob(dataURI) {
    let byteString;
    let mimeString;
    let ia;

    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = encodeURI(dataURI.split(',')[1]);
    }
    // separate out the mime component
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}

làm cho nó đơn giản: D

function dataURItoBlob(dataURI,mime) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs

    var byteString = window.atob(dataURI);

    // separate out the mime component


    // write the bytes of the string to an ArrayBuffer
    //var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var blob = new Blob([ia], { type: mime });

    return blob;
}

toDataURL cung cấp cho bạn một chuỗi và bạn có thể đặt chuỗi đó vào một đầu vào ẩn.

Tôi đã có chính xác vấn đề tương tự như Ravinder Payal và tôi đã tìm thấy câu trả lời. Thử cái này:

var dataURL = canvas.toDataURL("image/jpeg");

var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataURL.substring(23)});