Question

我有<canvas>，我的结果是base64。

canvas.toDataURL('image/png');

我想发送到服务器但不发送base64。我想要发送文件PNG。有可能吗？

谢谢JoeJoe87577 /工作示例：

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

Answer 1

是的，您可以在将图片转换为base64字符串后将其作为ajax post请求发送，请检查此demo。

然后你可以制作ajax post request

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

Answer 2

使用canvas.getImageData()

另请参阅CanvasRenderingContext2D.getImageData()的MDN文档。

如何在没有输入的情况下发送文件[type =“file”]

2 个答案: