Question

我正在学习使用画布绘制图像并在此示例中遇到问题：

＆＃13;

let img = new Image();
img.src = 'https://image.freepik.com/free-photo/hrc-siberian-tiger-2-jpg_21253111.jpg';

let a = function () {
    let c1 = document.getElementById('c1'),
        c2 = document.getElementById('c2');

    c1.width = c2.width = 150;
    c1.height = c2.width = 150;

    c1.getContext('2d').drawImage(img, 0, 0, 150, 150);
    c2.getContext('2d').drawImage(img, 0, 0, 150, 150);
};

let b = function () {
    let c2 = document.getElementById('c2');
    
    c2.width = 100;
    c2.height = 100;
    
    c2.getContext('2d').drawImage(c2, 0, 0, 100, 100);
};

let c = function () {
    let c1 = document.getElementById('c1'),
        c3 = document.getElementById('c3');
        
    c3.width = 100;
    c3.height = 100;
    
    c3.getContext('2d').drawImage(c1, 0, 0, 100, 100);
};

a();
b();
c();

＆＃13;

<div>
  <canvas id="c1"></canvas>
</div>

<div>
  <canvas id="c2"></canvas>
</div>

<div>
  <canvas id="c3"></canvas>
</div>

＆＃13;

内部b功能。我想用另一个尺寸（从150到100改变宽度和高度）重新绘制（调整大小）自己的图像。但它看起来似乎无法实现。

然后，我尝试制作另一个功能（c）。在此功能中，我使用了画布c1的图像来重新绘制画布c3的图像。没关系。

所以，我的问题是：画布不能使用自己的图像为自己绘制图像吗？（或者我可能做错了什么）

Answer 1

编辑：首先，我认为在HTMLCanvasElement调用中使用drawImage()是一种不正确的参数类型。这是错误的，这是一个有效的论点。实际问题是代码没有等待图像加载。

您需要了解如何获取第一个画布的初始图像数据。我不希望它工作，因为您可能在实际加载之前从img绘制图像数据。您需要将回调附加到img以等待它完成加载图像，然后然后在画布上绘制该图像。

考虑下面的示例，其中包括加载图像的异步方式，如何在另一个画布中绘制一个画布，以及如何绘制文本（仅用于显示画布之间的差异）。

＆＃13;

function loadImage(path) {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.addEventListener("load", () => {
      resolve(img);
    });
    img.addEventListener("error", (err) => {
      reject(err);
    });
    img.src = path;
  });
}


loadImage("https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg")
  .then((img) => {
    let c1 = document.getElementById("c1"),
      c2 = document.getElementById("c2"),
      c1Ctx = c1.getContext("2d"),
      c2Ctx = c2.getContext("2d");
    c1Ctx.drawImage(img, 0, 0, 150, 150);
    c1Ctx.strokeText("I'm drawing on canvas 1", 25, 25);
    c2Ctx.drawImage(c1, 25, 25, 100, 100);
    c2Ctx.strokeText("I'm drawing on canvas 2", 25, 25);
  })
  .catch(console.error);

＆＃13;

<canvas id="c1" width="150" height="150"></canvas>
<canvas id="c2" width="150" height="150"></canvas>

＆＃13;

由于您希望能够从画布中提取数据，因此可能遇到的另一件事是CORS问题。我明确指出这一点，因为您尝试在画布上绘制的图像来自不同的域（在您的示例中为image.freepik.com）。每当您将图像数据从另一个域绘制到画布上时，该画布就会受到污染，您无法再使用画布＆＃39; toBlob()，toDataURL()或getImageData()方法。请参阅：MDN: CORS enabled image。

我可以用自己的图像重新绘制画布图像吗？

1 个答案: