微信小程序之生成海报 保存相册，转发好友

wxml：

<!-- footer -->

<view class="s_foot">

<view class="s_simg">

<button open-type="share">

<image class="s_image" src="../../images/icon_share.png"></image>

<text class="s-text">分享给好友</text>

</button>

</view>

<view class="s_simg1 s_simg" bindtap='formSubmit'>

<button>

<image class="s_image" src="../../images/picture1.png"></image>

<text class="s-text s-text1">生成海报</text>

</button>

</view>

</view>

<!-- 生成海报 -->

<view>

<view class='imagePathBox' hidden="{{maskHidden == false}}">

<image src="{{imagePath}}" class='shengcheng'></image>

<button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>

</view>

<view hidden="{{maskHidden == false}}" class="mask"></view>

<view class="canvas-box">

<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />

</view>

</view>

wxss样式：

 

/* 底部 */

 

.s_foot {

display: flex;

position: fixed;

bottom: 0;

height: 100rpx;

width: 100%;

line-height: 100rpx;

background-color: #fff;

box-shadow: 0px -10rpx 26rpx 1px rgba(0, 0, 0, 0.13);

}

 

.s_image {

display: inline-block;

width: 40rpx;

height: 40rpx;

position: relative;

left: -30%;

}

 

.s_simg {

width: 45%;

margin: 10rpx 30rpx;

border: 2rpx solid rgba(234, 149, 24, 1);

border-radius: 10rpx;

}

 

.s_simg button {

background-color: transparent;

}

 

.s-text {

padding: 0 20rpx;

font-size: 26rpx;

font-family: PingFang SC;

font-weight: 500;

color: rgba(233, 148, 24, 1);

text-align: center;

position: absolute;

left: 35%;

bottom: 20rpx;

}

 

.s_simg1 {

background: rgba(234, 149, 24, 1);

border-radius: 10rpx;

}

 

.s-text1 {

color: #fff;

}

 

/* 生成海报样式 */

 

.imagePathBox {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.7);

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 10;

}

 

.shengcheng {

width: 90%;

height: 75%;

position: fixed;

top: 110rpx;

left: 50%;

margin-left: -45%;

z-index: 10;

box-shadow: 0px 10px 26rpx 1px rgba(0, 0, 0, 0.2);

border-radius: 10rpx;

}

 

.baocun {

display: block;

width: 90%;

height: 98rpx;

padding: 0;

line-height: 98rpx;

text-align: center;

position: fixed;

bottom: 50rpx;

left: 5%;

background: #ea9518;

color: #fff;

font-size: 24rpx;

font-family: PingFang SC;

font-weight: 500;

box-shadow: 0px -10px 26rpx 1px rgba(0, 0, 0, 0.13);

border-radius: 10rpx;

}

 

button[class="baocun"]::after {

border: 0;

}

js:

* 页面的初始数据

*/

data: {

play: '../../images/icon-play.png',

shareimg:'../../images/share.png',

maskHidden: false,

example: [],

egvido: {

videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', //视频路径

coverUrl: '../../images/i_cover.png', //视频封面图

english: 'All the bright precious things fade so fast...andthey do not come back.',

english1: 'so fast...andthey do not come back.',

chinese: '所有的光鲜亮丽都敌不过时间，并且一去不复返。',

loop: 'true',

},

 

// 生成海报

img: "../../images/s_head1.png",

wechat: "../../images/s_head2.png",

quan: "../../images/s_head1.png",

imagePath: '',

inputValue: "",

name: "",

touxiang: "",

nowDate: '',

},

// 生 成 海报

//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src

createNewImg: function () {

var that = this;

var context = wx.createCanvasContext('mycanvas');

context.setFillStyle("#ffffff")

context.fillRect(0, 0, 375, 667)

// var path = "../../../images/s_head1.png";

//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片

//不知道是什么原因，手机环境能正常显示

// context.drawImage(path, 0, 0, 375, 183);

var avatarUrl = that.data.touxiang;

console.log(avatarUrl, "avatarUrl")

var code = "../../images/code.png";

var name = that.data.name;

var english = that.data.egvido.english;

var english1 = that.data.egvido.english1;

var coverUrl = that.data.egvido.coverUrl;

var chinese = that.data.egvido.chinese;

var datetime = that.data.datetime;

var play = that.data.play;

var nowDate = that.data.nowDate;

//超出换行

//绘制名字

context.setFontSize(24);

context.setFillStyle('#333333');

context.setTextAlign('center');

context.fillText(name, 120, 80);

context.stroke();

//绘制时间

context.setFontSize(14);

context.setFillStyle('#000000');

context.setTextAlign('right');

context.fillText(nowDate, 350, 80);

context.stroke();

//绘制视频默认图片

context.drawImage(coverUrl, 20, 115, 335, 250);

//绘制播放按钮

context.drawImage(play, 160, 220, 60, 60);

//绘制英语意思

context.setFontSize(18);

context.setFillStyle('#000000');

context.setTextAlign('center');

context.fillText(english, 185, 415);

context.stroke();

//绘制英语意思

context.setFontSize(18);

context.setFillStyle('#000000');

context.setTextAlign('center');

context.fillText(english1, 185, 450);

context.stroke();

//绘制视频播放按钮

// context.drawImage(play, 136, 196, 100, 100);

//绘制汉语翻译

context.setFontSize(14);

context.setFillStyle('#000000');

context.setTextAlign('center');

context.fillText(chinese, 185, 490);

context.stroke();

//绘制二维码

context.drawImage(code, 145, 535, 80, 80);

//绘制下方文字

context.setFontSize(14);

context.setFillStyle('#000');

context.setTextAlign('center');

context.fillText("长按识别二维码观看", 185, 640);

context.stroke();

//绘制头像

context.arc(50, 70, 25, 0, 2 * Math.PI) //画出圆

// context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆

context.strokeStyle = "#fff";

context.clip(); //裁剪上面的圆形

context.drawImage(avatarUrl, 0, 20, 80, 80); // 在刚刚裁剪的园上画图

// context.drawImage(avatarUrl, 136, 196, 100, 100); // 在刚刚裁剪的园上画图

context.draw();

//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时

setTimeout(function () {

wx.canvasToTempFilePath({

canvasId: 'mycanvas',

success: function (res) {

var tempFilePath = res.tempFilePath;

that.setData({

imagePath: tempFilePath,

canvasHidden: true

});

},

fail: function (res) {

console.log(res);

}

});

}, 200);

},

//点击保存到相册

baocun: function () {

var that = this

wx.saveImageToPhotosAlbum({

filePath: that.data.imagePath,

success(res) {

wx.showModal({

content: '图片已保存到相册，赶紧晒一下吧~',

showCancel: false,

confirmText: '好的',

confirmColor: '#333',

success: function (res) {

if (res.confirm) {

console.log('用户点击确定');

/* 该隐藏的隐藏 */

that.setData({

maskHidden: false

})

}

}, fail: function (res) {

console.log(11111)

}

})

}

})

},

 

//点击生成

formSubmit: function (e) {

var that = this;

this.setData({

maskHidden: false

});

wx.showToast({

title: '生成中...',

icon: 'loading',

duration: 1000

});

setTimeout(function () {

wx.hideToast()

that.createNewImg();

that.setData({

maskHidden: true

});

}, 1000)

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

var that = this;

wx.getUserInfo({

success: res => {

console.log(res.userInfo, "huoqudao le ")

this.setData({

name: res.userInfo.nickName,

})

wx.downloadFile({

url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源

success: function (res) {

// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容

if (res.statusCode === 200) {

console.log(res, "reererererer")

that.setData({

touxiang: res.tempFilePath

})

}

}

})

}

})

},