测试用例

Question

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

当我上传图片时，没有图片，而是我上传的每个图片文件都显示此消息：

{“_ ContentType”：“image / jpg”，“_ ApplicationId”：“我的应用程序 ID“，”_ JavaScriptKey“：”我的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; 
    };
}

我在这里缺少什么？

我希望你们能帮助我。我已经投入了大量的工作和时间，而且我似乎没有比这更进一步。

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

来自德国的问候，marvin

Answer 1

如果您没有从浏览器返回dataURL，则通常是由跨域安全违规造成的。

用户图像可能不是源自与您的网页相同的域，因此当您将用户图像绘制到画布上时，您正在“污染”画布。此污点将导致.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-type image/jpg。这实际上默认为image/png，我想这可能会混淆接收器。只需将该行更正为：

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

我不知道parse.com，但也尝试用这一行：

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

测试用例

＆＃13;

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

＆＃13;

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

＆＃13;

将图片作为base64字符串上传到Parse

2 个答案:

测试用例