微信小程序canvas分享海报功能


Posted in Javascript onOctober 31, 2019

微信小程序canvas分享海报,包含拒绝授权后重新打开授权设置。

这篇文章完善了第一次拒绝授权后再次点击可以打开授权设置,希望可以帮助到爱学习的道友

这里是效果图,图片可以百度上找。

微信小程序canvas分享海报功能

话不多说,直接上代码

最重要的一点,千万不要忘记在json文件里面注册组件和wxml里面引用组件

wxml

<button class='btn' catchtap='createPoster' >生成海报</button>
<my-poster id="getPoster" types="{{type}}" isflag="{{isflag}}" title="{{goods_title}}" bigImg="{{share.img}}" qrcode="{{share.rcode}}" >
</my-poster>

js

data:{ isflag: false // 海报模态框 }
// 生成海报
 createPoster:function(){
 this.setData({ 
 isflag: true
 })
 this.selectComponent('#getPoster').getAvaterInfo();
 },

组件wxml

<view hidden="{{!isflag}}" catchtouchmove="return" class="con-poster" bindtap='closePoster'>
 <!-- 模态框 -->
 <view class='modialog'>
 <view class='canvas-box' id='canvas-container'>
 <canvas canvas-id="myCanvas" style="width:100%;height:100%;"/>
 </view>
 </view>
 <!-- 保存图片按钮 -->
 <view class='save-img' catchtap='saveBtn'>保存图片</view>
</view>

组件wxss

.con-poster{
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
 }
 .modialog{
 width: 660rpx;
 height: 750rpx;
 margin: 100rpx auto 0;
 }
 .canvas-box{
 width: 660rpx;
 height: 750rpx;
 background: #fff;
 }
.save-img{
 width: 660rpx;
 height: 100rpx;
 margin: 30rpx auto 0;
 font-size: 32rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 background:linear-gradient(90deg,rgba(56,219,248,1),rgba(81,171,255,1));
}

组件js

properties: {
 isflag:{ // 控制组件开关
 type: Boolean,
 value: true
 }
 bigImg:{ // 大图
 type: String,
 value: ''
 },
 qrcode:{ // 二维码
 type: String,
 value: ''
 },
 title:{ // 标题
 type: String,
 value: '大幅度开发'
 }
}

data: {
 imgHeight: 0
},

methods: {
 //关闭海报
 closePoster: function () {
 this.setData({
 isflag: false
 })
 },

 // 提示框
 toast: function(msg,callback){
 wx.showToast({
 title: msg,
 icon: 'none',
 success(){
 callback && (setTimeout(function(){
 callback()
 },1500))
 }
 })
 },
 
 //下载产品大图
 getAvaterInfo: function () {
 wx.showLoading({
 title: '生成中...',
 mask: true
 });
 var that = this;
 that.setData({
 isflag: true
 })
 var productImage = that.data.bigImg;
 if (productImage) {
 wx.downloadFile({
 url: productImage,
 success: function (res) {
 wx.hideLoading();
 if (res.statusCode === 200) {
 var productSrc = res.tempFilePath;
 that.calculateImg(productSrc, function (data) {
 that.getQrCode(productSrc, data);
 })
 } else {
 that.toast('产品图片下载失败!', () =>{
 var productSrc = "";
 that.getQrCode(productSrc);
 })
 }
 },
 fail: function (err) {
 wx.hideLoading();
 that.toast('请求失败,网络错误', () => {
 that.closePoster()
 })
 }
 })
 } else {
 wx.hideLoading();
 var productSrc = "";
 that.getQrCode(productSrc);
 }
 },
 
 //下载二维码
 getQrCode: function (productSrc, imgInfo = "") {
 wx.showLoading({
 title: '生成中...',
 mask: true,
 });
 var that = this;
 var productCode = that.data.qrcode;
 if (productCode) {
 wx.downloadFile({
 url: productCode,
 success: function (res) {
 wx.hideLoading();
 if (res.statusCode === 200) {
 var codeSrc = res.tempFilePath;
 that.sharePosteCanvas(productSrc, codeSrc, imgInfo);
 } else {
 that.toast('二维码下载失败!', () => {
 var codeSrc = "";
 that.sharePosteCanvas(productSrc, codeSrc, imgInfo);
 })
 }
 },
 fail: function () {
 wx.hideLoading();
 that.toast('请求失败,网络错误', () => {
 that.closePoster()
 })
 }
 })
 } else {
 wx.hideLoading();
 var codeSrc = "";
 that.sharePosteCanvas(productSrc, codeSrc);
 }
 },
 
 //canvas绘制分享海报
 sharePosteCanvas: function (avaterSrc, codeSrc, imgInfo){
 wx.showLoading({
 title: '生成中...',
 mask: true,
 })
 var that = this;
 const ctx = wx.createCanvasContext('myCanvas', that);
 var width = "";
 const query = wx.createSelectorQuery().in(this);
 query.select('#canvas-container').boundingClientRect(function (rect) {
 var width = rect.width;
 var height = rect.height;
 var left = rect.left;
 ctx.setFillStyle('#fff');
 ctx.fillRect(0, 0, width, height);

 //海报大图
 if (avaterSrc) {
 if (imgInfo) {
 var imgheght = parseFloat(imgInfo);
 }
 ctx.drawImage(avaterSrc, 0, 0, width, imgheght ? imgheght : width);
 ctx.setFontSize(14);
 ctx.setFillStyle('#fff');
 ctx.setTextAlign('left');
 }
 
 //海报标题
 if (that.data.title) {
 const CONTENT_ROW_LENGTH = 22; // 正文 单行显示字符长度
 let [contentLeng, contentArray, contentRows] = that.textByteLength((that.data.title).substr(0, 40), CONTENT_ROW_LENGTH);
 ctx.setTextAlign('left');
 ctx.setFillStyle('#000');
 ctx.setFontSize(15);
 let contentHh = 22 * 1;
 for (let m = 0; m < contentArray.length; m++) {
 ctx.fillText(contentArray[m], 15, imgheght + 35 + contentHh * m);
 }
 }
 
 // 绘制二维码
 if (codeSrc) {
 ctx.drawImage(codeSrc, left + 215, imgheght + 20, width / 4, width / 4)
 ctx.setFontSize(10);
 ctx.setFillStyle('#000');
 }
 }).exec()
 setTimeout(function () {
 ctx.draw();
 wx.hideLoading();
 }, 1000)
 },
 
 // 封装每行显示的文本字数
 textByteLength(text, num) { // text为传入的文本 num为单行显示的字节长度
 let strLength = 0;
 let rows = 1;
 let str = 0;
 let arr = [];
 for (let j = 0; j < text.length; j++) {
 if (text.charCodeAt(j) > 255) {
 strLength += 2;
 if (strLength > rows * num) {
 strLength++;
 arr.push(text.slice(str, j));
 str = j;

 rows++;
 }
 } else {
 strLength++;
 if (strLength > rows * num) {
 arr.push(text.slice(str, j));
 str = j;
 rows++;
 }
 }
 }
 arr.push(text.slice(str, text.length));
 return [strLength, arr, rows] // [处理文字的总字节长度,每行显示内容的数组,行数]
 },
 
 //计算图片尺寸
 calculateImg: function (src, cb) {
 var that = this;
 wx.getSystemInfo({
 success(res2) {
 var imgHeight = (res2.windowWidth * 0.65) + 130;
 that.setData({
 imgHeight: imgHeight
 })
 cb(imgHeight - 130);
 }
 })
 },
 
 // 点击保存按钮
 saveBtn(){
 var _this = this
 wx.getSetting({
 success(res) {
 if (res.authSetting['scope.writePhotosAlbum']) { // 第一次授权,并且成功
 _this.saveShareImg();
 } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) { // 未授权
 wx.authorize({
 scope: 'scope.writePhotosAlbum',
 success() {
 _this.saveShareImg();
 },
 fail() {
 _this.toast('您没有授权,无法保存到相册')
 }
 })
 } else { // 第一次授权失败,现在打开设置
 wx.showModal({
 title: '警告',
 content: '请打开授权,否则无法将图片保存在相册中!',
 success(result) {
 if (result.confirm) {
  wx.openSetting({
  success(settingResult) {
  if (settingResult.authSetting['scope.writePhotosAlbum']) {
  _this.saveShareImg();
  } else {
  _this.toast('您没有授权,无法保存到相册')
  }
  }
  })
 }
 }
 })
 }
 }
 })
 },
 
 // 保存到相册
 saveShareImg: function () {
 var that = this;
 wx.showLoading({
 title: '正在保存',
 mask: true,
 })
 setTimeout(function () {
 wx.canvasToTempFilePath({
 canvasId: 'myCanvas',
 success: function (res) {
 var tempFilePath = res.tempFilePath;
 wx.saveImageToPhotosAlbum({
 filePath: tempFilePath,
 success() { // 保存
 wx.hideLoading()
 that.toast('图片保存成功', () =>{
  that.closePoster();
 })
 },
 fail: function (err) { // 取消保存
 wx.hideLoading()
 that.toast('保存失败')
 }
 })
 }
 }, that);
 }, 1000);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 #Javascript
vue项目初始化到登录login页面的示例
Oct 31 #Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 #Javascript
vue data恢复初始化数据的实现方法
Oct 31 #Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 #Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 #Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
两个php日期控制类实例
2014/12/09 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
深入理解PHP中的count函数
2016/05/31 PHP
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
详解Vue组件实现tips的总结
2017/11/01 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python中文编码那些事
2014/06/25 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
快速入手Python字符编码
2016/08/03 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
对python生成业务报表的实例详解
2019/02/03 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
django删除表重建的实现方法
2019/08/28 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis