uniapp怎base64格式图片展示在canvas上
时间: 2023-11-30 17:03:37 浏览: 795
实现canvas 图片拖拽旋转移动 点击转成base64
3星 · 编辑精心推荐
在uniapp中,可以使用uni.getImageInfo方法获取base64格式的图片信息,然后将该信息绘制在canvas上。
具体实现步骤如下:
1. 获取base64格式的图片信息
```
uni.getImageInfo({
src: 'data:image/png;base64,iVBORw0KG...',
success: function (res) {
console.log(res.width)
console.log(res.height)
}
})
```
2. 在canvas上绘制图片
```
// 获取canvas上下文
const ctx = uni.createCanvasContext('myCanvas')
// 绘制图片
ctx.drawImage('data:image/png;base64,iVBORw0KG...', 0, 0, res.width, res.height)
// 将绘制结果显示在页面上
ctx.draw()
```
这样就可以将base64格式的图片展示在canvas上了。需要注意的是,如果要在canvas上绘制的图片过大,可能会导致canvas绘制失败,需要对图片进行压缩或裁剪。
阅读全文