画布绘制图像不接受宽度和高度

Canvas drawImage is not accepting width and height

本文关键字：不接受 高度 图像 布绘制 绘制      更新时间：2023-09-26

图像正在以完整的原始大小创建，即使是最后两个参数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在这里没有任何意义。 即使我删除它，结果也是一样的。

您没有将裁剪后的图像拉回<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" />

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
}
相关文章：