小程序二维码 base64编码图片draw到画布上真机不显示解决方法

最新推荐文章于 2023-12-16 10:39:45 发布
最新推荐文章于 2023-12-16 10:39:45 发布
阅读量5.3k 收藏 1
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42421494/article/details/83015303
版权

最初的时候想后台获取到了二维码的二进制流，使用wx.arraybuffertobase64转换成二进制后，图片可以在页面显示，电脑上模拟时drawImage绘制到画布时也是ok的，但是真机无法显示这张二维码。

解决方法：让后台返回二维码的HTTP网络地址，这个时候绘制真机仍然不显示，使用getImageInfo获取该地址的临时路径，再绘制时就可以了

I'm李刚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
微信小程序用canvas展示base64格式的图片
spongeK的博客
12-06 1万+
目前有个需求，就是分享页面到朋友圈，由后台传图片的数据，是base64格式的，然后要展示在页面中并且点击保存按钮可以将图片保存在系统相册中。 实现一、 一开始想着是用image直接去显示，然后使用wx.saveImageToPhotosAlbum(Object object)保存到系统相册，但是由于后台传来的base64格式的，所以想着先生成本地图片，然后再进行保存。 var imgName...
uniap小程序中使用canavs绘制base64格式，真机调试二维码不显示的问题。
最新发布
weixin_73077230的博客
01-11 611
这样的缺点在于每调用一次写一个文件，文件会越写越多，当文件管理器中文件总大小超过最大限制则会报错。先把小程序码通过小程序API中的FileSystemManager.writeFile()接口写入本地并获取到一个临时URL。小程序中有一个这样的场景：一个图片(包括了背景图，二维码，标题)，类似于zfb中的每天扫一扫，方便用户保存在本地。小程序码通过后台接口获取，格式如下：'data:image/jpg;画出来之后，在微信开发者工具上有效，在真机上无效。accomplish！
uni-app小程序生成base64二维码真机不显示问题解决
zhiyan1990的专栏
09-18 3333
现象： 小程序生成二维码后，使用canvas绘制到画板，开发工具可以显示，真机无法显示 原因： 生成二维码插件生成的图是base64格式的，而canvas不支持base64图片的 解决方案： 1、删除本地同名文件 2、将base64图片，存储到本地，生成临时url 3、将本地图片绘制到canvas 具体实现： 1、删除本地同名文件 removeSave(FILE_BASE_NAME = 'tmp_base64src', format = 'jpg') { return new Pro
微信小程序base64加解密
06-21
微信小程序base64加解密的js 和使用方法
解决canvas base64图片 在小程序真机不显示问题？
qq_45032714的博客
11-25 1670
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
热门推荐
zhizungege的博客
06-18 1万+
使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示环境配置准备环境使用软件图片上传图片删除图片显示所有代码均为参考，每个人的方法不一样，效果不一样，该代码仅供参考，大佬们别嫌弃环境配置 jdk1.8 maven 3.6.1 mysql 8.1软件为 idea 2020.01 vsCode前台需要的 vue elementUinpm 安装 npm i element-ui -S后台需要的 spring boot 框架废话不多说了 开搞吧
微信小程序安卓系统下不显示BASE64图片问题
UVB-76电台
12-28 1350
<image>标签中的data属性必须写为：image/png 不能是img/png    或者是jpg等其他格式 that.setData({ captchaImage: 'data:image/png;base64,' + res.data}); 否则，在IOS下没问题，安卓下集体出BUG！  ...
微信小程序裁切头像、二维码 可放大缩小 并转为base64
07-16
微信小程序剪切头像功能,二维码功能，页面只有一个，方便做数据处理，并进行了图片压缩转换，最后转为base64，直接post到服务器处理即可 用到的几个关键api wx.canvasToTempFilePath wx.chooseImage wx....
微信小程序生成二维码的插件,基于base64编码输出二维码，不依赖canvas.zip
01-09
生成的base64编码的二维码可以进一步用于显示在页面上，或者通过网络发送给其他系统。需要注意的是，base64编码后的字符串可能会比原始二进制数据更大，因此在处理大量数据时，需要考虑传输和存储成本。 在实际应用...
微信小程序将字符串生成二维码图片的操作方法
12-12
下面记录的是小程序中生成二维码图片这一操作，用的是原文作者改版后的生成二维码工具weapp-qrcode.js（demo的众多文件中只需将util下的这个文件拷贝到自己项目中），可在原文地址里clone demo。 截图（copy原文） ...
微信小程序canvas绘制圆角base64图片的实现
12-08
接口返回base64格式小程序二维码，以往的做法是需要再调一个接口去拿到jpg/png格式的图片。如果没有这个接口呢，是不是也可以？然而小程序canvas并不支持直接使用base64绘制，好在小程序的文件系统提供了方法，可以...
微信小程序真机调试或者上线后base64图片不显示
weixin_43802567的博客
08-11 376
微信小程序真机调试或者上线后base64图片不显示
小程序image 无法显示base64 图片 解决办法 有效
hexiaoniao的博客
05-20 1万+
网上找的办法。没有效果！！！！坑死了！！！！ var data = res.data var array = wx.base64ToArrayBuffer(res.data) var base64 = wx.arrayBufferToBase64(array) if (res.statusCode == 200) { ...
uni-app 开发微信小程序 海报分享 canvas画base64编码的图片，开发者工具能展示手机端不能展示处理
double_Fly_的博客
12-16 807
这时候就需要先把base64编码临时存储并生成一个临时的路径url，再用临时的路径去渲染图片。
小程序解决image无法显示base64数据的问题
wilL-my的博客
01-26 1145
// 对拿到的数据进行处理 data = data.replace(/[\r\n]/g,"")
小程序展示base64图片
Dreamy smile
12-08 1588
base64图片如果不包含类似于【data:image/png;base64,】，这个字符串。 let base64Img = 'base64字符串' base64Img = 'data:image/png;base64,' + base64Img ; 如果包含【data:image/png;base64,】。 <image mode="widthFix" src="{{base64Img}}" /> 如果上面base64字符串没有问题，需要去一下字符串里面的空格。 base.
微信小程序 base64格式图片的显示及保存
weixin_30832405的博客
07-19 1975
当我们拿到如下base64格式的图片（如下图）时， base64格式的图片数据： 如何显示 ？ 使用image标签，src属性添加data:image/png;base64, （注意：若imgData返回数据中含有data:image/png;base64,时，src直接写src="{{imgData}}"即可） <image src="data:i...
小程序base64 图片for循环多个展示不了_小程序与OSS的一次邂逅
weixin_39617113的博客
12-01 120
程序员是值得尊敬的，程序员的双手是魔术师的双手，他们把枯燥无味的代码变成了丰富多彩的软件。01使用背景在开发过程中，图片文件占用的服务器资源还是比较大的，尤其是在访问量和业务量比较大的地方，这个时候就该要考虑用户图片或者其他文件的上传由后台服务来处理还是由客户端自己消化掉，只扔给后台一串OSS链接就OK 了，那么，在最近几次的项目中，我选择了后者！02使用案例PC端、H5...
生成二维码图片,转换成base64,显示在页面
weixin_30645617的博客
11-06 553
要求：生成一个二维码，里面带有我指定的内容，并按照我的大小显示在页面上。 思路：通过c#代码将包含自定义的内容生成一张二维码图片-（类型：bitmap）------------------使用在线工具将图片转成base64字符串-------------------套用固定格式data:image/jpeg;base64,+base64字符串-----------...
java 生成微信小程序二维码 base64 格式并携带参数 java 后端 完整代码
05-21
以下是Java生成微信小程序带参数二维码的完整代码： ```java import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLEncoder; import java.util.HashMap; import java.util.Map; import org.apache.commons.codec.binary.Base64; import org.json.JSONObject; public class WxMaQrcodeUtils { private static final String API_URL = "https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode"; private static final String PARAM_PAGE = "page"; private static final String PARAM_SCENE = "scene"; private static final String ACCESS_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token"; /** * 获取access_token * * @param appid 小程序appid * @param secret 小程序secret * @return access_token */ public static String getAccessToken(String appid, String secret) { String accessToken = null; try { String url = ACCESS_TOKEN_URL + "?grant_type=client_credential&appid=" + appid + "&secret=" + secret; URL obj = new URL(url); HttpURLConnection con = (HttpURLConnection) obj.openConnection(); con.setRequestMethod("GET"); int responseCode = con.getResponseCode(); if (responseCode == HttpURLConnection.HTTP_OK) { InputStream inputStream = con.getInputStream(); BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream)); StringBuilder stringBuilder = new StringBuilder(); String line; while ((line = bufferedReader.readLine()) != null) { stringBuilder.append(line); } bufferedReader.close(); JSONObject jsonObject = new JSONObject(stringBuilder.toString()); accessToken = jsonObject.getString("access_token"); } } catch (Exception e) { e.printStackTrace(); } return accessToken; } /** * 生成小程序带参数二维码 * * @param accessToken 小程序access_token * @param page 小程序页面路径 * @param scene 小程序页面参数 * @return base64格式的二维码图片数据 */ public static String createQrcode(String accessToken, String page, String scene) { String base64Image = null; try { Map<String, Object> params = new HashMap<>(); params.put(PARAM_PAGE, page); params.put(PARAM_SCENE, scene); URL obj = new URL(API_URL + "?access_token=" + accessToken); HttpURLConnection con = (HttpURLConnection) obj.openConnection(); con.setRequestMethod("POST"); con.setRequestProperty("Content-Type", "application/json"); con.setDoOutput(true); con.getOutputStream().write(new JSONObject(params).toString().getBytes("UTF-8")); int responseCode = con.getResponseCode(); if (responseCode == HttpURLConnection.HTTP_OK) { InputStream inputStream = con.getInputStream(); byte[] imageBytes = new byte[inputStream.available()]; inputStream.read(imageBytes); inputStream.close(); base64Image = Base64.encodeBase64String(imageBytes); } } catch (Exception e) { e.printStackTrace(); } return base64Image; } public static void main(String[] args) { String appid = "your_appid"; String secret = "your_secret"; String accessToken = getAccessToken(appid, secret); String page = "pages/index/index"; String scene = "key=value"; String base64Image = createQrcode(accessToken, page, URLEncoder.encode(scene)); System.out.println(base64Image); } } ``` 注意，需要引入Apache Commons Codec库。 其中，getAccessToken方法用于获取小程序的access_token，createQrcode方法用于生成小程序带参数二维码并返回base64格式的图片数据。在main方法中调用以上两个方法即可生成小程序二维码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值