uniapp怎么base64格式图片显示在canvas上
时间: 2023-12-09 13:02:34 浏览: 509
实现canvas 图片拖拽旋转移动 点击转成base64
3星 · 编辑精心推荐
在uniapp中,可以使用uni.getImageInfo获取图片信息,然后将图片转换成base64格式,在canvas中显示。下面是一个示例代码:
```javascript
// 获取图片信息
uni.getImageInfo({
src: 'https://example.com/image.jpg',
success: function (image) {
// 将图片转换成base64格式
uni.getFileSystemManager().readFile({
filePath: image.path,
encoding: 'base64',
success: function (base64) {
// 将base64格式的图片绘制到canvas上
const ctx = uni.createCanvasContext('canvas');
const imgData = 'data:image/png;base64,' + base64.data;
ctx.drawImage(imgData, 0, 0, image.width, image.height);
ctx.draw();
}
});
}
});
```
需要注意的是,canvas绘制图片的时候需要等待图片加载完成后再绘制,所以需要在getImageInfo的回调函数中进行base64转换和canvas绘制的操作。
阅读全文