canvas学习笔记（五）----图像

最新推荐文章于 2024-04-11 16:07:30 发布

??or??

最新推荐文章于 2024-04-11 16:07:30 发布

阅读量375

点赞数

分类专栏： canvas 前端文章标签： canvas

本文链接：https://blog.youkuaiyun.com/zhangyr_student/article/details/102969293

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

canvas

8 篇文章

订阅专栏

这篇canvas学习笔记详细介绍了如何使用HTMLImageElement、HTMLVideoElement、HTMLCanvasElement和ImageBitmap作为图像源，并讲解了如何处理跨域图片、使用其他canvas元素，以及通过data:url方式嵌入图像。重点讨论了drawImage方法用于图片绘制、缩放和切片的操作，以及如何使用toDataURL()导出和下载canvas图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片源：统一由CanvasImageSource类型引用

1.HTMLImageElement ：由Image（）函数构造出来，或者任何的<img>元素

2.HTMLVideoElement：用一个HTML的<video>元素作为图片源，可以从视频中抓取当前帧作为一个图像

3.HTMLCanvasElement：可以使用另一个<canvas>元素作为图片源

4.ImageBitmap：这是一个高性能的位图，可以低延迟地绘制，可以从上述的所有源以及其它几种源中生成

相同页面内图片引用

1.document.images集合

2.document.getElementByTagName()

3.document.getElementById()

使用其他域名下的图片

1.在HTMLImageElement上使用crossOrigin属性

使用其他canvas元素

1.document.getElementByTagName()

2.document.getElementById()

通过data:url方式嵌入图像

img.src="xxxxx"

步骤：

1.构建HTMLImageElement对象

var img = new Image();

img.src = 'myImage.png'

2.用load事件保证不会在加载完毕之前使用这个图片

使用视频帧

function getMyVide(){

var canvas = document.getElementById('canvas');

if(canvas.getContext){

var ctx = canvas.getContext('2d');

return document.getElementById('myvideo');

}

}

绘制图片

drawImage(image,x,y) image是image或canvas对象，x和y是其在目标canvas里的起始坐标。

缩放scaling

drawImage（image,x,y,width,height）width和height控制向canvas画入时应该缩放的大小

切片

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

图片导出/下载

toDataURL() 对canvas图片数据进行输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day8-1</title>
  <style type="text/css">
    *{margin:0;padding:0}
    body{
      margin:30px;
    }
    canvas{
      border:1px solid #a4e2f9;
      float:left;
    }
    img{
      float:left;
      margin:0 1px;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300">
  </canvas>
  <img id="showImg" src="" alt=""/>
  <a id="downloadBtn" href="" download="testImg">下载</a>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext('2d');

    ctx.fillStyle = "#fd0";
    ctx.fillRect(0,0,150,37.5);
    ctx.fillStyle = "#6c0";
    ctx.fillRect(0,37,150,37.5);
    ctx.fillStyle = "#09f";
    ctx.fillRect(0,75,150,37.5);
    ctx.fillStyle = "#f30";
    ctx.fillRect(0,112,150,37.5);
    ctx.fillStyle = "#fff"
    for(var i=0;i<10;i++){
      ctx.fillStyle = "rgba(255,255,255,"+(i+1)/10+")";
      for(var j=0;j<4;j++){
        ctx.fillRect(5+i*14, 5+j*37.5, 14, 27.5)
      }
    }

    document.getElementById("showImg").setAttribute("src",c.toDataURL('png'));
    document.getElementById("downloadBtn").setAttribute("href",c.toDataURL('png'));
  </script>
</body>
</html>