小程序之生成朋友圈图片分分快三计划

作者:分分快三计划

    绘制图片

五 . 填坑

1.图片要提前下载这里面还有一个问题就是,图片要提前下载完之后再绘图,不然图片显示不出来,可以把下载图片的方法单独拎出来,然后下载图片后回调绘图方法。

  1. ctx.draw()这个方法是在绘制完成之后在调用,不然容易其它被覆盖。

这样就大功告成了,有问题可以和联系作者,一起进步。喜欢就点点喜欢鼓励DEMO路径:

2、背景图如何绘制,获取图片信息

 

四 . 实现代码

利用微信小程序canvas生成海报分享图片,这个生成图片排版和适配不同尺寸的手机是一个难点,特别是图片适应问题,我处理的方法是动态获取容器的宽度进行适应就是利用微信API wx.createSelectorQuery(),不知道还有没有更好的办法可以请教。

1.下载头像为了确保图片下载完成之后,再回调其它方法执行下一步。

 getAvaterInfo: function  {//cardInfo是传入的信息参数,按实际需要。 wx.showLoading({ title: '生成中...',mask: true,}); var that = this; if (cardInfo.CardInfo.Avater) { wx.downloadFile({ url: '图片路径', success: function  { wx.hideLoading(); if (res.statusCode === 200) { var avaterSrc = res.tempFilePath; that.getQrCode(avaterSrc, cardInfo); }else{ wx.showToast({ title: '头像下载失败!', icon:'none', duration: 2000, success:function(){ that.getQrCode(avaterSrc = "", cardInfo);//回调另一个图片下载 } }) } } }) } else { wx.hideLoading(); that.getQrCode(avaterSrc = "", cardInfo);//回调另一个图片下载 } },

2.下载二维码二维码下载一样的道理,就是先下载完成,再进行绘图。

 getQrCode: function (avaterSrc, cardInfo) { wx.showLoading({ title: '生成中...', mask: true, }); var that = this; if (cardInfo.CardInfo.QrCode) { wx.downloadFile({ url: cardInfo.CardInfo.QrCode, success: function  { wx.hideLoading(); if (res.statusCode === 200) { var codeSrc = res.tempFilePath; that.sharePosteCanvas(cardInfo, avaterSrc, codeSrc);//真正的绘图方法 } else { wx.showToast({ title: '二维码下载失败!', icon: 'none', duration: 2000, success: function () { var codeSrc = ""; that.sharePosteCanvas(cardInfo, avaterSrc, codeSrc);//真正的绘图方法 } }) } } }) } else { wx.hideLoading(); var codeSrc = ""; that.sharePosteCanvas(cardInfo, avaterSrc, codeSrc);//真正的绘图方法 } },

3.绘制分享海报这里才是canvas实现绘制的过程

 sharePosteCanvas: function (cardInfo, avaterSrc, codeSrc) { wx.showLoading({ title: '生成中...', mask: true, }) var that = this; const ctx = wx.createCanvasContext('myCanvas'); var width = ""; wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function  { var height = rect.height; var right = rect.right; width = rect.width * 0.8; var left = rect.left   5; ctx.setFillStyle; ctx.fillRect(0, 0, rect.width, height); //头像 if (avaterSrc) { ctx.drawImage(avaterSrc, left, 20, width, width); ctx.setFontSize; ctx.setFillStyle; ctx.setTextAlign; } if (cardInfo.TagList.length > 0) { ctx.fillText(cardInfo.TagList[0].TagName, left   20, width - 4); //标签 const metrics = ctx.measureText(cardInfo.TagList[0].TagName); //测量文本信息 ctx.stroke(); ctx.rect(left   10, width - 20, metrics.width   40, 25); ctx.setFillStyle('rgba(255,255,255,0.4)'); ctx.fill(); } if (cardInfo.CardInfo.Name) { ctx.setFontSize; ctx.setFillStyle; ctx.setTextAlign; ctx.fillText(cardInfo.CardInfo.Name, left, width   60); //姓名 } if (cardInfo.CardInfo.Position) { ctx.setFontSize; ctx.setFillStyle; ctx.setTextAlign; ctx.fillText(cardInfo.CardInfo.Position, left, width   85); //职位 } if (cardInfo.CardInfo.Mobile) { ctx.setFontSize; ctx.setFillStyle; ctx.setTextAlign; ctx.fillText(cardInfo.CardInfo.Mobile, left, width   105); //电话 } if (cardInfo.CardInfo.Company) { // 公司名称 const CONTENT_ROW_LENGTH = 24; // 正文 单行显示字符长度 let [contentLeng, contentArray, contentRows] = that.textByteLength(cardInfo.CardInfo.Company, CONTENT_ROW_LENGTH); ctx.setTextAlign; ctx.setFillStyle; ctx.setFontSize; let contentHh = 22 * 1; for (let m = 0; m < contentArray.length; m  ) { ctx.fillText(contentArray[m], left, width   150   contentHh * m); } } // 绘制二维码cardInfo.CardInfo.QrCode if  { ctx.drawImage(codeSrc, left   150, width   40, width / 3, width / 3) ctx.setFontSize; ctx.setFillStyle; ctx.setTextAlign; ctx.fillText("微信扫码或长按识别", left   235, width   150); } }).exec() setTimeout(function () { ctx.draw(); 这里有个需要注意就是,这个方法是在绘制完成之后在调用,不然容易其它被覆盖。 wx.hideLoading(); }, 1000) },

4.多行显示文字这个函数就是需要多行显示文字的时候进行折行,就是切分为数组。

 textByteLength(text, num) { // text为传入的文本 num为单行显示的字节长度 let strLength = 0; // text byte length let rows = 1; let str = 0; let arr = []; for (let j = 0; j < text.length; j  ) { if (text.charCodeAt > 255) { strLength  = 2; if (strLength > rows * num) { strLength  ; arr.push(text.slice; str = j; rows  ; } } else { strLength  ; if (strLength > rows * num) { arr.push(text.slice; str = j; rows  ; } } } arr.push(text.slice(str, text.length)); return [strLength, arr, rows] // [处理文字的总字节长度,每行显示内容的数组,行数] },

5.保存绘制生成图片这一步就是最后把canvas生成图片了,大功告成。

 //点击保存到相册 saveShareImg: function () { var that = this; wx.showLoading({ title: '正在保存', mask: true, }) setTimeout(function () { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function  { wx.hideLoading(); var tempFilePath = res.tempFilePath; wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success { wx.showModal({ content: '图片已保存到相册,赶紧晒一下吧~', showCancel: false, confirmText: '好的', confirmColor: '#333', success: function  { if (res.confirm) { } }, fail: function  { } }) }, fail: function  { wx.showToast({ title: res.errMsg, icon: 'none', duration: 2000 }) } }) } }); }, 1000); },

2、利用小程序生成海报保存图片到相册分享到朋友圈,用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的

  

二 . 准备

 准备两张图片连接,最好是自己开发账号验证的https图片链接。

一、分析如何实现

 

三 . 实现思路

其实就是canvas实现方式,首先要就是定义一个canvas容器,把容器放在中间,图片也要动态计算大小居中,显示下面的文字和二维码也是要根据容器动态去改变,这就是大概的实现思路。

总结

 

一 . 效果

 这是借用女神照生成的分享的海报,图片来自网络。

分分快三计划 1里面的图片是百度找的,包括二维码

新增了poster组件和更新图片自适应

分分快三计划 2里面的图片是百度找的,包括二维码

三、实现步骤

 

这里举个例子说下如何绘制文字,比如我要绘制如下这个“字”,需要动态获取前面字数的总宽度,这样才能设置“字”的x轴坐标,这里我本来是想通过 measureText 来测量字体的宽度,但是在iOS端第一次获取的宽度值不对,关于这个问题,我还在微信开发者社区提了 bug ,所以我想用另一个方法来实现,就是先获取正常情况下一个字的宽度值,然后乘以总字数就获得了总宽度,亲试是可以的。

问题出来了,本地上测试没问题,远程调试也没问题,可以生成图片保存到手机

②创建好画布之后,先绘制背景图,因为背景图我是放在本地,所以获取

 

获取头像地址,首先量取头像在画布中的大小,和x轴Y轴的坐标,这里的result[0]是我用promise封装返回的一个图片地址

这是触发canvas的按钮

这里我具体写下围绕上面所提出的问题,描述大概实现的过程

 

wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function  { canvasToTempFilePath = res.tempFilePath // 返回的图片地址保存到一个全局变量里 that.setData({ showShareImg: true }) wx.showToast }, fail: function () { wx.showToast }, complete: function  wx.hideToast

 

let headImg = new Promise { wx.getImageInfo({ src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) })let avatarurl_width = 60, //绘制的头像宽度 avatarurl_heigth = 60, //绘制的头像高度 avatarurl_x = 28, //绘制的头像在画布上的位置 avatarurl_y = 36; //绘制的头像在画布上的位置 ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 前两个参数确定了圆心  坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针 ctx.arc(avatarurl_width / 2   avatarurl_x, avatarurl_heigth / 2   avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

       微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。

需求

<button class='inviteBtn' bindtap='createSharePic'>生成朋友圈分享图</button>、

⑤如何绘制小程序码,具体官网文档也给出生成无限 小程序码接口 ,通过生成的小程序可以打开任意一个小程序页面,并且二维码永久有效,具体调用哪个小程序二维码接口有不同的应用场景,具体可以看下官方文档怎么说的,也就是说前端通过传递参数调取后端接口返回的小程序码,然后绘制在画布上 ctx.drawImage('小程序码的本地地址', x轴, Y轴, 宽, 高)

  经过度娘后,得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。百度过几个好的demo,参考了一下,本以为会很简单就解决这个问题,然而这个并不是小程序canvas的难点!

③创建好背景图后,在背景图上绘制头像,文字和数字。通过 getImageInfo 获取头像的信息,这里需要注意下在获取的网络图片要先配置download域名才能生效,具体在小程序后台设置里配置。

总结:

let allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length   325;ctx.font = 'normal normal 30px sans-serif';ctx.setFillStylectx.fillText;

  网络图片不显示(我用网络图片时,是不显示,不确定这个问题是我的操作问题还是小程序的限制,希望大佬们可以给我个肯定的结论)

二、需要解决的问题

  小程序canvas不好控制,写样式时用rpx,canvas用px;

组件 canvas-id 属性,通过 createCanvasContext 创建canvas的绘图上下文 CanvasContext 对象。使用 drawImage 绘制图像到画布,第一个参数是图片的本地地址,后面两个参数是图像相对画布左上角位置的x轴和y轴,最后两个参数是设置图像的宽高。

  settext: function (context) {
    let _this = this;
    var size  = _this.setCanvasSize();
    var text  = "长按识别小程序";
    context.setFontSize(12);
    context.setTextAlign("center");
    context.setFillStyle("#000");
    context.fillText(text, size.w / 2, size.h * 0.90);
    context.stroke();
  },

以上所述是小编给大家介绍的微信小程序生成海报分享朋友圈的实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

 分分快三计划 3

// 获取用户是否开启用户授权相册 if  { wx.openSetting => { if  { if (result.authSetting["scope.writePhotosAlbum"] === true) { openStatus = true; wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } } }, fail: () => { }, complete: ; } else { wx.getSetting { // 如果没有则获取授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) }, fail() { // 如果用户拒绝过或没有授权,则再次打开授权窗口 openStatus = false console.log wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) } else { // 有则直接保存 openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } }, fail { console.log }

分分快三计划 4

相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成海报,其实当时我也是不知道如何下手,认真想了下得通过canvas绘制成图片,这样用户保存这个图片到相册,就可以分享到朋友圈了。但是要绘制的图片上面不仅有文字还有数字、图片、二维码等且都是活的,这个要怎么动态生成呢。认真想了下,需要一点一点的将文字和数字,背景图绘制到画布上去,这样通过api最终合成一个图片导出到手机相册中。

 

利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。

 

至此所有的步骤都已实现,在绘制的时候会遇到一些异步请求后台返回的数据,所以我用promise和async和await进行了封装,确保导出的图片信息是完整的。在绘制的过程确实遇到一些坑的地方。比如初开始导出的图片比例大小不对,还有用measureText测量文字宽度不对,多次绘制有时导出的图片上的文字颜色会有误差等。如果你也遇到一些比较坑的地方可以一起探讨下做个记录,下面附下完整的代码

createNewImg: function () {
    var _this       = this;
    var size        = _this.setCanvasSize();
    var context     = wx.createCanvasContext('myCanvas');
    var path        = "/assets/images/qrshare1.jpg";  //测试的图片
    var imageQrCode = _this.data.filePath;       //二维码
    context.drawImage(path, 0, 0, size.w, size.h);
    context.drawImage(imageQrCode, size.w / 2 - 55, size.h * 0.55, size.w * 0.33, size.w * 0.33);
    this.settext(context);
    //绘制图片
    context.draw();
    //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
    wx.showToast({
      title   : '生成中...',
      icon    : 'loading',
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success : function (res) {
          var tempFilePath = res.tempFilePath;
          _this.setData({
            imagePath   : tempFilePath,
          });

          var img  = _this.data.imagePath;
          let urls = []
          urls.push(img, '二维码路径')   //二维码路径是为了用户也可以保存二维码,分享到朋友圈有合成的图片也有二维码(参考拉钩小程序分享)
          wx.previewImage({
            current: img,  // 当前显示图片的http链接
            urls   : urls  // 需要预览的图片http链接列表
          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
  },

总结

  绘制长按识别二维码

④绘制公众号二维码,和获取头像是一样的,也是先通过接口返回图片网络地址,然后再通过 getImageInfo 获取公众号二维码图片信息

  <view class='canvas-box'>
    <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
    <image src='{{imagePath}}'></image>  
  </view>

⑥最终绘制完把canvas画布转成图片并返回图片地址

  要在微信后台设置downloand下载域名(我这里用了下载后绘制的方法,如果大家有不用下载的方法,望告知!谢谢)

4、处理用户是否取消授权保存到相册

纳闷了一会之后,我发现自己没有后台添加download的下载域名。因为平时在本地的都是勾选了不检查域名。所以在这纳闷了很久!!!!!!!

项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。

本来我是直接绘制网络图片的,但是在真机上,网络图片不显示!于是百度了一下,可以先下载,接口返回的图片再绘制

3、将绘制完成的图片保存到本地相册

//生成朋友圈图片
  createSharePic() {
    let _this = this,
        qrcode= _this.data.qrcode
    wx.downloadFile({
      url    : qrcode,
      success: function (res) {
        if (res.statusCode === 200) {
          _this.setData({
            filePath: res.tempFilePath,
          })
          _this.createNewImg();
        }
      }
    })

  }

1、二维码的动态获取和绘制(包括如何生成小程序二维码、公众号二维码、打开网页二维码)

  WXML

ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085)

import regeneratorRuntime from '../../utils/runtime.js' // 引入模块const app = getApp(), api = require('../../service/http.js');var ctx = null, // 创建canvas对象 canvasToTempFilePath = null, // 保存最终生成的导出的图片地址 openStatus = true; // 声明一个全局变量判断是否授权保存到相册// 获取微信公众号二维码 getCode: function () { return new Promise(function  { api.fetch('/wechat/open/getQRCodeNormal', 'GET').then(res => { console.log if  { console.log(res.content, 'codeUrl') resolve.catch(err => { console.log }, // 生成海报 async createCanvasImage() { let that = this; // 点击生成海报数据埋点 that.setData({ generateId: '点击生成海报' }) if  { let codeUrl = await that.getCode() wx.showLoading let code = new Promise { wx.getImageInfo({ src: codeUrl, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) }) let headImg = new Promise { wx.getImageInfo({ src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) }) Promise.all.then { const ctx = wx.createCanvasContext console.log(ctx, app.globalData.ratio, 'ctx') let canvasWidthPx = 690 * app.globalData.ratio, canvasHeightPx = 1085 * app.globalData.ratio, avatarurl_width = 60, //绘制的头像宽度 avatarurl_heigth = 60, //绘制的头像高度 avatarurl_x = 28, //绘制的头像在画布上的位置 avatarurl_y = 36, //绘制的头像在画布上的位置 codeurl_width = 80, //绘制的二维码宽度 codeurl_heigth = 80, //绘制的二维码高度 codeurl_x = 588, //绘制的二维码在画布上的位置 codeurl_y = 984, //绘制的二维码在画布上的位置 wordNumber = that.data.wordNumber, // 获取总阅读字数 // nameWidth = ctx.measureText.width, // 获取总阅读字数的宽度 // allReading =  - 325) * 2   380; // allReading = nameWidth / app.globalData.ratio   325; allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length   325; console.log(wordNumber, wordNumber.toString().length, allReading, '获取总阅读字数的宽度') ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085) ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 前两个参数确定了圆心  坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针 ctx.arc(avatarurl_width / 2   avatarurl_x, avatarurl_heigth / 2   avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片 ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制 ctx.setFillStyle; // 文字颜色 ctx.setFontSize; // 文字字号 ctx.fillText(that.data.currentChildren.name, 103, 78); // 绘制文字 ctx.font = 'normal bold 44px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制文字 ctx.font = 'normal normal 30px sans-serif'; ctx.setFillStyle ctx.fillText; ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制文字 ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.percent, 154, 190); // 绘制孩子百分比 ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制孩子百分比 ctx.font = 'normal bold 32px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.singIn, 50, 290); // 签到天数 ctx.fillText(that.data.reading, 280, 290); // 阅读时长 ctx.fillText(that.data.reading, 508, 290); // 听书时长 // 书籍阅读结构 ctx.font = 'normal normal 28px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.bookInfo[0].count, 260, 510); ctx.fillText(that.data.bookInfo[1].count, 420, 532); ctx.fillText(that.data.bookInfo[2].count, 520, 594); ctx.fillText(that.data.bookInfo[3].count, 515, 710); ctx.fillText(that.data.bookInfo[4].count, 492, 828); ctx.fillText(that.data.bookInfo[5].count, 348, 858); ctx.fillText(that.data.bookInfo[6].count, 212, 828); ctx.fillText(that.data.bookInfo[7].count, 148, 726); ctx.fillText(that.data.bookInfo[8].count, 158, 600); ctx.font = 'normal normal 18px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.bookInfo[0].name, 232, 530); ctx.fillText(that.data.bookInfo[1].name, 394, 552); ctx.fillText(that.data.bookInfo[2].name, 496, 614); ctx.fillText(that.data.bookInfo[3].name, 490, 730); ctx.fillText(that.data.bookInfo[4].name, 466, 850); ctx.fillText(that.data.bookInfo[5].name, 323, 878); ctx.fillText(that.data.bookInfo[6].name, 184, 850); ctx.fillText(that.data.bookInfo[7].name, 117, 746); ctx.fillText(that.data.bookInfo[8].name, 130, 621); ctx.drawImage(result[1], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth); // 绘制头像 ctx.draw { // canvas画布转成图片并返回图片地址 wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function  { canvasToTempFilePath = res.tempFilePath that.setData({ showShareImg: true }) console.log(res.tempFilePath, 'canvasToTempFilePath') wx.showToast }, fail: function () { wx.showToast }, complete: function  wx.hideToast } }, // 保存到系统相册 saveShareImg: function () { let that = this; // 数据埋点点击保存学情海报 that.setData // 获取用户是否开启用户授权相册 if  { wx.openSetting => { if  { if (result.authSetting["scope.writePhotosAlbum"] === true) { openStatus = true; wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } } }, fail: () => { }, complete: ; } else { wx.getSetting { // 如果没有则获取授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) }, fail() { // 如果用户拒绝过或没有授权,则再次打开授权窗口 openStatus = false console.log wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) } else { // 有则直接保存 openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } }, fail { console.log } },

const ctx = wx.createCanvasContext

需求分析

1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序

⑦保存到系统相册;先判断用户是否开启用户授权相册,处理不同情况下的结果。比如用户如果按照正常逻辑授权是没问题的,但是有的用户如果点击了取消授权该如何处理,如果不处理会出现一定的问题。所以当用户点击取消授权之后,来个弹框提示,当它再次点击的时候,主动跳到设置引导用户去开启授权,从而达到保存到相册分享朋友圈的目的。

①首先创建canvas画布,我把画布定位设成负的,是为了不让它显示在页面上,是因为我尝试把canvas通过判断条件动态的显示和隐藏,在绘制的时候会出现问题,所以采用了这种方法,这里还有一定要设置画布的大小。

``

实现方案

本文由分分快三计划发布,转载请注明来源

关键词: 朋友圈 程序 图片 脚本 之家