Question

图片是以原始尺寸创建的，即使最后两个参数150, 150的高度和宽度context.drawImage(img, 0, 0, 150, 150);位于以下代码中：

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在这里没有任何意义。即使我删除它，结果也是一样的。

Answer 1

您没有将裁剪后的图片缩回到<img>标记...您必须创建两个图像对象，让我们调用第一个originalImage，然后调用第二个croppedImage

您要添加到文档中的文件是croppedImage，originalImage将保留在缓存中。

加载originalImage后，您将其绘制到画布上，然后将croppedImage设置为画布“toDataURL()方法的结果。

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" />

您也可能只使用过一个图像对象，但这需要重置onload事件中的onload事件，以避免无限循环，这有点不太清楚：

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
}

Canvas drawImage不接受宽度和高度

2 个答案: