小程序canvas画图并保存
<canvas style="width:355px; height:528px; background:#ffffff;visibity: hidden;position: absolute; top: -10000px; left:-10000rpx;" canvas-id="firstCanvas"> </canvas>
canvas可以在style中进行隐藏，但是不能使用display:none;
js代码：
onLoad: function (options) {
let _this = this;
const ctx = wx.createCanvasContext('firstCanvas');
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 355, 528);
// _this.drawtouxiang(ctx);
// var path1='/images/avatar.png';
var path1=_this.data.touxiang;
ctx.drawImage(path1,10,15,50,50);
var path2=_this.data.newsimg;
ctx.drawImage(path2,10,80,335,190);
var path3=_this.data.imgtuijian;
ctx.drawImage(path3,10,443,66,66);
// 设置背景颜色
this.drawText(ctx);
// ctx.draw();
ctx.draw(true,setTimeout(function(){
},1000));
console.log(ctx);
},
drawText:function(ctx){
// ctx.setFillStyle('#ffffff');
// ctx.fillRect(0, 0, 355, 528);
// 昵称：我要买房
ctx.setFontSize(16); //设置字体大小
ctx.setFillStyle('#333333'); //设置字体颜色
ctx.fillText('我要买房', 75,31); //设置字体内容、坐标
//给你推荐
ctx.setFontSize(10);
ctx.setFillStyle('#596A86');
ctx.fillText('给你推荐', 149,31);
// 这篇资讯好精彩！快来和我一起看看！
ctx.setFontSize(13);
ctx.setFillStyle('#999999');
ctx.fillText('这篇资讯好精彩！快来和我一起看看！', 75,56);
// 恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户
ctx.setFontSize(18);
ctx.setFillStyle('#333333');
// 文字换行
var text='恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户';
// 换行，三行
var text2='恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活4...沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、';
this.dealWords({
ctx: ctx,//画布上下文
fontSize: 18,//字体大小
fillstyle:'#333333',
word: text,//需要处理的文字
maxWidth: 325,//一行文字最大宽度
x: 10,//文字在x轴要显示的位置
y: 285,//文字在y轴要显示的位置
maxLine: 2//文字最多显示的行数
});
this.dealWords({
ctx: ctx,//画布上下文
fontSize: 14,//字体大小
fillstyle:'#666666',
word: text2,//需要处理的文字
maxWidth: 325,//一行文字最大宽度
x: 10,//文字在x轴要显示的位置
y: 346,//文字在y轴要显示的位置
maxLine: 3//文字最多显示的行数
});
ctx.setFontSize(16); //设置字体大小
ctx.setFillStyle('#333333'); //设置字体颜色
ctx.fillText('随便啦', 91,463); //设置字体内容、坐标
// 长按识别，获取更多精彩内容
ctx.setFontSize(14); //设置字体大小
ctx.setFillStyle('#999999'); //设置字体颜色
ctx.fillText('长按识别，获取更多精彩内容', 91,493); //设置字体内容、坐标
},
点击保存按钮保存图片：
保存图片时，要先判断是否已经授权给微信了
saveimg:function(){ console.log('点击了保存图片'); let that=this; // 授权放置在相册里面 wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 用户已经同意小程序相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问 that.saveablum() }, fail(){ that.setData({ openauthpop: true }); // that.handleSetting(res); } }) }else{ that.saveablum() } } }); },
saveablum:function(){ let imageWidth = this.data.imageWidth, imageHeight = this.data.imageHeight; wx.canvasToTempFilePath({ //将canvas生成图片 canvasId: 'firstCanvas', x: 0, y: 0, width: imageWidth, height: imageHeight, destWidth: imageWidth, //截取canvas的宽度 destHeight: imageHeight, //截取canvas的高度 success: function (res) { wx.saveImageToPhotosAlbum({ //保存图片到相册 filePath: res.tempFilePath, success: function () { wx.showToast({ title: "生成图片成功！", duration: 2000 }) }, fail: function () { }, }) }, fail:function(res){ console.log(res); } }) },
如果用户取消授权写入相册，则必须给一个button去调用
<view class="wrap" wx:if="{{openauthpop}}" bindtap="hiddenauthphp"></view>
<view class="authpop" wx:if="{{openauthpop}}">
<view class="title">警告</view>
<view class="content">若不打开授权，则无法将图片保存在相册中！</view>
<view class="xian"></view>
<view class="btn">
<button class="bt left" bindtap="hiddenauthphp">取消</button>
<button class="bt right" open-type="openSetting" bindopensetting='handleSetting'>确定</button>
</view>
</view>
.wrap{
position: fixed;
left: 0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,0.3);
}
.authpop{
position: fixed;
top: 30%;
left: 10%;
width: 600rpx;
height:230rpx;
z-index: 1003;
background:#FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
border-radius:30rpx;
}
.authpop .title{
font-size: 36rpx;
color: #333333;
padding: 10rpx;
width:600rpx;
display: flex;
justify-content: center;
}
.authpop .content{
font-size: 20rpx;
color: #999999;
padding: 5rpx;
width:600rpx;
display: flex;
justify-content: center;
}
.authpop .xian{
width: 500rpx;
height: 1rpx;
background:#f5f5f5;
margin-top: 10rpx;
}
.authpop .btn{
display: flex;
width: 600rpx;
height: 50rpx;
padding-top: 1rpx;
background: #FFFFFF;
}
.bt::after{
border: none;
}
.bt{
background-color: #fff;
border-radius:0;
width: 49%;
padding-top: 5rpx;
display: flex;
justify-content: center;
}
