html
{{item.title_name}}
一键发圈
{{item}}
复制
css
/**index.wxss**/
.container{
width: 100%;
margin: 0 auto;
background: rgb(221,221,221);
}
.list{
width:90%;
padding: 0 5%;
background: #fff;
}
.title{
width: 100%;
height:60rpx;
padding-top: 5%;
}
.logo{
display: block;
float: left;
width: 60rpx;
height:60rpx;
}
.title_name{
display: block;
float: left;
margin-left: 50rpx;
color: #000;
height: 60rpx;
line-height: 60rpx;
font-size: 30rpx;
text-align: center;
font-weight: bolder;
}
.btn{
float: right;
width:180rpx;
height:60rpx;
line-height: 60rpx;
background: #111;
border-radius:50rpx;
color: #fff;
text-align: center;
}
.list_content{
width: 80%;
padding: 3% 10%;
padding-bottom: 3%;
margin-bottom: 3%
}
.context{
display: block;
font-size: 26rpx;
color: #444
}
.copy{
display: block;
color: rgb(113,164,206);
font-size: 26rpx;
}
.contimg{
width: 100%;
margin-top: 3%;
overflow: hidden;
}
.contimg>view{
float: left;
width: 32%;
height:32%;
margin-bottom: 2%;
text-align: center;
}
.contimg>view:nth-child(3n+2){
margin: 0 2%;
margin-bottom: 2%;
}
.cont_images{
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
background-size: cover;
background-position: center;
}
.canvas{
position: fixed;
top: 200%;
left: 0;
width: 100%;
height: 100%;
}
js
//获取应用实例
const app = getApp()
Page({
data: {
imglist: [
]
},
//事件处理函数 保存图片
download(e) {
var that = this;
let index = e.currentTarget.dataset.index;
that.getsave(0, that.data.imglist[index].imgarr.length, index);
that.textPaste(index)
},
getsave(i, length, index) {
var that = this;
that.setData({
canvasWidth: that.data.imglist[index].imgarr[i].width,
canvasHeight: that.data.imglist[index].imgarr[i].height
})
wx.showLoading({
title: '下载中(' + (i + 1) + '/' + length + ')',
})
const downloadTask = wx.downloadFile({
url: this.data.imglist[index].imgarr[i].img_url,
success: (res) => {
let ctx = wx.createCanvasContext('firstCanvas');
console.log(res)
// 解决背景图尺寸不一致，导致绘制上去的logo变小问题（根本原因：绘制图尺寸与画布css尺寸不一致）
let scal = that.data.imglist[index].imgarr[i].height / that.data.imglist[index].imgarr[i].width;
if (scal>1){
scal = 1;
}else{
scal = that.data.imglist[index].imgarr[i].height / that.data.imglist[index].imgarr[i].width;
}
console.log(scal)
ctx.drawImage(res.tempFilePath, 0, 0, that.data.imglist[index].imgarr[i].width, that.data.imglist[index].imgarr[i].height);
//绘制logo图片时，带域名的图片会涉及到跨域问题，所以最好是使用本地图片或者将图片转为base64的格式
ctx.drawImage('../../images/logos.png', that.data.imglist[index].imgarr[i].width - 150 * scal, that.data.imglist[index].imgarr[i].height - 60 * scal, 122 * scal, 29 * scal);
ctx.draw(false, function() {
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (ressss) => {
wx.saveImageToPhotosAlbum({
filePath: ressss.tempFilePath,
success: (res) => {
if (i + 1 == length) {
wx.showToast({
title: '保存成功',
});
}
wx.hideLoading()
if (++i < length) {
that.getsave(i, length, index);//回调函数里无法直接用this
}
},
fail: (err) => {
wx.showToast({
title: '保存图片失败',
icon: 'none',
})
},
})
},
fail: (e) => {
console.log(e)
}
})
})
},
})
// 下载进度
downloadTask.onProgressUpdate((res) => {
if (res.progress > 0) {
this.setData({
schedule: true,
percent: res.progress
})
}
if (res.progress == 100) {
this.setData({
schedule: false
})
}
})
},
// 复制
textPaste(index) {
let idx = index;
wx.showToast({
title: '复制成功',
})
var text = this.data.imglist[idx].content;
var str = '';
for (var i = 0; i < text.length; i++) {
str += text[i] + ' \n'
}
wx.setClipboardData({
data: str,
success: function(res) {
wx.getClipboardData({ //这个api是把拿到的数据放到电脑系统中的
success: function(res) {
console.log(res.data) // data
}
})
}
})
},
// 复制
copy(e) {
let idx = e.currentTarget.dataset.index;
wx.showToast({
title: '复制成功',
})
var text = this.data.imglist[idx].content;
var str = '';
for (var i = 0; i < text.length; i++) {
str += text[i] + ' \n'
}
wx.setClipboardData({
data: str,
success: function(res) {
wx.getClipboardData({ //这个api是把拿到的数据放到电脑系统中的
success: function(res) {
console.log(res.data) // data
}
})
}
})
},
onLoad: function (options) {
var scene = decodeURIComponent(options.scene)
console.log(scene)
var that = this;
wx.request({
url: ' ',
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res)
that.setData({
imglist: res.data
})
}
})
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
