使用 toDataURL 在画布上绘制图像答案

【问题标题】：Drawing image on a canvas with toDataURL使用 toDataURL 在画布上绘制图像
【发布时间】：2019-10-18 07:07:03
【问题描述】：

我需要在一个新的画布上绘制 toDataURL，它的大小为 300 x 300。图像不会延伸到提供的全部空间。我希望它完全伸展在画布上。即使附加到 div 也可以，我试过但没有成功，它也没有完全占据空间。原始图像无论如何都小于 300 和 300。此外，当我删除警报代码时，它也不起作用全部。

   var c4 =  document.getElementById("area_c4");
   var ctx4 = c4.getContext("2d");

   var dataURL = c2.toDataURL();

   var myImg = new Image;

   myImg.src = dataURL;

   myImg.width = c4.width; // c4.width is 300px
   myImg.height = c4.height; //c4.height is 300px
   alert(c4.width);  // when I remove this alert code doesn't work
   ctx4.drawImage(myImg,0, 0 ,c4.width,c4.height); // the image doesnt strtch over 300px 300px region. It is displayed in its original size

【问题讨论】：

嗨，你能告诉我应该如何等待它加载
它不工作
当我删除此警报代码时不起作用。您可能需要先等待图像加载：var myImg = new Image; myImg.src = dataURL; myImg.onload = function() {.../*everything else goes here*/...}

标签： javascript jquery canvas html5-canvas

【解决方案1】：

要调整图像大小，您必须使用以下版本的CanvasRenderingContext2D.drawImage()

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

image：要绘制到上下文中的元素。

sx：源image子矩形左上角的x轴坐标绘制到目标上下文中。

sy：源image的子矩形左上角的y轴坐标，用于绘制到目标上下文中。

sWidth：源image 绘制到目标上下文的子矩形的宽度。如果未指定，则使用从sx 和sy 指定的坐标到图像右下角的整个矩形。

sHeight：源image的子矩形的高度以绘制到目标上下文中。

dx：目标画布中的 x 轴坐标，用于放置源 image 的左上角。

dy：目标画布中的 y 轴坐标，用于放置源 image 的左上角。

dWidth：在目标画布中绘制image 的宽度。这允许缩放绘制的图像。如果未指定，则图像在绘制时不会按宽度缩放。

dHeight：在目标画布中绘制image 的高度。这允许缩放绘制的图像。如果未指定，则图像在绘制时不会按高度缩放。

您还必须等待图像处理数据 uri，然后才能将其绘制到画布上。为此，您可以使用load 事件：

myImg.onload = function() {
    // here you can draw the image on the canvas
}

示例中的输入图像为 10x10 像素宽，将被拉伸到 300x300 像素。

const c4 = document.getElementById("area_c4");
var ctx4 = c4.getContext("2d");

var dataURL = "data:image/bmp;base64,Qk26AQAAAAAAAHoAAABsAAAACgAAAAoAAAABABgAAAAAAEABAAATCwAAEwsAAAAAAAAAAAAAQkdScwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAA==";

var myImg = new Image();
// wait until the data uri has been processed
myImg.onload = function() {
  // draw the image and scale it to the size of the canvas
  ctx4.drawImage(this,
                 0, 0, this.width, this.height, /* source */
                 0, 0, c4.width, c4.height);    /* destination */
}
myImg.src = dataURL;

/* not necessary for the solution, just to show the size of the input image */
document.getElementById("showcase").src = dataURL;

canvas {
  width: 300px;
  height: 300px;
}

<p>
  <!-- not necessary for the solution, just to show the size of the input image -->
  Input:<br /><img id="showcase" />
</p>
<p>
  Output:<br /><canvas id="area_c4" width="300px" height="300px"></canvas>
</p>

【讨论】：