上傳圖片爲base64要解析的字符串

Question

我有以下問題。 我正在使用畫布調整用戶上傳到我的webapp的圖片大小。 然後，我從畫布上檢索圖片作爲base64編碼的字符串，並嘗試將其上傳到解析服務器。 因爲解析支持base64我認爲它可以工作。

但是當我上傳的圖片，沒有圖像，而是這條消息對每個圖像文件我上傳：

{ 「_ContentType」： 「圖像/ JPG」， 「_的applicationID」：」我的申請 ID「，」_ JavaScriptKey「：」我的JAVAZCRIPT KEY「，」_ ClientVersion「：」js1.3.5「，」_ InstallationId「：」安裝 ID「，」_ SessionToken「：」當前用戶的會話「}

我可以檢索文件，b我得到的是沒有圖像。

這是我上傳的圖片代碼：

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

缺少什麼我在這裏？

我希望你們能幫助我。我已經在這方面投入了大量的工作和時間，而且似乎沒有比這更進一步。

我想調整瀏覽器中的圖像大小，否則上傳速度可能對某些人來說太慢了，因爲我的應用程序也可用於手機。來自德國，馬文

Answer 1

當你沒有dataURL從瀏覽器的後退

greetins，它往往是由跨域安全違規造成的。

用戶圖像可能不是源於與您的網頁相同的域，因此當您將用戶圖像繪製到畫布上時，會「污染」畫布。這種污點會導致.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>