Question

我一直试图在页面上拍摄一张图片，并将其来源更改为通过FileReader api加载的其他图片的网址。结果是一个空白图像，白色，虽然尺寸看起来没问题。 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");
}

更新

Demo

虽然它应该在本地加载，但不确定它是否可以作为小提琴。

Answer 1

您的代码充满了错误，这是其无效的原因之一。

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

将image重命名为image.src

您的文件阅读器加载图像文件，然后将var fr = new FileReader(); fr.onload = function(e) { image.src = this.result; resize(); }; fr.readAsDataURL(files[0]);设置为加载的dataURL。然后调用resize，但图像没有加载，设置src开始加载。

image.src

调整大小需要在image.onload中，但您将resize设置为用于缩小图像大小的画布内容。这将再次触发image.onload事件，这将调用resize事件。

所以要修复从文件阅读器onload中删除image并将其放在加载函数的target（aka // 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 }）的末尾。但在调用resize之前，请从图像中删除onload事件，以便再次停止它。

您的代码应该更像

{{1}}

调整画布大小

1 个答案: