⼩程序canvas⽣成并保存图⽚⼩程序canvas⽣成并保存图⽚，具体实现效果如下图
实现效果需要做以下⼏步⼯作
⼀、先获取⽤户屏幕⼤⼩，然后才能根据屏幕⼤⼩来定义canvas的⼤⼩
⼆、获取图⽚（⼆维码）的宽⾼，并对图⽚进⾏等⽐例缩放在canvas绘制
三、⽂字的布局
四、将canvas内容⽣成图⽚并保存到本地
五、并图⽚保存到相册
具体实现代码如下主逻辑代码量⽐较多，分段来展⽰
/*页⾯data定义所需参数*/
data{
// canvas
_width: 0, //⼿机屏宽
_heigth: 0,//⼿机屏⾼
swiperHeight: 0,//主图图⽚⾼度
canvasType: false//canvas是否显⽰
loadImagePath: '',//下载的图⽚
imageUrl: 'imgo2o.shikee/goods/2019/10/17/201910171144361688.jpg', //主图⽹络路径
codeUrl: 'imgo2o.shikee/couponqrcode/2019/10/18/86_215.jpg',//⼆维码⽹络路径
localImageUrl: '', //绘制的商品图⽚本地路径
localCodeUrl: '', //绘制的⼆维码图⽚本地路径
loadType: flase//保存图⽚，分享好友 Btn
}
/
* 图⽚加载时页⾯加载主图时触发
<image src="{{item}}" class="img" mode="widthFix" bindload="onSwiperLoad"></image>
*/
onImgLoad: function(e) {
let oImgW = e.detail.width; //图⽚原始宽度
let oImgH = e.detail.height; //图⽚原始⾼度
let imgWidth = 750; //图⽚设置的宽度
let scale = imgWidth / oImgW; //⽐例计算
let imgHeight = oImgH * scale;
this.setData({
swiperHeight: imgHeight,
})
}
/*按⽣成图⽚按钮时*/
getSysInfo: function() {
/*获取⼿机宽⾼*/
let that = this
let imgUrl = this.data.imageUrl
let qrcodeUrl = deUrl
success(res) {
that.setData({
_width: res.windowWidth,
_heigth: res.windowHeight,
canvasType: true,
})
// 获取图⽚信息⽣成canvas
}
})
}
// 获取图⽚信息
getImginfo: function(urlArr, _type) {
let that = this;
src: urlArr[_type], //服务器返回的带参数的⼩程序码地址
success: function(res) {
//res.path是⽹络图⽚的本地地址
if (_type === 0) { //商品图⽚
that.setData({
localImageUrl: res.path,
})
} else {
that.setData({ //⼆维码
localCodeUrl: res.path,
loadType: true,
})
// 创建canvas图⽚
}
},
fail: function(res) {
//失败回调
console.log('错误-res', _type, res)
}
});
},
//绘制canvas
createNewImg: function() {
let _width = this.data._width,
_heigth = this.data._heigth; //屏幕宽与⾼
let imgHeigth = this.data.swiperHeight, //原图⽚⾼度
scale = (_width - 40) / _width, //缩⼩⽐例
that = this;
let imgH = imgHeigth * scale; //绘制时图⽚显⽰⾼度
let ctx = wx.createCanvasContext('mycanvas');
// 绘制背景
ctx.setFillStyle("#fff");
ctx.fillRect(0, 0, _width - 40, imgH + 160);
//绘制图⽚
ctx.drawImage(this.data.localImageUrl, 10, 10, _width - 60, imgH);
// 绘制标题
ctx.setFontSize(18);
ctx.setFillStyle('#333');
let txtWidth = _width - 60 + 30 - 100 - 50; //⽂字的宽度
//商品名称最多两⾏显⽰写法有点LOW，但思路是这样的
let title = ds.title; //商品名称
let title2; //商品名称
if (title.length > 10) {
title2 = title.slice(10, title.length);
title = title.slice(0, 10);
}
if (title2.length > 10) {
title2 = title2.slice(0, 9) + ' ...';
}
ctx.fillText(title, 10, imgH + 40, txtWidth);
ctx.fillText(title2, 10, imgH + 70, txtWidth);
/
/ 绘制价格 '￥'
ctx.setFontSize(14);
ctx.setFillStyle('#d2aa68');
ctx.fillText('￥', 10, imgH + 110, txtWidth);
// 绘制价格
ctx.setFontSize(24);
ctx.fillText(ds.promotion_price, 26, imgH + 110, txtWidth);
// 绘制门市价
ctx.setFontSize(14);
ctx.setFillStyle('#666');
ctx.fillText(`门市价￥${ds.price}`, 115, imgH + 110, txtWidth);
/
/ 绘制⼆维码
ctx.drawImage(this.data.localCodeUrl, _width - 80 + 80 - 150, imgH + 20, 100, 100); // 显⽰绘制
ctx.draw();
//将⽣成好的图⽚保存到本地，需要延迟⼀会，绘制期间耗时
setTimeout(function() {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
var tempFilePath = pFilePath;
that.setData({
loadImagePath: tempFilePath,
});
},
fail: function(res) {
console.log(res);
}
});
}, 500);
登录页面背景图}
//点击保存到相册
saveImg: function() {
wx.saveImageToPhotosAlbum({
filePath: this.data.loadImagePath,
success(res) {
console.log('res', res);
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 3000
})
}
})
}
/
/ 关闭海报弹窗
closePos: function() {
this.setData({
canvasType: false
});
}
页⾯代码部分
<view class='poster' wx:if="{{canvasType}}">
<canvas class='canvas' style='height:{{canvasH}}px;width:{{canvasW}}px;' canvas-id="mycanvas"/> <cover-view class='opt' hidden='{{!loadType}}'>
<cover-view class='cont'>
<cover-view class='item' bindtap='saveImg'>
<cover-image  class='ico' src='{{server_img_url}}ico/icon_download.png'></cover-image>
<cover-view>保存到相册</cover-view>
</cover-view>
</cover-view>
</cover-view>
<cover-view class='btn-box' hidden='{{!loadType}}'>
<button bindtap='closePos' class='btn'>取消</button>
</cover-view>
</view>
<view class="btn-box">
<button class='m-btn-share' bindtap='getSysInfo'>⽣成图⽚</button>
<button class='m-btn' open-type='share'>call友来抢</button>
</view>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。