canvas 截图

最新推荐文章于 2024-08-13 09:34:30 发布

i'm_zhangting

最新推荐文章于 2024-08-13 09:34:30 发布

阅读量287

点赞数

分类专栏： mini case

本文链接：https://blog.csdn.net/weixin_42549581/article/details/112821598

版权

mini case 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CanvasRenderingContext2D.drawImage() 方法提供了多种方式在Canvas上绘制图像。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
    }
    canvas, img {
      vertical-align: top;
      
    }
    canvas {
      box-shadow:  0 0 0 1px #ccc;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <img src="https://imzhangting.github.io/avatar.png" id="source">
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var image = document.getElementById('source');
    image.addEventListener('load',function(){
      canvas.width = image.width;
      canvas.height = image.height; 
      // ctx.drawImage(image, 80, 20, 240, 270, 80, 20, 240, 270);
      ctx.drawImage(image, 80, 20, 240, 270, 0, 0, 120, 120/(240/270));   
      // ctx.drawImage(源图片, 开始截取位置X轴, 开始截取位置Y轴, 结束截取位置X轴（相对于开始位置）, 结束截取位置Y轴（相对于开始位置）, 目标开始位置X轴, 目标开始位置Y轴, 目标结束位置X轴,目标结束位置Y轴 120/(240/270));
    })
  </script>
</body>
</html>