uniapp怎base64格式图片展示在canvas上
时间: 2023-11-30 15:03:38 浏览: 318
在uni-app中,可以使用uni.getImageInfo()方法获取图片信息,包括图片的宽度、高度等属性,然后使用uni.canvasContext.drawImage()方法将图片绘制到canvas上。具体实现步骤如下:
1. 使用uni.getImageInfo()方法获取base64格式的图片信息:
```
uni.getImageInfo({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...',
success: function(res) {
console.log(res.width);
console.log(res.height);
}
});
```
2. 在canvas中绘制图片:
```
<canvas canvas-id="myCanvas"></canvas>
<script>
const ctx = uni.createCanvasContext('myCanvas');
uni.getImageInfo({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...',
success: function(res) {
ctx.drawImage(res.path, 0, 0, res.width, res.height);
ctx.draw();
}
});
</script>
```
以上代码会在canvas中绘制一张base64格式的图片。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)