易者
易者
  • 发布:2023-08-07 22:29
  • 更新:2024-05-11 13:58
  • 阅读:748

请教如何用uniapp在H5中的canvas里显示base64图片?

分类:uni-app

比如小程序码返回的是图片buffer,如果我要在canvas里显示小程序码并添加文字,应该怎么做呢?试过下面的代码不行

let mysrc = 'data:image/png;base64,'+base64;  
var context = uni.createCanvasContext('myCanvas')  
var image = new Image();  
image.src = mysrc;  
image.onload = function() {  
    context.drawImage(mysrc, 0,0,200,200);  
};

上面的小程序码图片buffer转换成base64后可以在image标签里正常显示,就是无法绘制在canvas里。
微信小程序里有writeFile函数可以解决写入路径问题,从而drawImage成功,但uniapp貌似没提供类似函数,想要用uniapp在H5的canvas里绘制这种小程序码加文字的图片,不知道如何实现,或者如果能用小程序码的arrayBuffer实现而不用base64实现也行,请教应该怎么解决这个问题呢?

2023-08-07 22:29 负责人:无 分享
已邀请:
Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

转换成base64后可以在image标签里正常显示,已经成功了,为什么还需要弄成canvas呢

  • 易者 (作者)

    因为要在上面添加指定文字,绘制新的图片才符合要求,正常返回的图片buffer只是第一步基础素材。

    2023-08-08 10:32

  • Diligent_UI

    回复 易者: 转临时路径再画canvas

    2023-08-08 13:26

  • 易者 (作者)

    回复 Diligent_UI: 转临时路径用什么函数呢?

    2023-08-08 15:57

1***@qq.com

1***@qq.com

你好 请问解决了吗

  • 易者 (作者)

    没解决

    2024-05-12 09:05

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容