uniapp 生成分享图片(图片+二维码),并保存到本地相册 功能实现
生成分享图片
使用场景
在使用电商app时,通常有个分享给好友的功能,如果想要做分销类型,发展下线,也就是你邀请的好友是你的下级的话,就需要分享时将个人信息附带进去,因此会涉及到生成分享图片。
界面
点击上图中的“生成并保存图片”按钮,就会将图片及二维码合并成一张图片然后保存到手机本地相册。
此处的二维码是含有本人邀请码的下载app二维码。
生成分享图片功能
DCLOUD插件市场中,搜索“分享图”,可以看到第一个插件“canvas绘图,海报图,分享图,二维码生成”。
插件功能
支持多图片绘制,多文本绘制,圆形图片绘制;
支持矩形(线条)绘制;
支持圆形绘制;
支持二维码生成,项目用不上可以去插件内去除,毕竟这个插件携带的比较大,单纯用来生成二维码图片也是阔以的;
支持绘图后预览。
多用于海报图,分享图;
注意H5跨域问题及小程序白名单配置;
图片是网络图片:https://…(require及import引入不了3Kb以上的绝对路径图片,若有大神知道处理方法,望不吝赐教,谢谢!)
使用步骤
- 引入vue组件
- 使用组件
此处我使用的是:插件外独立按钮触发
区别在于:
3. 保存图片按钮,我是有个背景图的,这个并不影响什么。添加click点击事件:beginCanvas
4. 注释掉 <image :src="canvasUrl" mode="widthFix"></image>
5. mosowe-canvas-image组件中,有个预览合成图的属性:showPreview,为了直接保存到本地相册,此处可以去掉此属性。
分享图片组件的预览地址:
分享图片插件预览https://www.zhonglixunqing.cn/staticHtml/uni-app-components/#/
将图片保存到本地
uniapp是有api可以将图片保存到本地的。
注意这个saveImageToPhotosAlbum
方法中的参数filePath
是图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径。
上一个步骤中分享图片功能合成图片后,返回的是本地的临时路径,因此可以直接使用此方法进行保存到本地相册。
代码如下:
beginCanvas() {this.$refs.mosoweCanvasComponents.createCanvas();
},
_canvasImage(e) {this.canvasUrl = e;console.log("图片",e);// 网络图片需要先进行下载然后直接保存到相册// this.saveHttpImg(e);// 本地图片可以直接保存到相册this.save(e);uni.redirectTo({url: `/pages/index/invite`});
},
saveHttpImg(url) {let _t = this;uni.downloadFile({url: url, //仅为示例,并非真实的资源success: (res) => {if (res.statusCode === 200) {let file = res.tempFilePath;_t.save(file)}}});
},
save(url) {let _this = this;uni.saveImageToPhotosAlbum({filePath: url,success: () => {uni.hideLoading();uni.showToast({title:"图片已保存"});},fail: () => {uni.hideLoading();uni.showToast({title:"图片保存失败"});}});
}
如果是网路图片,则需要先从网络进行下载图片。也就是需要先用到这个api
不使用图片下载组件的处理方法****
<image src="https://58d.oss-cn-hangzhou.aliyuncs.com/goods/code_1598254395000.jpg" mode="widthFix" @longtap="toSave"></image>
toSave(){uni.showModal({title: '图片保存',content: '确定要保存图片吗',success: e => {if (e['confirm']) {this.save();}}});
},
save(){uni.downloadFile({url: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/code_1598254395000.jpg", //仅为示例,并非真实的资源success:(res) => {if (res.statusCode === 200) {let file = res.tempFilePath;uni.saveImageToPhotosAlbum({filePath: file,success: () => {uni.hideLoading();uni.showToast({title:"已保存至相册",duration:3000});},fail: () => {uni.hideLoading();uni.showToast({title:"图片保存失败",duration:3000});}});}}});
},
uniapp 生成分享图片(图片+二维码),并保存到本地相册 功能实现相关推荐
- VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册 一.效果 二.说明 公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
- JAVA 生成二维码并保存到本地或文件服务器
最近公司要做一个用户邀请的功能,生成二维码邀请用户就能获得积分奖励.于是就开发了一个小功能,二维码可以保存在本地,也可以利用FastFileStorage上传到文件服务器. pom文件用到的包 < ...
- 前端生成带有logo的二维码并保存
一.将生成的二维码与logo图标合并并保存二维码 需求: 1.前端自己生成带有logo的二维码并保存二维码 2.logo是图片 思路: 1.引用生成二维码的库(此处使用的是node-qrcodel,该 ...
- div生成图片_Vue生成分享海报(含二维码)
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 功能需求: 海报有1张背景 ...
- 利用google.zxing 生成携带信息的二维码并保存
废话不多说 利用谷歌的zxing生成二维码 到pom.xml导入com.google.zxing的jar包 <dependency><groupId>com.google.zx ...
- 【Uni-App】点击分享,生成海报带二维码,保存到本地图片,写入文字
目录 一:需求 二:分析 三:准备工作 1.qrcode准备 2.并且在main.js去挂载 四:页面构建 1.html 2.data 3.js 二维码嵌入文字 一:需求 1.产品需要这个商品,必须分 ...
- java根据内容生成二维码并保存到本地
/*** ClassName:Base64Util.java* Date:2020年2月27日*/ package com.sh.untils;import com.google.zxing.Barc ...
- python生成链接二维码,保存到本地
利用python生成二维码链接 from MyQR import myqrmyqr.run(words='hhttps://jingyan.baidu.com/article/ae97a6467262 ...
- uniapp中开发APP时渲染后台返回的二维码并保存到系统相册
如下,若后台给你返回了这样的代码 说明后台把他的文件整个塞给了你,那么你前端的处理 第一步 设置请求方式,responseType:'arraybuffer' 通过new Uint8Array(res ...
最新文章
- git 打tag_图文讲解,团队开发中的 Git 最佳实践
- 6 OC 中的isa 指针
- 烦人,周报要不要取消?| 每日趣闻
- 北京公交线路查询(离线)
- eclipse spring boot项目搭建_spring-boot-plus项目配置文件(四)
- Oracle的ONS创建,Oracle 10gR2 RAC Clusterware ONS服务的管理
- python数据科学讲解_数据科学的概念-Python数据科学技术详解与商业项目实战精讲 - Python学习网...
- CAP 3.0 版本正式发布
- php正则过滤html标签_空格_换行符的代码,PHP 正则过滤 html 标签、空格、换行符的代码 (文章格式化)...
- 互联网晚报 | 2月8日 星期二 | 上海微电子交付中国首台光刻机;广东诞生全国首个万亿工业强区;东芝宣布分拆为两家公司...
- indexof java_java indexOf()简单字符查找实例
- 使用CXF发布WebService服务简单实例
- Mars 算法实践——人脸识别 1
- 一年突破3亿游戏安装量 小米游戏双发行模式助力游戏开发者
- Ubuntu 14.04 安装 DevStack与遇到的的问题记录
- 机器学习算法概述——摘录《机器学习算法导论》
- linux 提示libaio.so.1,libaio.so. 1: 无法打开共享对象文件
- Java实现选择排序和冒泡排序
- 滴滴翻译技术探索与实践
- 测试地势高低的手机软件_能测量海拔高度的手机软件