將圖片上傳為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>