铁雪资源网 Design By www.gsvan.com

微信小程序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);
 }
}

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

标签:
微信小程序canvas分享海报,微信小程序分享海报,微信小程序canvas海报

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“微信小程序canvas分享海报功能”

暂无微信小程序canvas分享海报功能的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?