调整画布中图像的大小

Question

我一直在尝试获取页面上已经存在的图像，并将其源更改为通过FileReader api加载的其他图像的URL。 结果是空白图像，白色，尽管尺寸看起来还可以。 ShowImage（）放置一个用于裁剪的框-另一个div，然后加载文件，然后调用resize（）。 如何获得实际显示的图像？ 任何想法将不胜感激。

function showImage(files) {
    var buttons = document.querySelectorAll("button");
    buttons[buttons.length - 1].style.display = "none";
    var target = document.querySelectorAll("img");
    target = target[target.length - 1];
    target.className = "";
    target.onload = function() {
        var rect = target.getBoundingClientRect();
        var position = {
          top: rect.top + window.pageYOffset,
          left: rect.left + window.pageXOffset
      }; // center cropping box in image
        box.style.top = (position.top + rect.height/2 - parseInt(box.style.height)/2) + "px";
        box.style.left = (position.left + rect.width/2 - parseInt(box.style.width)/2) + "px";
    }
    var fr = new FileReader();
    fr.onload = function(e) {
         target.src = this.result;
         resize(); 
     };
    fr.readAsDataURL(files[0]);
}

function resize() {
    var orgImg = document.querySelectorAll("img");
    orgImg = orgImg[orgImg.length - 1];
    var canvas1 = document.createElement("canvas");
    canvas1.width = orgImg.width/2;
    canvas1.height = orgImg.height/2;
    var ctx1 = canvas1.getContext("2d");
    ctx1.drawImage(orgImg, 0, 0, orgImg.width/2, orgImg.height/2);
    orgImg.src = canvas1.toDataURL("image/png");
}

更新

演示

尽管应该在本地加载，但是不确定它是否可以用作小提琴。

Answer 1

您的代码中充满了错误，这是它不起作用的原因之一。

纠正错误后，您对图像加载和文件加载事件的响应方式存在逻辑缺陷。

将target重命名为image

您的文件阅读器将加载图像文件，然后将image.src设置为已加载的dataURL。 然后，您调用resize，但是图像尚未加载，设置src开始加载。

var fr = new FileReader();
fr.onload = function(e) {
     image.src = this.result;
     resize(); 
 };
fr.readAsDataURL(files[0]);

调整大小必须在image.onload但你的设置image.src您用来缩小图像尺寸的画布内容。 这将再次触发image.onload事件，该事件将调用resize事件。

因此，要解决此问题，请在文件读取器onload上移除resize ，然后将其放在加载功能的image末尾（即target ）。 但是在调用该调整大小之前，请从映像中删除onload事件，以使其再次停止触发。

您的代码应该看起来更像

// refactored target to image
src.addEventListener("change",showImage); // Add event listener here not in HTML
function showImage() {
    src.style.display = "none"; // hide the input
    const image = document.querySelectorAll("img").pop();  // get the image from the page
    image.onload = function() {  // set the onload event 
        const rect = this.getBoundingClientRect();
        const pos = {
          top: rect.top + pageYOffset,
          left: rect.left + pageXOffset
        }; 
        const boxSize = box.getBoundingClientRect();
        box.style.top = ((pos.top + rect.height / 2 - boxSize.height / 2) | 0) + "px";
        box.style.left = ((pos.left + rect.width / 2 - boxSize.width / 2) | 0) + "px";
        this.onload = undefined; // remove onload event to stop it firing again
        resize(this);
    }
    const fr = new FileReader();
    fr.onload = function(e) { image.src = this.result }
    fr.readAsDataURL(this.files[0]);
}

function resize(image) {
    const canvas = document.createElement("canvas");
    const w = canvas.width = (image.width / 2) | 0;
    const h = canvas.height = (image.height / 2) | 0;
    canvas.getContext("2d").drawImage(image, 0, 0, w, h);
    image.src = canvas.toDataURL();  // "image/png" is the default so not needed as argument
}