Question

我使用以下代码将图像拖放到画布上。有人可以告诉我如何在画布上绘制吗？在此先感谢您。我的画布以前曾经是div，我曾经将img附加到该div上并且可以工作。但是现在我希望将其绘制到画布上。

function dropb(ev) {
  ev.preventDefault();
  const dt = ev.dataTransfer;
  const files = dt.files;

  handleFilesb(files);
}


function handleFilesb(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    if (!file.type.startsWith('image/')) {
      continue
    }

    const img = document.createElement("img");
    img.className = "my_image";
    img.setAttribute("width", "300px");
    img.setAttribute("height", "300px");

    img.classList.add("obj");
    img.file = file;

    document.getElementById("area_c"); // canvas
    var ctx = c.getContext("2d");

    ctx.drawImage(img, 10, 10); // this line is not working 

    const reader = new FileReader();
    reader.onload = (function(aImg) {
      return function(e) {
        aImg.src = e.target.result;
      };
    })(img);
    reader.readAsDataURL(file);
  }
}



             <div style="display:flex">
                           <canvas id ="area_c" style="width:300px;height:300px;border:3px solid black;z-index:1"  ondrop="dropb(event)"  ondragover="myfkb(event)"   >

                           </canvas>


                            <div  id ="area_c2" style="width:300px;height:300px;border:3px solid black;z-index:1"  >

                            </div>

                            <div >

                                <input type="button"   value="Crop" 
                             onclick="crop()">

                            </div>

                   </div>

Answer 1

ctx.drawImage(img)早于img.src ...无法绘制图像。

您需要等到它加载之后，这只会在FileReader onload事件触发后，甚至在img的{{1}}触发之后：

onload

但是这里不需要use a blob URL的FileReader：

img.onload = e => {
  ctx.drawImage(img, 10, 10);
};
const reader = new FileReader();
reader.onload = (function(aImg) {
  return function(e) {
    aImg.src = e.target.result;
  };
})(img);
reader.readAsDataURL(file);

img.onload = e => {
  ctx.drawImage(img, 10, 10);
};
img.src = URL.createObjetURL(file);

const c = document.getElementById("area_c");
c.ondragover = e => {
  e.preventDefault();
}
c.ondrop = dropb;
const ctx = c.getContext("2d");

function dropb(ev) {
  ev.preventDefault();
  const dt = ev.dataTransfer;
  const files = dt.files;

  handleFilesb(files);
}


function handleFilesb(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    if (!file.type.startsWith('image/')) {
      continue
    }

    const img = document.createElement("img");
    img.className = "my_image";
    img.setAttribute("width", "300px");
    img.setAttribute("height", "300px");

    img.classList.add("obj");
    img.file = file;
    img.onload = e => {
      ctx.drawImage(img, 10, 10);
    };
    img.src = URL.createObjectURL(file);
  }
}

canvas {
  border: 1px solid
}

如何在画布上绘制拖放的图像

1 个答案: