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

2023-08-10 02:14:04 468

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

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

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

话不多说，直接上代码

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

wxml

生成海报

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

组件wxml









保存图片

组件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:100rpxauto0;
}
.canvas-box{
width:660rpx;
height:750rpx;
background:#fff;
}
.save-img{
width:660rpx;
height:100rpx;
margin:30rpxauto0;
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
});
varthat=this;
that.setData({
isflag:true
})
varproductImage=that.data.bigImg;
if(productImage){
wx.downloadFile({
url:productImage,
success:function(res){
wx.hideLoading();
if(res.statusCode===200){
varproductSrc=res.tempFilePath;
that.calculateImg(productSrc,function(data){
that.getQrCode(productSrc,data);
})
}else{
that.toast('产品图片下载失败！',()=>{
varproductSrc="";
that.getQrCode(productSrc);
})
}
},
fail:function(err){
wx.hideLoading();
that.toast('请求失败，网络错误',()=>{
that.closePoster()
})
}
})
}else{
wx.hideLoading();
varproductSrc="";
that.getQrCode(productSrc);
}
},

//下载二维码
getQrCode:function(productSrc,imgInfo=""){
wx.showLoading({
title:'生成中...',
mask:true,
});
varthat=this;
varproductCode=that.data.qrcode;
if(productCode){
wx.downloadFile({
url:productCode,
success:function(res){
wx.hideLoading();
if(res.statusCode===200){
varcodeSrc=res.tempFilePath;
that.sharePosteCanvas(productSrc,codeSrc,imgInfo);
}else{
that.toast('二维码下载失败！',()=>{
varcodeSrc="";
that.sharePosteCanvas(productSrc,codeSrc,imgInfo);
})
}
},
fail:function(){
wx.hideLoading();
that.toast('请求失败，网络错误',()=>{
that.closePoster()
})
}
})
}else{
wx.hideLoading();
varcodeSrc="";
that.sharePosteCanvas(productSrc,codeSrc);
}
},

//canvas绘制分享海报
sharePosteCanvas:function(avaterSrc,codeSrc,imgInfo){
wx.showLoading({
title:'生成中...',
mask:true,
})
varthat=this;
constctx=wx.createCanvasContext('myCanvas',that);
varwidth="";
constquery=wx.createSelectorQuery().in(this);
query.select('#canvas-container').boundingClientRect(function(rect){
varwidth=rect.width;
varheight=rect.height;
varleft=rect.left;
ctx.setFillStyle('#fff');
ctx.fillRect(0,0,width,height);

//海报大图
if(avaterSrc){
if(imgInfo){
varimgheght=parseFloat(imgInfo);
}
ctx.drawImage(avaterSrc,0,0,width,imgheght?imgheght:width);
ctx.setFontSize(14);
ctx.setFillStyle('#fff');
ctx.setTextAlign('left');
}

//海报标题
if(that.data.title){
constCONTENT_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);
letcontentHh=22*1;
for(letm=0;m255){
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){
varthat=this;
wx.getSystemInfo({
success(res2){
varimgHeight=(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();
}elseif(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(){
varthat=this;
wx.showLoading({
title:'正在保存',
mask:true,
})
setTimeout(function(){
wx.canvasToTempFilePath({
canvasId:'myCanvas',
success:function(res){
vartempFilePath=res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath:tempFilePath,
success(){//保存
wx.hideLoading()
that.toast('图片保存成功',()=>{
that.closePoster();
})
},
fail:function(err){//取消保存
wx.hideLoading()
that.toast('保存失败')
}
})
}
},that);
},1000);
}
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