使用 JS 在 Canvas 内设置图像大小

Question

大家好，
所以有一个带有照片编辑工具的 HTML Canvas。看起来像这样 -

<div class="col-md-12 col-lg-8 col-sm-12" id="mainDiv">
  <div 
    id="canvas1Div" 
    data-toggle="tooltip" 
    title="" 
    data-original-title="Image Processing Area"
  >
    <canvas id="canvas1" width="564" height="488"> </canvas>
  </div>
  <div
    id="canvasDiv" 
    data-toggle="tooltip" 
    data-original-title="" 
    title="" 
    style="border: 0px;"
  >
    <canvas id="canvas3" width="188" height="240"> </canvas>
    <canvas
      id="canvas4" 
      width="188" 
      height="240" 
      style="width: 188px; height: 240px;"
    > </canvas>
  </div>
</div>

那么我选择的照片是否可以通过在浏览器的控制台上执行来适应画布的中心部分（彩色边框），这可能是因为 JavaScript 吗？
谢谢。

Answer 1

尝试使用这种方法在画布上添加图像：

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

• sx, sy, sWidth & sHeight 用于裁剪图像
• dx、dy、dWidth & dHeight 用于在画布内定位图像。这些参数应该与您想要的矩形位置和大小相关。

要了解有关此结帐的更多信息，请点击此链接：CanvasRenderingContext2D.drawImage()

编辑

使用原生 Image 类从您的电脑导入任何图像：

const image = new Image(width, height);

// render image on canvas when it‘s done loading
image.onload = () => ctx.drawImage(image, …);

// load the image
image.src = './path/to/image.png';