Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序 base64 图片 canvas 画布 drawImage 实现

微信小程序 base64 图片 canvas 画布 drawImage 实现

原创
作者头像
猫哥学前班
发布于 2018-11-06 02:45:58
发布于 2018-11-06 02:45:58
8.6K1
举报
文章被收录于专栏:猫哥学前班猫哥学前班

微信小程序canvas drawImage 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getImageInfo 获取图片信息来获得。

而 base64 格式图片数据,无法被 getImageInfo 直接调用,以下是解决方案:

  1. 首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据
  2. 使用 FileSystemManager.writeFile 将 ArrayBuffer 写为本地用户路径的二进制图片文件
  3. 此时的图片文件路径在 wx.env.USER_DATA_PATH 中, wx.getImageInfo 接口能正确获取到这个图片资源并 drawImage 至 canvas 上

以下是具体的 base64src.js 函数代码,注意写文件时去掉 base64 的头信息:

代码语言:txt
AI代码解释
复制
const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';

const base64src = function(base64data) {
  return new Promise((resolve, reject) => {
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
      reject(new Error('ERROR_BASE64SRC_PARSE'));
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    const buffer = wx.base64ToArrayBuffer(bodyData);
    fsm.writeFile({
      filePath,
      data: buffer,
      encoding: 'binary',
      success() {
        resolve(filePath);
      },
      fail() {
        reject(new Error('ERROR_BASE64SRC_WRITE'));
      },
    });
  });
};

