uniapp将图片base64绘制到画布中

 html

 <view class="content">
        <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    </view>

 

js

// 获取图片的完整base64
                this.qrurl = res.data

                // 去掉图片的前缀信息，仅保留base64
                const base64Data = this.qrurl.replace(/^data:image\/\w+;base64,/, '');

                // 创建文件管理对象，用来提供保存一个临时的文件地址
                const fs = uni.getFileSystemManager();

                // 临时文件地址名
                const filePath = `${wx.env.USER_DATA_PATH}/shareQrcode.jpg`

                // 写入临时文件，文件地址filePath，图片信息base64Data
                fs.writeFile({
                filePath,
                data: base64Data,
                encoding: "base64",
                success(res) {
                  // 开始绘制到base64到画布中，把文件地址放进去即可
                  let context = uni.createCanvasContext('myCanvas', this);
                  context.drawImage(filePath, 0, 0, 300, 300);
                  context.draw();
                }
            })

 

 

 

uniapp的uni.getImageInfo 只能获取网络图片地址的图片信息，如果是将base64上传到网络然后再绘制又会浪费存储空间，时间，带宽等。所以不能用这个方法配合uni.createCanvasContext绘制图片到画布。

 

如果只有base64数据的话可以直接用uni.getFileSystemManager() 获取一个临时的文件地址，然后配合绘制到画布，直接前端本地就能完成。🤭