在生成图片中遇到的问题
1、canvas绘制文字不能换行，如果文字的长度大于你所定的宽度的话，文字会超出你所定宽度，或者文字会挤压变形
解决办法：截取一定的文字长度，多余的文字省略
2、微信小程序canvas画图必须用本地的图片路径，所以要把图片下载下来存为临时路径再绘制图片
解决办法：微信提供了个api可用：wx.downloadFile(OBJECT)和wx.getImageInfo(OBJECT)，都需先配置download域名才能生效。
3、微信授权相册功能，授权设置必须按钮手动触发，不能放到回调里面
解决办法：当用户拒绝授权以后弹出一个模态窗，当点击模态窗的按钮时对应不同的状态
解决方案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倍再生成图片
绘制图片
- 创建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')
//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
ctx.clip()
ctx.drawImage(res.tempFilePath,avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
ctx.closePath()
//恢复之前保存的绘图上下文 恢复之前保存的绘图上下文即状态 还可以继续绘制
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里面执行drawPage方法
onLoad(){
this.drawPage();
}
//saveImg 保存图片方法
