主要的坑：
1.網絡圖片要下載到本地，就是getimginfo和promise，具體技術細節我也不曉得。然後就是本地圖片的地址和網絡圖片的地址不同。本地的要加../../images/+res[0].path，而網絡的直接是res[0].path。本機調試看不出來，用真機調試比較容易發現問題。
2.畫布的位置，文字的位置，要慢慢調到合適。https://www.ifanr.com/minapp/925253
3.最關鍵的是，目前有極少的在小程序裏用html2canvas的，都是直接把圖片啊，文章裏的文字啊，取過來，再畫到畫布上。這點看了很久才明白。比如這裏https://blog.csdn.net/sufei_web/article/details/81736101
4.清晰度的問題。保存圖片的時候，長度和高度乘以2就行了。https://www.csweigou.com/article/2209.html
//獲取應用實例
const app = getApp()
let wxparse = require("../../wxParse/wxParse.js");
Page({
data: {
dkheight: 300,
dkcontent: "",
leassonTilte: '',
time: '',
id: '',
inputVal: '',
msgData: [{
msg: '極好的',
index: 1,
id: 1,
name: "自強不息",
likes: {
num: 1
},
textareaValue: "輸入留言"
}],
hidden: true,
//畫布
canvasHidden: true, //設置畫板的顯示與隱藏，畫板不隱藏會影響頁面正常顯示
shareImgPath: '' //用於儲存canvas生成的圖片
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function(options) {
// console.log(options)
this.setData({
id: options.id
})
// 獲得高度
let winPage = this;
wx.getSystemInfo({
success: function(res) {
let winHeight = res.windowHeight;
// console.log(winHeight);
winPage.setData({
dkheight: winHeight - winHeight * 0.05 - 80
})
}
});
var that = this;
//獲取用戶設備信息，屏幕寬度
wx.getSystemInfo({
success: res => {
that.setData({
screenWidth: res.screenWidth
})
// console.log(that.data.screenWidth)
}
})
var getData = wx.request({
url: 'https://zsj.itdos.com/v1/wx/getwxarticle/' + options.id,
// data: {
// x: '',
// y: ''
// id: options.id
// },
header: {
'content-type': 'application/json' // 默認值
},
success: function(res) {
// console.log(res.data)
that.setData({
dkcontent: res.data.html,
leassonTilte: res.data.title,
time: res.data.time,
author: res.data.author,
//畫布上的圖片和文字，文字要控制字數
// photo:res.data.imgUrl,
// word:res.data.word
views: res.data.Views,
})
wxparse.wxParse('dkcontent', 'html', that.data.dkcontent, that, 5)
// 生成畫布
let promise1 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: res.data.imgUrl,
success: function(res1) {
// console.log(res1)
resolve(res1);
}
})
});
let promise2 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: '../../images/qrcode.jpg',
success: function(res1) {
// console.log(res1)
resolve(res1);
}
})
});
Promise.all([
promise1, promise2
]).then(res1 => {
// console.log(res1)
const ctx = wx.createCanvasContext('shareImg')
//主要就是計算好各個圖文的位置
// var unit = that.data.screenWidth / 375
ctx.setFillStyle('white');
ctx.fillRect(0, 0, 600, 880);
ctx.drawImage(res1[0].path, 50, 200, 400, 400)
ctx.drawImage('../../' + res1[1].path, 350, 610, 160, 160)
// ctx.drawImage(imgurl, 50, 200, 400, 400)
// ctx.drawImage(bgImgPath, 350, 610, 160, 160)
ctx.setFontSize(28)
ctx.setFillStyle('#6F6F6F')
ctx.fillText('來自小程序 - 青少兒書畫', 30, 660)
ctx.setFontSize(30)
ctx.setFillStyle('#111111')
ctx.fillText('快來圍觀作品', 30, 710)
ctx.setFontSize(22)
ctx.fillText('長按掃碼進入小程序查看', 30, 750)
ctx.setFillStyle('#6F6F6F')
ctx.fillText('Author:' + res.data.author, 545 / 2, 100)
ctx.setTextAlign('center')
ctx.setFontSize(24)
ctx.setFillStyle('#111111')
ctx.fillText(res.data.title, 545 / 2, 50)
ctx.fillText(res.data.word, 545 / 2, 160)
ctx.fillText('……', 60, 190)
ctx.stroke()
ctx.draw()
})
}
})
},
// 同時獲取留言即可
// var that = this;
// wx.getStorage({
// key: 'info',
// success: function (res) {
// //msgData還是空的
// var list = that.data.msgData;
// var a = list ? list : []
// var apple = res.data
// //將數據加入到msgData
// a = apple
// that.setData({
// msgData: a
// })
// }
// })
onShareAppMessage: function() {
// console.log(this.data.id)
return {
title: '青少兒書畫●內容',
path: 'pages/detail/detail?id=' + this.data.id
}
},
// 刪除留言
del(e) {
var that = this
var n = e.target.dataset.index;
var list = that.data.msgData
wx.showModal({
title: '提示',
content: '是否刪除該條數據',
success: function(res) {
// console.log(res.confirm)
if (res.confirm) {
list.splice(n, 1);
that.setData({
msgData: list
})
wx.showToast({
title: '刪除成功',
})
}
}
})
},
// 添加留言
add(e) {
if (this.data.inputVal == '') {
wx.showToast({
title: '請留言',
})
return false;
}
var list = this.data.msgData;
var a = list ? list : []
a.push({
msg: this.data.inputVal
})
wx.setStorage({
key: 'info',
data: a,
})
this.setData({
msgData: a,
inputVal: ''
})
},
changeinputVal(e) {
this.setData({
inputVal: e.detail.value
})
},
/**
* 生成分享圖
*/
share: function() {
var that = this
//獲取用戶設備信息設備像素比
// wx.getSystemInfo({
// success: res => {
// that.setData({
// pixelRatio: res.pixelRatio
// })
// console.log(that.data.pixelRatio)
// }
// })
// 本質上就是生成一個更大的圖片，因爲手機的屏幕設備的像素比現在一般都是超過2的。實際上我們只需要在使用wx.canvasToTempFilePath的時候，設置參數destWidth和destHeight(輸出的寬度和高度)爲width和height的2倍以上即可。
wx.showLoading({
title: '努力生成中...'
})
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 545,
height: 771,
destWidth: 545 * 2,
destHeight: 771 * 2,
canvasId: 'shareImg',
success: function(res) {
// console.log(res.tempFilePath);
that.setData({
prurl: res.tempFilePath,
hidden: false
})
wx.hideLoading()
},
fail: function(res) {
console.log(res)
}
})
},
/**
* 保存到相冊
*/
save: function() {
var that = this
//生產環境時 記得這裏要加入獲取相冊授權的代碼
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '圖片已保存到相冊，趕緊曬一下吧~',
showCancel: false,
confirmText: '好噠',
confirmColor: '#72B9C3',
success: function(res) {
if (res.confirm) {
// console.log('用戶點擊確定');
that.setData({
hidden: true
})
}
}
})
}
})
},
})