借助canvas根据drawImage中的img获取对应背景色

本文介绍了如何利用canvas的drawImage方法结合getImageData来获取图片中特定区域的背景颜色，涉及canvas的2d渲染环境及像素数据操作。

摘要由CSDN通过智能技术生成

1.基础概念：

canvas.getContext（type）

type：'2d'//建立一个二维的环境对象

'3d'//建立一个二维的环境对象

drawImage（img,sx,sy,swidth,sheight,x,y,width,height)

参数注解
img	图片对象
sx	开始裁剪的x轴坐标
sy	开始裁剪的y轴坐标
swidth	裁剪的宽度
sheight	裁剪的高度
x	图片放置的x轴坐标
y	图片放置的y轴坐标
width	展示图片宽度
height	展示图片高度

getImageData（x,y,width,height)//复制画布上指定矩形的像素数据

参数注解
x	像素数据x轴坐标
y	像素数据y轴坐标
width	像素数据矩形宽度
height	像素数据矩形高度

<html>

    <div style="display:none">
      <img ref="conf0" src="../assets/bg.png">
    </div>
    <canvas ref="canvas" style="width:100%;height:500px"></canvas>

</html>

<script>
      let myCanvas = this.$refs.canvas
      var ctx = myCanvas.getContext('2d')

      // 在Canvas画布 添加图片
      var img = this.$refs.conf0
      img.onload = () => {
        ctx.drawImage(img, 0, 0, 500, 100)
        const imageData = ctx.getImageData(30, 50, 1, 1).data
        console.log(imageData)//[56, 144, 244, 255]
      }
</script>