将图片上传为base64字符串以进行解析

Question

我有以下问题。 我正在使用画布来调整用户上传到我的Webapp的图片的大小。 然后，我从画布中检索图片作为base64编码的字符串，然后尝试将其上传到解析服务器。 由于解析支持base64，因此我认为它可以工作。

但是，当我上传图像时，没有图像，而是我上传的每个图像文件的以下消息：

{“ _ContentType”：“图像/ jpg”，“ _ ApplicationId”：“ MY APPLICATION ID”，“ _ JavaScriptKey”：“ MY JAVASCRIPT KEY”，“ _ ClientVersion”：“ js1.3.5”，“ _ InstallationId”：“安装ID” ，“ _ SessionToken”：“当前用户的会话令牌”}

我可以检索文件，但是没有图像。

这是我上传图片的代码：

var fileUploadControl = $("#product_pictureUploadModal")[0];
                if (fileUploadControl.files.length > 0) {

                    //THE USER SUCCESSFULLY SELECTED A FILE

                    var file = fileUploadControl.files[0];
                    if(file.type.match(/image.*/)){

                        //RESIZE THE IMAGE AND RETURN a base64 STRING

                        var resizedImage = resizeImage(file);

                        //CREATE A PARSE FILE

                        var name = "picture.jpg";
                        var parseFile = new Parse.File(name, {base64: resizedImage}, "image/jpg");
                        parseFile.save().then(function() {
                                                 //IMAGE SUCCESSFULLY UPLOADED
                        },
                        function(error){
                        alert(error.message);
                        });

                    }else{
                        //THE USER DIDNT CHOSE A PICTURE

                    }
                }else{
                    //THE USER DIDNT SELECT A FILE

                }

这是我调整图片大小的代码：

function resizeImage(file){
    var MAX_WIDTH = 400;
    var image = new Image();
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var url = window.URL || window.webkitURL;
    var src = url.createObjectURL(file);
    image.src = src;
    return image.onload = function(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(image.width > MAX_WIDTH){
        if(image.width > image.height){
            image.height = (image.height%image.width)*400;
        }else{
            image.height = (image.height/image.width)*400;
        }
        alert("image height " + image.height);
        image.width = 400; 
    }
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, image.width, image.height);
    url.revokeObjectURL(src);
    var fileRezized = encodeURIComponent(canvas.toDataURL("image/jpg"));
    return fileRezized; 
    };
}

我在这里想念什么？

我希望你们能帮助我。 我已经为此付出了很多工作和时间，而且似乎没有比这更多的了。

我想在浏览器中调整图像大小，因为否则某些人的上传速度可能会太慢，因为我的应用程序也可用于手机。

来自德国的greetins，马文

Answer 1

当您没有从浏览器返回dataURL时，通常是由于跨域安全冲突造成的。

用户图像可能与您的网页不在同一个域中，因此当将用户图像绘制到画布上时，您是在“污染”画布。 此.toDataURL将导致.toDataURL被禁止，从而导致上传到您服务器的DataURL为空。

一种解决方法

解决方法是，您可以“往返”用户的图像：

• 将用户图像上传到您的服务器，并将其保存在与网页相同的域中。

• 重新加载用户浏览器页面以及从您自己的域提供的图像。

另一个解决方法：FileReader

如果您的用户使用支持FileReader现代浏览器，则可以让用户以符合安全性的方式从其本地驱动器上载图像。

这是使用FileReader的示例代码：

 function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; if (!file.type.match(imageType)) { continue; } var img = document.createElement("img"); img.classList.add("obj"); img.file = file; var reader=new FileReader(); reader.onload=(function(aImg){ return function(e) { aImg.onload=function(){ var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.width=aImg.width; canvas.height=aImg.height; ctx.drawImage(aImg,0,0); document.body.appendChild(document.createElement('br')); document.body.appendChild(canvas); var u=canvas.toDataURL(); var textarea=document.createElement('textarea'); textarea.value=u; document.body.appendChild(textarea); } // e.target.result is a dataURL for the image aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } // end for } // end handleFiles // $("#fileElem").change(function(e){ handleFiles(this.files); }); 

 body{ background-color: ivory; } canvas{border:1px solid red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Example: load images to canvas while satisfying security requirements.</h4> <input type="file" id="fileElem" multiple accept="image/*"> <br> 

Answer 2

这行有错误：

var fileRezized = encodeURIComponent(canvas.toDataURL("image/jpg"));

画布中没有mime型image/ jpg 。 实际上，这实际上默认为image/png ，我想这可能会使接收方感到困惑。 只需将行更正为：

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

我不知道parse.com，但也可以尝试使用以下代码：

var parseFile = new Parse.File(name, {base64: resizedImage}, "image/jpeg");
//                                                                    ^^

测试用例

 var canvas = document.querySelector("canvas"), out = document.querySelector("div"); out.innerHTML = canvas.toDataURL("image/jpg") + "<br><br>"; // PNG out.innerHTML += canvas.toDataURL("image/jpeg"); // JPEG 

 <canvas width=1 height=1></canvas><div></div>