小程序canvas绘制base64,小程序canvas绘制海报图

关于小程序canvas的问题, 有一个drawImage()方法

• 在这个方法中, 微信小程序不支持网络图片绘制
• 支付宝小程序不支持本地图片绘制

小程序canvas组件问题

• 支付宝小程序最好使用canvas原生组件, 写上id width height 即可
• uni-app则为行内样式才生效, id也得改为canvas-id

下面则为uni-app的小程序, 代码内有相关注释

<template>
      <image :src="photoImg"></image>
      <canvas :canvas-id="canvas"  style="width: 600rpx; height: 600rpx"></canvas>
</template>

<script>
export default {
    data() {
        canvas: 'canvas',
        photoImg: 'https://xxx/xxx.png' // 背景图
    },
    computed: {
        rpx() {
            return uni.getSystemInfoSync().windowWidth / 720;
        }
    },
    onload() {
        wx.getImageInfo({
            src: this.photoImg,
            success: res => {
                this.photoImg = res.path
            }
        }) 
        // 拿二维码
        this.qrCode = 'xxxx'; // 这里不写接口，因为是后台返回的base64格式
    },
    methods: {
        getImage() {
            var that = this;
            var ctx = wx.createCanvasContext('canvas', that);
            // 开始处理二维码
            // 获取全局唯一的文件管理器
            var fsm =  wx.getFileSystemManager();
            var filePath = wx.env.USER_DATA_PATH + '/share_img.png';
            // 将 Base64 字符串转成 ArrayBuffer 对象
            var buffer = wx.base64ToArrayBuffer(this.qrCode); // 将二维码转ArrayBuffer 对象
            fsm.writeFile({
                filePath: filePath, // 要写入的文件路径 (本地路径)
                data: buffer, // 要写入的文本或二进制数据
                encoding:"base64", // 指定写入文件的字符编码
                success() {
                }
            });
            // 绘制背景图
            ctx.drawImage(this.photoImg, 0, 0, 600 * that.rpx, 1000 * that.rpx);
            // 绘制二维码
            ctx.drawImage(filePath, 210 * that.rpx,742 * that.rpx, 180 * that.rpx, 180 * that.rpx);
            ctx.draw(false, res => {
                // 生成图片，返回图片路径
                wx.canvasToTempFilePath({
                      canvasId: 'canvas',
                      success(res) {
                          // console.log('canvasToTempFilePath', res.tempFilePath);
                          that.photoImg = res.tempFilePath;
                          that.$forceUpdate();
                          console.log('绘制后',res.tempFilePath)
                      }
                });
            });
        }
    }
}
</scrpit>

如果ctx.canvasToTempFilePath不执行，大部分是指向问题，记得加上指向，上面是var that = this; 所以：

ctx.draw(false, res => {
    // 生成图片，返回图片路径
    wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success(res) {
            // console.log('canvasToTempFilePath', res.tempFilePath);
            that.swiperList[index] = res.tempFilePath;
            that.$forceUpdate();
            console.log('绘制后',res.tempFilePath)
        }
    }, that); // 之前是var that = this,所以指向that
});

到这里了，如果对你有帮助，帮忙点个赞呗~~