javascript - फ़ाइल यूआरआई को फ़ाइल में कनवर्ट करें और फिर फॉर्मडाटा में शामिल करें




html5 webkit (10)

मैं एक HTML5 छवि अपलोडर को फिर से कार्यान्वित करने की कोशिश कर रहा हूं जैसे मोज़िला हैक्स साइट पर, लेकिन यह वेबकिट ब्राउज़र के साथ काम करता है। कार्य का हिस्सा canvas ऑब्जेक्ट से एक छवि फ़ाइल निकालना है और इसे अपलोड करने के लिए FormData ऑब्जेक्ट में जोड़ना है।

मुद्दा यह है कि canvas में छवि फ़ाइल का प्रतिनिधित्व करने के लिए toDataURL फ़ंक्शन है, तो FormData ऑब्जेक्ट केवल फ़ाइल API से फ़ाइल या ब्लॉब ऑब्जेक्ट स्वीकार करता है

मोज़िला समाधान ने canvas पर निम्न फ़ायरफ़ॉक्स-केवल फ़ंक्शन का उपयोग किया:

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

... जो वेबकिट ब्राउज़र पर उपलब्ध नहीं है। सबसे अच्छा समाधान मैं सोच सकता हूं कि डेटा यूआरआई को फ़ाइल ऑब्जेक्ट में कनवर्ट करने का कोई तरीका ढूंढना है, जिसे मैंने सोचा था कि फाइल एपीआई का हिस्सा हो सकता है, लेकिन मैं अपने जीवन के लिए ऐसा कुछ नहीं कर सकता।

क्या यह संभव है? यदि नहीं, तो कोई विकल्प?

धन्यवाद।


@Stoive और @ vava720 के लिए धन्यवाद, मैंने इस तरह से दोनों को संयुक्त किया, बहिष्कृत ब्लॉबबिल्डर और ऐरेबफर का उपयोग करने से परहेज किया

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

BlobBuilder और ArrayBuffer अब बहिष्कृत हैं, यहां ब्लॉब कन्स्ट्रक्टर के साथ अपडेट की गई शीर्ष टिप्पणी कोड है:

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

इसे सरल बनाएं: डी

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

कुछ चीजों के साथ खेलने के बाद, मैं इसे स्वयं समझने में कामयाब रहा।

सबसे पहले, यह डेटायूआई को ब्लॉब में परिवर्तित करेगा:

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

वहां से, डेटा को एक रूप में जोड़ना जैसे कि इसे फ़ाइल के रूप में अपलोड किया जाना आसान है:

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

फ़ायरफ़ॉक्स में canvas.toBlob () और canvas.mozGetAsFile () विधियां हैं।

लेकिन अन्य ब्राउज़रों नहीं है।

हम कैनवास से डेटोरल प्राप्त कर सकते हैं और फिर डेटाोरल को ब्लॉब ऑब्जेक्ट में परिवर्तित कर सकते हैं।

यहां मेरा dataURLtoBlob () फ़ंक्शन है। यह बहुत छोटा है।

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

अपने कैनवास या डेटाोरल को संभालने के लिए फॉर्मडाटा के साथ इस फ़ंक्शन का उपयोग करें।

उदाहरण के लिए:

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

साथ ही, आप non gecko इंजन ब्राउज़र के लिए HTMLCanvasElement.prototype.toBlob विधि बना सकते हैं।

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

अब canvas.toBlob () सभी आधुनिक ब्राउज़रों के लिए काम करता है न केवल फ़ायरफ़ॉक्स। उदाहरण के लिए:

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

मुझे रविंदर पायल के समान ही समस्या थी, और मुझे जवाब मिल गया। इसे इस्तेमाल करे:

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

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

यह आईओएस और सफारी में काम करता है।

आपको स्टेइव के ऐरेबफर समाधान का उपयोग करने की आवश्यकता है लेकिन आप ब्लॉबबिल्डर का उपयोग नहीं कर सकते, क्योंकि vava720 इंगित करता है, इसलिए यहां दोनों का मैशप है।

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

विकसित मानक canvas.toBlob() नहीं है क्योंकि मोज़िला अनुमान लगाने के लिए खतरे में है।

मुझे अभी तक कोई ब्राउज़र नहीं दिख रहा है :(

इस महान धागे के लिए धन्यवाद!

साथ ही, स्वीकृत उत्तर की कोशिश करने वाले किसी भी व्यक्ति को ब्लॉबबिल्डर के साथ सावधान रहना चाहिए क्योंकि मुझे सीमित होने के लिए समर्थन मिल रहा है (और नामित):

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

क्या आप ब्लॉबबिल्डर के लिए एक और लाइब्रेरी की पॉलीफिल का उपयोग कर रहे थे?


share का share संस्करण यहां share :

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

उपयोग:

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

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

प्रयास पकड़ने के बिना इस्तेमाल किया जा सकता है।

Check_ca के लिए धन्यवाद। अच्छा कार्य।





webkit