我想上传在Java文件的FileReader中已调整大小的图像（相机等）

Question

I was able to get images from the camera or file explorer.

I was loading to the canvas while resizing the image.

I want to upload this image that has been resized, but the security problem occurs.

reader.onload = function (event)
{
    image.onload = function()
    {
        // resize ...
        // canvas handling ...

        var context = canvas.getContext("2d");

        context.drawImage(image, x, y, size, size, 0, 0, resize, resize);

        var uri  = canvas.toDataURL();
        var data = uri.replace(/^data:image\/(png|jpg);base64,/, "");

        $(input_file_selector).val(data);  // << security error
    }

    //...
};

file load or camera capture -> paste to canvas and resize -> resized image file upload ...

This process is impossible?

Answer 1

Sure, you can use the resizing version of context.drawImage as you've done--your code should resize the image assuming your drawImage parameters are valid).

But...The security error are likely a result of attempting to draw a cross-domain image onto canvas.

Cross-domain draws will taint the canvas and prevent canvas.toDataURL from occurring. You can upload a cross-domain image if it's headers allow anonymous access and you also specify in javascript that the image allows anonymous access. You can read about enabling cross-domain transfers here: http://enable-cors.org/

Here is an example using FileReader to let the user drag an image into a dropzone. The image will be scaled 2X and added as a new image on the webpage.

 // dropzone event handlers var dropzone; dropzone = document.getElementById("dropzone"); dropzone.addEventListener("dragenter", dragenter, false); dropzone.addEventListener("dragover", dragover, false); dropzone.addEventListener("drop", drop, false); // function dragenter(e) { e.stopPropagation(); e.preventDefault(); } // function dragover(e) { e.stopPropagation(); e.preventDefault(); } // function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } // function handleFiles(files) { for (var i = 0; i < files.length; i++) { // get the next file that the user selected var file = files[i]; var imageType = /image.*/; // don't try to process non-images if (!file.type.match(imageType)) { continue; } // a seed img element for the FileReader var img = document.createElement("img"); img.classList.add("obj"); img.file = file; // get an image file from the user // this uses drag/drop, but you could substitute file-browsing var reader=new FileReader(); reader.onload=(function(aImg){ return function(e) { aImg.onload=function(){ // draw the aImg onto the canvas var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.width=aImg.width*2; canvas.height=aImg.height*2; ctx.drawImage(aImg,0,0,aImg.width,aImg.height,0,0,canvas.width,canvas.height); // make the jpeg image var newImg=new Image(); newImg.onload=function(){ newImg.id="newest"; document.body.appendChild(newImg); } newImg.src=canvas.toDataURL('image/jpeg'); } // e.target.result is a dataURL for the image aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } // end for } // end handleFiles 

 body{ background-color: ivory; } canvas{border:1px solid red;} #dropzone{border:1px solid blue; width:300px;height:300px;} 

 <h4>Drag an image from desktop to blue dropzone.</h4> <div id="dropzone"></div> <div id="preview"></div>