微信小程序画布canvas的使用以及案例图片加水印的处理

❝

本文说下微信小程序画布（canvas）的用法!

这里不得不说一下画布的文档真是一言难尽！

本文示例均为vue2环境下

❞

画布是什么

画布是一个标签，可以使用js去操作它，有很多API,可以实时生成图像。

就像现实中的画板一样，我们可以绘制不同的东西

经常用于生成海报、制作水印、绘制视频等

画布的使用

标签的使用

<!--> type是canvas的类型 <-->
<canvas :style="{'width':'500px','height':'500px'}" type="2d" id="myCanvas" ref="mycanvas"></canvas>

上述这样，我们就创建了一个canvas画布，canvas是有默认宽高的，标签默认宽度300px、高度150px

js操作画布

获取canvas节点

// 若当前文件是组件需加上 in(this) 
const query = wx.createSelectorQuery().in(this)
query.select('#myCanvas').fields({
    node: true,
    size: true
}).exec((res) => {
    const canvas = res[0].node
    // 画布对象
    const ctx = canvas.getContext('2d')
    // 分辨率
    const dpr = wx.getSystemInfoSync().pixelRatio
    ...
    // 操作ctx即可
})

看上去其实没什么难度，下面我们就实战一下给图片加水印

实战

选择本地图片，加上当前时间水印，上传服务器

html

<template>
   <!--> 选择图片 <-->
  <image class="icon" v-if="!img" :src="./camera.png'" @tap="chooseImg"></image>
  <!--> 显示水印图片 <-->
  <image class="img" v-else :src="img" mode="aspectFill"></image>
  <!--> 画布 <-->
  <!--> 宽高是动态的，根据图片来的 <-->
  <!--> 画布不需要显示在视野中 <-->
  <canvas style="position: absolute;left: -5000px;" :style="{'width':w,'height': h}" type="2d" id="myCanvas" ref="mycanvas"></canvas>
</template>

js

export default {
    data() {
        return {
            w: 0,
            h: 0,
            img: ""
        }
    },
    methods(){
        chooseImg(){
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['camera'],
                success: (res) => {
                    // 本地临时路径
                    let tempFilePaths = res.tempFilePaths; 
                    // 压缩图片
                    uni.compressImage({
                        src: tempFilePaths[0],
                        quality: 30,
                        width: '40%',
                        height: '40%',
                        success: res2 => {
                            // 获取图片信息
                            this.getImageInfo(res2.tempFilePath);
                        },
                        fail: () => {
                            uni.showToast({
                                title: "获取图片信息失败，请重新选择",
                                icon: "none"
                            })
                        }
                    })
                },
            })
        },
        //获取图片信息
        getImageInfo(e) {
            uni.getImageInfo({
                src: e,
                success: (res) => {
                    this.w = res.width / 2 + 'px';
                    this.h = res.height / 2 + 'px';
                    uni.showLoading({
                        mask: true
                    })
                    setTimeout(() => {
                        // 添加水印
                        // 延迟上面给画布调整了宽高
                        this.canvasWather(res)
                    }, 600)
                },
                fail: () => {
                    uni.showToast({
                        title: "获取图片信息失败，请重新选择",
                        icon: "none"
                    })
                }
            })
        },
        canvasWather(res) {
            uni.showLoading({
                mask: true,
                title: "生成图片中",
            })
            // 当前时间 (年月日，时分)
            const now_time = moment().format("YYYY-MM-DD HH:mm")
            
            const query = wx.createSelectorQuery().in(this)
            query.select('#myCanvas').fields({
                node: true,
                size: true
            }).exec((_res) => {
                const canvas = _res[0].node
                const ctx = canvas.getContext('2d')
                const dpr = wx.getSystemInfoSync().pixelRatio
                canvas.width = _res[0].width * dpr
                canvas.height = _res[0].height * dpr
                //初始化画布
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                // 创建image
                let image = canvas.createImage();
                image.src = res.path;
                // 图片加载完成
                image.onload = () => {
                    // 绘制图片
                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                    // 字体大小
                    ctx.font = "60px"
                    // 字体颜色
                    ctx.fillStyle = '#ffffff';
                    // 绘制文本
                    ctx.fillText(now_time, 20, canvas.height - 40)
                    // 导出图片
                    wx.canvasToTempFilePath({
                        canvas,
                        fileType:"jpg",
                        quality:0.5,
                        success: async (res) => {
                            uni.showLoading({
                                mask: true,
                                title: "上传图片中",
                            })
                            // 上传图片 这里省略
                            this.img = await imgUpload(res.tempFilePath);
           
                            setTimeout(() => {
                                // 让图片先加载出来,在关闭
                                uni.hideLoading()
                            }, 600)
                        },
                        fail: (err) => {
          
                            uni.showToast({
                                title: "图片上传失败，请重新上传",
                                icon: "none"
                            })
                        }
                    })
                }
        }
    }
}