快应用使用canvas替换背景色

所使用到的知识点：

第一：canvas绘制矩形

第二：canvas画图

第三：canvas矩形填色，清除canvas

第四;canvas线性渐变

第五：Uint8ClampedArray---https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray#%E8%AF%AD%E6%B3%95

 

 

   const alphaPhoto = new Image();

            //原始的
            alphaPhoto.src = `data:image/jpeg;base64,${res.alphy}`;   //阿尔法蒙黑白照
            console.log('图片加载完成', this.width, this.height)
            //原始的
            alphaPhoto.onload = () => {

                gradientCtx.drawImage(alphaPhoto, 0, 0, this.width, this.height);

                this.alphaImgData1 = gradientCtx.getImageData(0, 0, this.width, this.height);
                console.log(`alphaImgData加载完成`)
                const originPhoto = new Image();
                originPhoto.src = `data:image/jpeg;base64,${res.src}`;   //抠出的原图头像
                originPhoto.onload = () => {

                    gradientCtx.drawImage(originPhoto, 0, 0, this.width, this.height);

                    this.originImgData1 = gradientCtx.getImageData(0, 0, this.width, this.height); //原图的data

                    console.log(`originPhoto加载成功`);
                    //给抠出的图片加上背景

                    this.changeGradient(gradientCtx, item.first, item.second)


                }
                originPhoto.onerror = () => {
                    this.load = false;
                    console.log('originPhoto加载失败');
                }

            }
            alphaPhoto.onerror = () => {
                this.load = false;
                console.log('alphaPhoto加载失败');
            }

 

 

canvas 的颜色支持各种 CSS 色彩值。

// 以下值均为 '红色'
ctx.fillStyle = 'red' //色彩名称
ctx.fillStyle = '#ff0000' //十六进制色值
ctx.fillStyle = 'rgb(255,0,0)' //rgb色值
ctx.fillStyle = 'rgba(255,0,0,1)' //rgba色值

一：

渐变色

除了使用纯色，还支持使用渐变色。先创建渐变色对象，并将渐变色对象作为样式进行绘图，就能绘制出渐变色的图形。

渐变色对象可以使用 createLinearGradient 创建线性渐变，然后使用 addColorStop 上色。

这里要注意的是，渐变色对象的坐标尺寸都是相对画布的。应用了渐变色的图形实际起到的是类似“蒙版”的效果。

//填充绘制一个矩形，填充颜色为深红到深蓝的线性渐变色
const linGrad1 = ctx.createLinearGradient(0, 0, 300, 300)
linGrad1.addColorStop(0, 'rgb(200, 0, 0)')
linGrad1.addColorStop(1, 'rgb(0, 0, 200)')
ctx.fillStyle = linGrad1
ctx.fillRect(20, 20, 200, 200)

 

<template>
  <div class="doc-page">
    <div class="content">
      <canvas class="new-canvas" id="new-canvas"></canvas>
      <image src="../Common/imgs/beauty.jpg" style="width: 500px; height: 600px;"></image>
    </div>
  </div>
</template>

<style>
.content {
  flex-direction: column;
  align-items: center;

}
.new-canvas {
  width: 500px;
  height: 600px;
  background-color: blue;
}
</style>

<script>
export default {
  private: {
    drawComplete: false
  },
  onInit() {
    this.$page.setTitleBar({
      text: 'canvas简单绘制'
    })
  },
  onShow() {
    if (!this.drawComplete) {
      this.drawCanvas()
    }
  },
  drawCanvas() {
    const canvas = this.$element('new-canvas') //获取 canvas 组件
    const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
    const img = new Image() //新建图像对象

    img.src = '../Common/imgs/beauty.jpg' //加载本地图片


    //加载成功的回调
    img.onload = () => {
      // 将图片原封不动的绘制在画布上，是最基本的绘制方法
      ctx.drawImage(img, 0, 0)
      console.log('图片加载完成')
    }

    //加载失败的回调
    img.onerror = () => {
      console.log('图片加载失败')
    }
    this.drawComplete = true
  }
}
</script>

 

接口需满足图片在不同手机分辨率下经过canvas的一系列方法处理进行替换背景色后，照片显示在屏幕或保存在本地不会出现失真、模糊等降低画质的情况。

目前抠图过程中主要使用到的方法：
1.drawImage() 方法在画布上绘制图像
2.getImageData() 复制画布上指定矩形的像素数据（有损）
3.imageData.data修改像素----https://www.runoob.com/jsref/prop-canvas-imagedata-data.html    https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData/ImageData   https://www.qvdv.com/tools/qvdv-img2base64.html
4.putImageData() 将图像数据放回画布（有损）
5. toTempFilePath(Object object)将组件当前的实际绘制区域的内容导出生成图片，保存到临时文件夹
6. media.saveToPhotosAlbum()照片保存到本地