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

Question

I have following Problem. I´m using a canvas to resize pictures a user uploaded to my webapp. Then I retrieve the picture from the canvas as a base64 encoded string and try to upload it to the parse server. Since parse supports base64 I thought it could work.

When i upload the images however, there is no image but instead this message for every image file i upload:

{"_ContentType":"image/jpg","_ApplicationId":"MY APPLICATION ID","_JavaScriptKey":"MY JAVASCRIPT KEY","_ClientVersion":"js1.3.5","_InstallationId":"THE INSTALLATION ID","_SessionToken":"THE SESSION TOKEN OF THE CURRENT USER"}

I can retrieve the files, but what i get is no image.

Here is my code for uploading the pictures:

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

                }

Here is my code for resizing the pictures:

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

What am i missing here?

I hope you guys could help me. I put a lot of work and time in this already and I seem to not get any further than this.

I want to resize the image in the browser because otherwise upload speed might be too slow for some people, as my application will be available for mobile phones as well.

greetins from germany, marvin

Answer 1

When you get no dataURL back from the browser, it's often caused by a cross-domain security violation.

The users image likely does not originate on the same domain as your web page, so when you drawImage the users image to the canvas, you are "tainting" the canvas. This tainting will cause .toDataURL to be disallowed which will in turn cause the DataURL uploaded to your server to be empty.

One workaround

As a workaround, you can "round-trip" the user's image:

• upload the users image to your server and save it in the same domain as your web pages.

• reload the users browser page along with their image served from your own domain.

Another workaround: FileReader

If your users have modern browsers that support FileReader then you can let your users upload images from their local drives in a security compliant way.

Here's example code using 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

There is an error in this line:

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

There is no mime-type image/ in canvas. This would actually default to image/png instead which I guess could confuse the receiver. Just correct the line to:

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

I don't know parse.com, but also try doing this with this line:

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

Test case

 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>