小程序生成海报并保存到相册
留存一下
wxml
<view bindtap='formSubmit'>点击生成商品海报</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>
wxss
/* 生成海报的css */
.bgImg{
display: block;
width: 100%;
height: 366rpx;
}
.mine{
display: block;
text-align: center;
color: #333;
margin-top: 44rpx;
}
.code{
display: block;
text-align: center;
color: #333;
font-size: 76rpx;
font-weight: bold;
margin-top: 30rpx;
}
.who{
display: block;
margin-top: 80rpx;
font-size: 32rpx;
color: #333;
text-align: center;
}
.inputBox{
text-align: center;
margin-top: 44rpx;
}
.input{
text-align: center;
width: 440rpx;
height: 88rpx;
border-radius: 44rpx;
background: #f5f5f5;
font-size: 32rpx;
display: inline-block;
}
.btn{
width: 160rpx;
height: 88rpx;
border-radius: 44rpx;
background:linear-gradient(90deg,rgba(255,226,0,1),rgba(255,200,11,1));
box-shadow: 0px 4px 8px 0px rgba(255,200,11,0.5);
color:#333;
font-size: 32rpx;
display: inline-block;
line-height: 88rpx;
margin-left: 40rpx;
}
button[class="btn"]::after {
border: 0;
}
.tishi{
display: block;
text-align: center;
color: #999;
margin-top: 30rpx;
}
.shareText{
display: block;
text-align: center;
color: #333;
font-size: 28rpx;
margin-top: 100rpx;
}
.imgBox{
text-align: center;
width: 100%;
margin-top:60rpx;
padding-bottom: 120rpx;
}
.img{
display: inline-block;
width: 100%;
height: 100%;
}
.m_l{
margin-left: 180rpx;
}
.zfbtn{
display: inline-block;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: transparent;
outline: none;
border: 0;
padding: 0;
}
button[class="zfbtn"]::after {
border: 0;
}
button[class="zfbtn m_l"]::after {
border: 0;
}
.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: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left:10%;
z-index: 10;
}
.baocun{
display: block;
width: 80%;
height: 80rpx;
padding: 0;
line-height: 80rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 25%;
background: #E02020;
color: #333;
font-size: 32rpx;
border-radius: 44rpx;
}
button[class="baocun"]::after{
border: 0;
}
wx.js
// 海报上
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
createNewImg: function () {
var that = this;
var context = wx.createCanvasContext('mycanvas');
context.setFillStyle("#fff")
context.fillRect(0, 0, 375, 667)
var path = "/images/c2.jpg";
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
//不知道是什么原因，手机环境能正常显示
context.drawImage(path, 60, 50, 250, 250); //上面的方框
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片 c2.jpg
// var path2 = "/images/c2.jpg";
// var path3 = "/images/c2.jpg";
// var path4 = "/images/c2.jpg";
// var path5 = "/images/c2.jpg";
// context.drawImage(path2, 126, 186, 120, 120);
//不知道是什么原因，手机环境能正常显示
// context.save(); // 保存当前context的状态
//绘制名字
var nameqian = that.data.nameqian;
context.setFontSize(18);
context.setFillStyle('#333333');
context.setTextAlign('center');
context.fillText(nameqian, 185, 340);
context.stroke();
//绘制一起吃面标语
var namehou = that.data.namehou
context.setFontSize(18);
context.setFillStyle('#333333');
context.setTextAlign('center');
context.fillText(namehou, 185, 370);
context.stroke();
//绘制验证码背景
// context.drawImage(path3, 48, 390, 280, 84);
//绘制价钱
context.setFontSize(24);
context.setFillStyle('#E02020');
context.setTextAlign('center');
context.fillText( '￥' + that.data.jiaqian, 85, 435);
context.stroke();
//绘制 返积分
context.setFontSize(20);
context.setFillStyle('#FB7217');
context.setTextAlign('center');
context.fillText( '返积分', 185, 433);
context.stroke();
//绘制 邀请码
context.setFontSize(20);
context.setFillStyle('#202020');
context.setTextAlign('center');
context.fillText( '邀请码 : ' + that.data.code, 175, 620);
context.stroke();
//绘制圆形二维码
var path1 = "/images/c2.jpg";
context.arc(186, 510, 50, 0, 1.9 * Math.PI) //画出圆
context.strokeStyle = "#ffe200";
context.clip(); //裁剪上面的圆形
context.drawImage(path1, 136, 460, 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)
},
// 海报下
