在生成圖片中遇到的問題
1囊咏、canvas繪制文字不能換行塔橡，如果文字的長度大于你所定的寬度的話梅割，文字會超出你所定寬度葛家，或者文字會擠壓變形
解決辦法：截取一定的文字長度，多余的文字省略
2、微信小程序canvas畫圖必須用本地的圖片路徑，所以要把圖片下載下來存為臨時路徑再繪制圖片
解決辦法：微信提供了個api可用：wx.downloadFile(OBJECT)和wx.getImageInfo(OBJECT)书蚪，都需先配置download域名才能生效迅栅。
3殊校、微信授權相冊功能读存，授權設置必須按鈕手動觸發(fā)，不能放到回調里面
解決辦法：當用戶拒絕授權以后彈出一個模態(tài)窗让簿，當點擊模態(tài)窗的按鈕時對應不同的狀態(tài)
解決方案3代碼
wx.getSetting({
success(res) {
// 如果沒有則獲取授權
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: that.imageTempPath,
success() {
that.setToast('保存成功')
},
fail() {
that.setToast('保存失敗')
}
})
},
fail() {
wx.showModal({
title: '提示',
content: '需要獲取相冊訪問權限尔当，請到小程序設置頁面打開授權',
cancelText:'取消',
cancelColor:'#999',
confirmText:'確定',
confirmColor:'#f94218',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
console.log(res.authSetting)
}
})
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
}
})
} else {
// 有則直接保存不知道哦
wx.saveImageToPhotosAlbum({
filePath: that.imageTempPath,
success() {
that.setToast('保存成功')
},
fail() {
that.setToast('保存失敗')
}
})
}
}
})
4、canvas生成圖片模糊的問題
解決辦法：繪制擴大2倍再生成圖片
繪制圖片
- 創(chuàng)建canvas元素
<canvas canvas-id="shareCanvas" style="width:600px;height:950px;margin: 50px auto 0;"> - 繪制圖形
drawPage(){
var ctx = wx.createCanvasContext('shareCanvas')
ctx.save()
ctx.beginPath()//開始繪制
ctx.rect(0, 0, 600, 950)
ctx.setFillStyle('#f5522c')
ctx.fill()
// ctx.closePath()
ctx.restore();
this.setLogo(ctx);//繪制頭像
ctx.beginPath()//開始繪制
ctx.setFontSize(26)
// ctx.scale(0.5,0.5)
ctx.setFillStyle('#fff')
ctx.setTextAlign('center')
ctx.fillText(this.share_data.nick_name, 300, 164)
ctx.setFontSize(32)
ctx.fillText('我中獎了：'+this.prizeName, 300, 210,540)
ctx.rect(30, 232, 540, 690)
ctx.fill()
ctx.closePath()
},
setLogo(ctx){
var that =this;
var avatarurl_width = 100; //繪制的頭像寬度
var avatarurl_heigth = 100; //繪制的頭像高度
var avatarurl_x = 250; //繪制的頭像在畫布上的位置
var avatarurl_y = 30; //繪制的頭像在畫布上的位置
wx.downloadFile({
url: that.change_url(that.share_data.logo),
success: function(res) {
ctx.save()
ctx.beginPath()//開始繪制
ctx.setFillStyle('#fff')
//先畫個圓 前兩個參數(shù)確定了圓心 （x,y） 坐標 第三個參數(shù)是圓的半徑 四參數(shù)是繪圖方向 默認是false锐帜，即順時針
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
//畫好了圓 剪切 原始畫布中剪切任意形狀和尺寸畜号。一旦剪切了某個區(qū)域，則所有之后的繪圖都會被限制在被剪切的區(qū)域內 這也是我們要save上下文的原因
ctx.clip()
ctx.drawImage(res.tempFilePath,avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
ctx.closePath()
//恢復之前保存的繪圖上下文 恢復之前保存的繪圖上下文即狀態(tài) 還可以繼續(xù)繪制
ctx.restore()
// ctx.stroke()
//可將之前在繪圖上下文中的描述（路徑蛮拔、變形替饿、樣式）畫到 canvas 中
if(that.share_data.lottery_cover){
that.setBanner(ctx)
}else{
that.setPrize(ctx)
}
},
fail(err){
wx.hideLoading();
that.setToast(err.errMsg);
// that.$store.commit('set_toast_msg', err.errMsg);
}
})
},
setBanner(ctx){
var that = this;
wx.downloadFile({
url: that.change_url(that.share_data.lottery_cover),
success: function(res) {
ctx.drawImage(res.tempFilePath, 50, 250,500, 250);
ctx.save();
ctx.restore();
//繪制獎品名字
that.setPrize(ctx)
},
fail(err){
wx.hideLoading();
that.setToast(err.errMsg);
// that.$store.commit('set_toast_msg', err.errMsg);
}
})
},
setPrize(ctx){
var that =this;
ctx.setFontSize(26)
ctx.setFillStyle('#999')
ctx.setTextAlign('center')
ctx.fillText('長按識別小程序，參與抽獎', 300, 830)
ctx.setStrokeStyle('#fff')
ctx.stroke()
ctx.restore();
if(that.qrcode_url){
//繪制二維碼
that.setQrcode(ctx)
}else{
that.showImg(ctx);
}
},
setQrcode(ctx){
var that = this;
var avatarurl_width = 200; //繪制的頭像寬度
var avatarurl_heigth = 200; //繪制的頭像高度
var avatarurl_x =200; //繪制的頭像在畫布上的位置
var avatarurl_y =570; //繪制的頭像在畫布上的位置
wx.downloadFile({
url: that.change_url(that.qrcode_url),
success: function(res) {
ctx.save()
ctx.beginPath()
ctx.setFillStyle('#dcdcdc')
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
ctx.clip()
ctx.drawImage(res.tempFilePath,avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
ctx.closePath()
ctx.restore()
that.showImg(ctx);
},
fail(err){
wx.hideLoading();
that.setToast(err.errMsg);
// that.$store.commit('set_toast_msg', err.errMsg);
}
})
},
showImg(ctx){
var that =this;
ctx.draw(false, function (e) {
console.log('繪制成功')
setTimeout(function(){
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
fileType:'jpg',
quality:1,
destWidth:600,
destHeight:950,
success: function(res) {
// 獲得圖片臨時路徑
that.imageTempPath = res.tempFilePath;
that.imgSrc=that.imageTempPath;
setTimeout(function(){
that.loading_show=false;
wx.hideLoading();
},50)
console.log(res.tempFilePath)
}
})
},50)
})
},
saveImg(){
var that =this;
// 獲取用戶是否開啟用戶授權相冊
wx.getSetting({
success(res) {
// 如果沒有則獲取授權
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: that.imageTempPath,
success() {
that.setToast('保存成功')
},
fail() {
that.setToast('保存失敗')
}
})
},
fail() {
wx.showModal({
title: '提示',
content: '需要獲取相冊訪問權限，請到小程序設置頁面打開授權',
cancelText:'取消',
cancelColor:'#999',
confirmText:'確定',
confirmColor:'#f94218',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
console.log(res.authSetting)
}
})
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
}
})
} else {
// 有則直接保存
wx.saveImageToPhotosAlbum({
filePath: that.imageTempPath,
success() {
that.setToast('保存成功')
},
fail() {
that.setToast('保存失敗')
}
})
}
}
})
},
- 在onLoad里面執(zhí)行drawPage方法
onLoad(){
this.drawPage();
}
//saveImg 保存圖片方法
