前面的准备的代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         canvas{
  9.             border: 1px solid #000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <canvas id="canvas" width="500" height="500"></canvas>
  15.     <script>
  16.         /**@type{HTMLCanvasElement}*/
  17.         const canvas = document.getElementById('canvas')
  18.         const ctx  = canvas.getContext('2d')
  19.         const img  = new Image()
  20.         img.src = './images/img_01.jpg'
  21.         img.onload = function(e){
  22.             // 下方代码全在此处添加
  23.         }
  24.     </script>
  25. </body>
  26. </html>

效果图
image.png

在canvas里画图

drawImage()
参数数量为 9
当为三参数时、
drawImage(图片对象, 图片起点x轴, 图片起点y轴,);

  1. ctx.drawImage(img,50,50)

效果如图
image.png
当为五个参数时
drawImage(图片对象, 图片起点x轴, 图片起点y轴, 图片宽度, 图片高度); 

  1. ctx.drawImage(img,50,50,200,200)

效果如图
image.png
当为九个参数时
drawImage(图片对象, 图片上x轴位置, 图片上y轴位置, 图片宽度, 图片高度, canvas的x轴, canvas的y轴, canvas里图片显示的宽度, canvas里图片显示的高度);

  1. ctx.drawImage(img,450,70,130,150,50,50,200,200)

效果图
image.png

导出图片

canvas.toDataURL()

  1. const imgSrc = canvas.toDataURL() //这个方法要注意：它是放在canvas身上的，并不是ctx身上！！！

控制台打印的imgSrc
image.png

像素操作

获取图片数据

getImageData(起点x,起点y,宽,高)

  1.             ctx.drawImage(img,50,50,200,200)
  2.             const imgInfo = ctx.getImageData(0,0,500,500)
  3.             console.log(imgInfo)

image.png
可以参考es6的类型化数组

将像素信息对象放回到canvas

  1. ctx.putImageData(修改后的img对象,50,50);

案例可以看类型化数组制作黑白图片