画布drawImage不接受宽度和高度

Question

Image is getting created in full original size, even last two arguments 150, 150 are height and width context.drawImage(img, 0, 0, 150, 150); in the code below:

function (file) { //uploaded files are always images
    var reader = new FileReader(); //FileReader for uploading files from local stroge.
    reader.onload = function () {
        var links = document.createElement('a'); //link when image is clicked 
        var img = document.createElement('img');
        img.src = reader.result; //src = url from uploaded file
        img.className = 'images'; //css -> .images { margin-top: 30px; padding: 30px; }
        img.onload = function () { //repaint image to 150 - 150 size with canvas, because setting width and height on image itself would just resize the image but I want to create new image with new size
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            context.drawImage(img, 0, 0, 150, 150) //draw image with canvas 
        }
        links.href = reader.result; // url from local storage needed  when image is clicked - 
        links.target = "_blank"; // open new blank page with original image
        links.appendChild(img); // image is appended to <a>
        document.body.appendChild(links); // <a> is appended to body, that body contains image thumbnail with a link linked to the image source
    }
    if (file) {
        reader.readAsDataURL(file); // read uploaded files url
    }
}

img.onload does not making any sense here. result is the same even when I remove it.

Answer 1

You are not drawing back the cropped image to your <img> tag... you will have to create two image Objects, let's call the first originalImage , and the second one croppedImage .

The one you will append to the document is croppedImage and originalImage will just stay in the cache.

When originalImage has loaded, you will paint it to a canvas, and then set croppedImage to the result of the canvas' toDataURL() method.

 var read = function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function() { var links = document.createElement('a'); // this will be the appended image var croppedImage = new Image(); // do your DOM stuff croppedImage.className = 'images'; links.href = reader.result; links.target = "_blank"; links.appendChild(croppedImage); document.body.appendChild(links); // create a buffer image object var originalImage = new Image(); // set its load handler originalImage.onload = function() { // create a canvas var canvas = document.createElement('canvas'); // set canvas width/height canvas.width = canvas.height = 150; var context = canvas.getContext('2d'); // draw the buffered image to the canvas at required dimension context.drawImage(originalImage, 0, 0, 150, 150); // set the appended to doc image's src to the result of the cropping operation croppedImage.src = canvas.toDataURL(); } originalImage.src = reader.result; } if (file) { reader.readAsDataURL(file); } }; upload.onchange = read; 

 .images { margin-top: 30px; padding: 30px; } 

 <input type="file" id="upload" /> 

You could also have used only a single image object, but this would have required to reset the onload event in the onload event, to avoid an infinite loop, which is a little bit less clear :

 var read = function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function() { var links = document.createElement('a'); var img = new Image(); img.className = 'images'; links.href = reader.result; links.target = "_blank"; links.appendChild(img); document.body.appendChild(links); img.onload = function() { //reset the onload event so it does fire in a loop img.onload = function(){return;}; var canvas = document.createElement('canvas'); canvas.width = canvas.height = 150; var context = canvas.getContext('2d'); context.drawImage(this, 0, 0, 150, 150); this.src = canvas.toDataURL(); } img.src = reader.result; } if (file) { reader.readAsDataURL(file); } }; upload.onchange = read; 

 .images { margin-top: 30px; padding: 30px; } 

 <input type="file" id="upload" /> 

Answer 2

var reader = new FileReader();
reader.onload = function () {
    var links = document.createElement('a');
    var img = new Image();
    img.src = reader.result;
    img.className = 'images';
    img.onload = function () {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.drawImage(this, 0, 0, 150, 150);
        this.src = canvas.toDataURL(); // convert the canvas back to the image
        links.appendChild(this); // append the updated image to the document
    }
    links.href = reader.result;
    links.target = "_blank";

    document.body.appendChild(links);
}
if (file) {
    reader.readAsDataURL(file); //reads the data as a URL
}