微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
类别:Web前端 浏览量:1672
时间:2021-09-30 00:13:05 微信小程序canvas缩放
微信小程序之html5 canvas绘图并保存到系统相册开始实现之前先上个效果图
tips
1.网络图片需先配置download域名,可通过wx.getImageInfo
转为临时路径;
2.个人习惯问题,我习惯使用async-await语法,所以需要引入regenerator这个库,使用方式可网上查。
一、封装通用微信api返回为Promise对象
/datas/common.js
// 封装获取微信图片信息。 export const getWxImageInfo = (imgPath) => { return new Promise((resolve, reject) => { wx.getImageInfo({ src: imgPath, success: res => { resolve(res) }, fail: res => { reject(res) } }) }) } // 封装获取节点选择器信息 export const getSelectQurey = (queryStr) => { return new Promise(resolve => { var query = wx.createSelectorQuery(); query.select(queryStr).boundingClientRect(); query.exec(res => { resolve(res) }) }) } // 封装把画布导出生成指定大小的图片 export const canvasToTempFilePath = (width, height, canvasId, fileType = .jpg" alt="微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)" border="0" />
二、视图的实现
.wxml
<view class="icon-download" catchtap="getCanvas">点击生成图片</view> <!-- 二维码大图 --> <view class='shade' wx:if="{{isShowCanvas}}"> <view class='qr-code'> <canvas class='qr-canvas' canvas-id="qrCanvas" id="qrCanvas"></canvas> <view class='qr-btn'> <view class='qr-btn-save' catchtap='saveImageToPhotosAlbumFunc'>保存图片,分享到朋友圈</view> <view class='qr-btn-cancel' catchtap='hideCanvas'>取消</view> </view> </view> </view> <!-- 二维码大图.end -->
.wxss
/* 查看大图 */ .shade { width: 100%; height: 100%; background-color: rgba(240, 235, 235, 0.5); position: fixed; z-index: 100; top: 0; left: 0; } .qr-code { width: 600rpx; height: 1000rpx; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* margin: 30rpx auto; */ } .qr-canvas { display: block; background-color: #fff; margin: 0 auto; width: 600rpx; height: 900rpx; } .qr-btn { width: 600rpx; height: 100rpx; line-height: 100rpx; margin: 0 auto; font-size: 28rpx; color: #fff; display: flex; background-color: #658dc5; } .qr-btn-save { flex: 0 0 500rpx; text-align: center; border-right: 1rpx solid #fff; } .qr-btn-cancel { text-align: center; flex: 0 0 100rpx; }
三、创建canvas并保存到系统相册
tips
商品图是正方形的,所以这里商品图的宽高都用canvas的宽文字不能换行,这里只是简单的处理了一下
注意: wx.canvasToTempFilePath(Object object, Object this)
这个的使用,文档有一句话需要注意的:“把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。”
const app = getApp() const regeneratorRuntime = app.globalData.regeneratorRuntimeconst const util = require('../../utils/util.js') import { getSelectQurey, getWxImageInfo, canvasToTempFilePath, saveImageToPhotosAlbum } from '../../datas/common.js' Page({ data: { isShowCanvas: false, // 是否显示canvas wxaCode: 'https://xxx..jpg" alt="微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)" border="0" />
写得比较简单,因为主要是方便自己做记录的,所以也没有考虑到过多的使用场景。
总结
以上所述是小编给大家介绍的微信小程序之html5 canvas绘图并保存到系统相册,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣
- ui小程序布局(AmazeUI 输入框组的示例代码)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 微信小程序简易计算器制作(微信小程序实现简单计算器功能)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 小程序scroll-view自适应高度(小程序瀑布流解决左右两边高度差距过大的问题)
- django实现登录注册(django与小程序实现登录验证功能的示例代码)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- pythondjango后台管理(基于腾讯云服务器部署微信小程序后台服务Python+Django)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- 小程序canvas不显示(小程序canvas中文字设置居中锚点)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 每日一典 过江之鲫(每日一典过江之鲫)
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
- 彩礼重要吗()
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
- 英语难学吗(法语比英语难学吗)
热门推荐
- 织梦dedecms教程(DedeTag Engine Create File False 提示的种种原因及解决方法小结)
- margin负值的作用
- css宫格布局(CSS实现页面九宫格布局的简单示范)
- dedecms发布时间调整(织梦DEDECMS发布完文章没有显示文章内容解决办法)
- 腾讯云linux服务器怎么用(详解在Linux环境中登陆腾讯云的Linux服务器的步骤)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- dedecms数据库备份地址(dedecms搬家时出现数据库导入失败的解决方法)
- pycharm如何自定义模板(对Pycharm创建py文件时自定义头部模板的方法详解)
- vue原样表格导出excel(Vue导出Excel功能的全过程记录)
- docker容器分配(Docker容器数据卷原理及使用方法解析)