How send file without input[type="file"]

Question

I have <canvas> and I get result by base64 .

canvas.toDataURL('image/png');

I want send to server but don't send base64 . I want send file PNG. Is it possible?

Thank you JoeJoe87577 / work example:

 var dataurl ='data:image/png;base64,i........I='
    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()
    var blob = dataURLtoBlob(dataurl);
    var fd = new FormData();
    fd.append("key", "6528448c258cff474ca9701c5bab6927");
    fd.append("file", blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http:/', true);
    xhr.onload = function(){
        //alert('upload complete');
    };
    xhr.send(fd);

Have a look at [this](http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript). With the information provided you'll get the binary data from the base64 string. Then you can send the data via [ajax](http://api.jquery.com/jquery.ajax/) or an [XMLHttpRequest](https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest). — JoeJoe87577, Feb 12 '16 at 13:34

score 1 · Answer 1 · answered Feb 12 '16 at 13:35

Yes, you can send it as ajax post request after converting an image to base64 string, check this demo.

Then you can make an ajax post request

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send( imageBase64Data );

score 0 · Answer 2 · answered Feb 12 '16 at 13:36

0

Use canvas.getImageData()

Also see the MDN Documentation for CanvasRenderingContext2D.getImageData().

answered Feb 12 '16 at 13:36

Qbic

298
2
7

How send file without input[type="file"]

2 Answers2