export default base64src;

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
非常完美的解决了我目前遇到的问题。
非常完美的解决了我目前遇到的问题。
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
小程序base64转为本地图片
第一步: 新建一个js文件,位置自己决定 const fsm = wx.getFileSystemManager() const FILE_BASE_NAME = 'tmp_base64src' function base64src (base64data, cb) { const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [] if (!format) { return (new
〆 千寻、
2020/03/11
3.7K0
小程序Canvas实践指南
导语 总结在小程序canvas开发实践中遇到的一些问题和解决方法。 1. 什么是 Canvas? 在 MDN 是这样定义 canvas 的: canvas 是 HTML5 新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时视频处理或渲染。 Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通过一套完整的绘图函数来动态生成图形。
腾讯VTeam技术团队
2020/10/14
3.8K0
微信小程序webview保存图片
在小程序的 webview 里保存图片. 因为微信的 js-sdk 没有提供 saveImageToPhotosAlbum 方法
chuchur
2022/10/25
3.5K0
uniapp H5 画布自定义海报实现长按识别,分享,转发
前端使用uniapp制作H5自定义海报,本来以为挺简单的一常用功能画布,因为之前也在 H5 和小程序做过类似功能,所以直接上手干了,没想到还是遇到了一些坑,特此记录希望能够帮到大家。
IT工作者
2022/05/16
3.9K0
微信小程序实现canvas生成海报保存到本地
效果图 <view> <canvas class="canvas" style="width: {{canvas_width}}px;height:{{canvas_height}}px;
明知山
2020/09/03
1.9K3
小程序 canvas 生成海报 一次搞掂
需要注意的是,目前的canvas可以简单分为两种。一种是传统网页中的canvas,一种是小程序中的canvas。两者的功能是完全一样的。只是标签的样式,和 api 略有区别而已。目前我们主要讲解小程序中的canvas。
万少
2025/02/11
1900
小程序 canvas 生成海报 一次搞掂
【微信小程序】基于百度大脑人体检测、人脸识别以及调用阿里垃圾分类识别小程序利用canvas完成人脸画图、分割手部部分图片算法
说明:人体出现在镜头里用红色框将人脸圈出来、用黄色框将手部圈出来,定时器触发后,通过百度返回的top+、left+、width+、height+将拍照的截图用canvas画出来,最后保存上传到阿里云垃圾分类识别检测
德宏大魔王
2023/08/08
5340
【微信小程序】基于百度大脑人体检测、人脸识别以及调用阿里垃圾分类识别小程序利用canvas完成人脸画图、分割手部部分图片算法
微信小程序之生成图片分享
通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径。小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面。但是小程序目前不支持直接分享到微信朋友圈,而对我们来说,微信朋友圈又是一个很重要的吸引别人关注的入口,所以,得想办法把这个资源利用起来。
一斤代码
2018/08/21
4.8K0
微信小程序之生成图片分享
小程序生成图片并保存
自己做过几个小程序生成图片并保存的功能,觉得做这个功能用到的还挺多的,记录一下。 总体可以分为: 前端处理:后端返回数据,前端自己将图片、文字等画到 canvas 上,然后转图片。 后端处理:后端直接返回图片,前端只做保存功能。 #前端处理 #绘制 Canvas 并保存 小程序有强大的 canvas 可以转成图片并保存,具体API看 文档 。 但是 canvas 的原生操作过于啰嗦,比如画一个字上去: const ctx = wx.createCanvasContext('myCanvas') ctx.s
九旬
2020/10/23
2.9K0
面试官昨天问我对base64的理解,着实被问懵了
我们知道一个字节可表示的范围是 0 ~ 255(十六进制:0x00 ~ 0xFF), 其中 ASCII 值的范围为 0 ~ 127(十六进制:0x00 ~ 0x7F);而超过 ASCII 范围的 128~255(十六进制:0x80 ~ 0xFF)之间的值是不可见字符。
用户3806669
2021/03/25
4.7K0
面试官昨天问我对base64的理解,着实被问懵了
自学微信小程序开发两小时,我将hai的AI绘画接入到了小程序
感觉已经进入全面AIGC的时代了,从刚开始的ChatGPT的生成文本,到GPT-4文本到图片的发展,深刻感受到了技术的日新月异。但是GPT-4一直是付费模式,我才开始接触stable diffusion,在自己的电脑上学习AI绘画。
叫我阿柒啊
2024/03/26
9816
自学微信小程序开发两小时,我将hai的AI绘画接入到了小程序
微信小程序之分享海报生成
为了吸引更多的用户,设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验。
IMWeb前端团队
2019/12/03
3.5K0
微信小程序之分享海报生成
微信小程序预览base64图片
wx.previewImage不支持base64格式预览图片,要实现预览base64的图片,需要用到解决办法:把base64作为临时文件存到本地,然后预览,预览结束时删除临时文件
似水的流年
2022/09/08
1.2K0
微信小程序图片上传压缩
在具体业务中,我们会遇到需要让用户上传本地图片的场景,随着现在的手机像素越来越高,图片的大小也越来越大,上传原图后一方面是难以上传成功,另一方面是上传成功后在列表中图片太大加载时间过长或者加载失败。若是直接提示用户 “无法上传xxM以上的图片” ,用户体验会不好,于是需要我们对用户上传的图片进行压缩。本文主要记录了开发过程中探索压缩图片的过程和方式,以及一些踩坑记录。
maureen
2022/09/07
10.4K0
小程序10行代码实现微信头像挂红旗,国庆节个性化微信头像
至于如何创建小程序,我这里就不在细讲了,我也有写过创建小程序的文章,也有路过相关的学习视频,去翻下我历史文章找找就行。
编程小石头
2019/09/26
3.3K6
小程序10行代码实现微信头像挂红旗,国庆节个性化微信头像
【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发
通过小程序配合百度的人体分割接口进行简单的照片渲染,本期做一个小工具,对学生党、工作人员、打印店铺以及涉及到求职简历办公等需求的人员都很有用,这个项目由于一些原因不再做维护了,于是打算出个教程将证件照小程序分享给大家,这里采用百度AI接口是因为现在网上开源的py脚本对边缘计算不是很优秀,会有很多模糊点没办法处理,识别人体的轮廓范围,与背景进行分离,适用于拍照背景替换、照片合成、身体特效等场景。输入正常人像图片,返回分割后的二值结果图、灰度图、透明背景的人像图(png格式);并输出画面中的人数、人体坐标信息,可基于此对图片进行过滤、筛选。百度在这方便做得很好,细致化到发丝,并且免费!!
德宏大魔王
2023/08/08
7310
【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发
「强烈建议收藏」小程序canvas绘制带二维码海报全流程(枚举踩坑,详解解决方案)
接下来,我会把纯前端实现生成带二维码的海报全流程给大家讲个明明白白,把我自己遇到的坑,给大家详细分享并讲解,防止大家遇到相似问题,即使遇到问题,也会有一个明确的方向,并且吐血建议大家收藏一波,以备不时之需。(你不能保证以后的需求,没有类似的吧,有的话,记得翻出来看看)
用户6835371
2021/06/01
3.7K0
「强烈建议收藏」小程序canvas绘制带二维码海报全流程(枚举踩坑,详解解决方案)
微信小程序如何处理图片
下面简单举个微信小程序处理图片的例子,我们首先获取了图片的路径,并使用wx.getImageInfo方法获取了图片信息。然后,我们根据缩放比例计算出新图片的大小,并使用wx.canvasToTempFilePath方法将原始图片缩放到指定大小。一旦新图片生成成功,我们使用wx.saveImageToPhotosAlbum方法将其保存到用户的相册中。
飞梦工作室
2023/07/05
5000
js实现图片资源转化成base64的各种场景
网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少,所以我就在这里将各种场景系统的介绍一下:
yaphetsfang
2020/07/30
2K0
简单几步,让微信小程序变身 H5 网页? | 云开发实战
我是 盛瀚钦,沪江 CCtalk 前端开发工程师,Taro 框架的 issue 维护志愿者,主要侧重于前端 UI 编写和团队文档建设。
腾讯云开发TCB
2020/03/31
6.7K0
简单几步,让微信小程序变身 H5 网页? | 云开发实战
推荐阅读
相关推荐
小程序base64转为本地图片
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档