上传图片为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>