<template>
<div>
<canvas canvas-id="shareCanvas"
:style="{width:width+'px',height:height}">
</canvas>
<!-- <button @click="test">保存图片到手机相册</button> -->
</div>
</template>
<script>
// https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742274&di=5497f461b1a60344f896498712586e7c&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F04543555484f5a0000019ae9ceafb9.jpg
// https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742270&di=8efd74b4992000bde9dfe10431499406&imgtype=0&src=http%3A%2F%2Fimages.movie.xunlei.kankan.com%2Fgallery%2F1454%2Fa81c449bf9860b5638021cf906019686.jpg
// https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742269&di=36e1084ee4ec6d4b2314cf3422db46b8&imgtype=0&src=http%3A%2F%2Fdata.whicdn.com%2Fimages%2F157788811%2Flarge.jpg
// https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742269&di=fb8e324d0fb91200af7e14cb7f1c5cbe&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1312%2F05%2F3944596_2917_thumb.jpg
// http://img5.duitang.com/uploads/item/201312/05/20131205172503_Q5ivC.jpeg
export default {
name: 'Vip',
data () {
return {
imgUrl: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742274&di=5497f461b1a60344f896498712586e7c&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F04543555484f5a0000019ae9ceafb9.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742270&di=8efd74b4992000bde9dfe10431499406&imgtype=0&src=http%3A%2F%2Fimages.movie.xunlei.kankan.com%2Fgallery%2F1454%2Fa81c449bf9860b5638021cf906019686.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742269&di=36e1084ee4ec6d4b2314cf3422db46b8&imgtype=0&src=http%3A%2F%2Fdata.whicdn.com%2Fimages%2F157788811%2Flarge.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547528742269&di=fb8e324d0fb91200af7e14cb7f1c5cbe&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1312%2F05%2F3944596_2917_thumb.jpg'
],
width: wx.getSystemInfoSync().windowWidth,
height: "1000rpx"
}
},
mounted () {
const that = this
function getImageInfoMethods (_getimgUrl) {
console.log(_getimgUrl)
return new Promise((relove, reject) => {
wx.getImageInfo({
src: _getimgUrl,//服务器返回的带参数的小程序码地址
success: function (res) {
//res.path是网络图片的本地地址
relove(res)
}
})
})
}
async function imgInfo (imgUrl) {
const leng = imgUrl.length
let _imgInfo = []
for (let i = 0; i < leng; i++) {
console.log(i)
await getImageInfoMethods(imgUrl[i]).then(res => {
console.log(res)
_imgInfo.push(res)
})
if (i === leng - 1) {
return _imgInfo
}
}
}
// function imgInfo (imgUrl) {
// return new Promise((relove, reject) => {
// const leng = imgUrl.length
// let _imgInfo = []
// for (let i = 0; i < leng; i++) {
// wx.getImageInfo({
// src: imgUrl[i],//服务器返回的带参数的小程序码地址
// success: function (res) {
// //res.path是网络图片的本地地址
// _imgInfo.push(res)
// if (i === leng - 1) {
// relove(_imgInfo)
// }
// }
// })
// }
// })
// }
imgInfo(this.imgUrl).then(res => {
res.map(a => {
//保存到手机相册
wx.saveImageToPhotosAlbum({
filePath: a.path,
success: res => {
console.log(res)
}
})
})
// console.log(that.width)
// console.log(res.length)
// //that.height = Math.ceil(res[0].width + 30)
// const ctx = wx.createCanvasContext('shareCanvas')
// res.map((a, index) => {
// if (index === 0) {
// ctx.drawImage(a.path, that.width * 5 / 100, that.width * 5 / 100, that.width * 9 / 10, that.width * 9 / 10)
// } else {
// ctx.drawImage(a.path, 0, 0, 50, 50)
// }
// })
// ctx.draw()
})
// wx.getImageInfo({
// src: this.imgUrl[0],//服务器返回的带参数的小程序码地址
// success: function (res) {
// //res.path是网络图片的本地地址
// console.log(res)
// const ctx = wx.createCanvasContext('shareCanvas')
// ctx.drawImage(res.path, 0, 0, 250, 250)
// ctx.stroke()
// ctx.draw()
// console.log(ctx)
// const that = this
// setTimeout(function () {
// wx.canvasToTempFilePath({
// x: 0,
// y: 0,
// width: 200,
// height: 370,
// destWidth: 1035,
// destHeight: 1560,
// canvasId: 'shareCanvas',
// success: function (res) {
// console.log(res, '保存')
// //保存到手机相册
// wx.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success: res => {
// console.log(res)
// }
// })
// }
// })
// }, 1000)
// },
// fail: function (res) {
// //失败回调
// }
// })
// const wxGetImageInfo = promisify(wx.getImageInfo)
// wxGetImageInfo({
// src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547479899359&di=ae20a7ea6e35a4817426ec35e9470d7e&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F07%2F20141107164412_v284V.jpeg'
// }).then(res => {
// const ctx = wx.createCanvasContext('shareCanvas')
// ctx.drawImage(res.path, 0, 0, 600, 900)
// ctx.draw()
// })
// const wxGetImageInfo = promisify(wx.getImageInfo)
// wxGetImageInfo({
// src: 'http://some-domain/bg.png'
// }).then(res => {
// const ctx = wx.createCanvasContext('shareCanvas')
// // 底图
// ctx.drawImage(res.path, 0, 0, 600, 900)
// // 作者名称
// ctx.setTextAlign('center') // 文字居中
// ctx.setFillStyle('#000000') // 文字颜色：黑色
// ctx.setFontSize(22) // 文字字号：22px
// ctx.fillText('作者：xcq', 600 / 2, 500)
// ctx.stroke()
// ctx.draw()
// })
// const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath)
// const wxSaveImageToPhotosAlbum = promisify(wx.saveImageToPhotosAlbum)
// wxCanvasToTempFilePath({
// canvasId: 'shareCanvas'
// }, this).then(res => {
// return wxSaveImageToPhotosAlbum({
// filePath: res.tempFilePath
// })
// }).then(res => {
// wx.showToast({
// title: '已保存到相册'
// })
// })
}
}
</script>