Question

我有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

Answer 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 ：目标画布中要放置源image左上角的x轴坐标。

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

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>

使用toDataURL在画布上绘制图像

1 个答案: