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. With the information provided you'll get the binary data from the base64 string. Then you can send the data via ajax or an XMLHttpRequest. — JoeJoe87577
– JoeJoe87577, Commented Feb 12, 2016 at 13:34

gurvinder372 · Accepted Answer · 2016-02-12 13:35:55Z

1

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

answered Feb 12, 2016 at 13:35

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Qbic · Accepted Answer · 2016-02-12 13:36:02Z

0

Use canvas.getImageData()

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

answered Feb 12, 2016 at 13:36

Qbic

2982 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related