::: align-center ![示例图](https://www.88-bit.com/images/blog/552d402087c348c88fbc7c438f7ca948.png) ::: ### canvas.wxml ```xml

``` 注明：上面使用了`vant-weapp`的弹出层和自定义的按钮组件，样式大家可以自己写，不要拘泥于示例！特别重要的一点：`canvas`要设置宽高，不然画布无法正常生成图片。 ### canvas.wxss ```css .canvas { width: 100%; height: -webkit-calc(100% - 44px); height: -moz-calc(100% - 44px); height: calc(100% - 44px); background: #fff; } ``` ### canvas.js ```javascript //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { // canvas _width: 0, //手机屏宽 _heigth: 0,//手机屏高 swiperHeight: 300,//主图图片高度 canvasType: false,//canvas是否显示 loadImagePath: '',//下载的图片 imageUrl: 'https://cos.myfaka.com/car/service/1.jpg', //主图网络路径 codeUrl: 'https://cos.myfaka.com/car/share/code.jpg',//二维码网络路径 localImageUrl: '', //绘制的商品图片本地路径 localCodeUrl: '', //绘制的二维码图片本地路径 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /*按生成图片按钮时*/ creatQrcodePictures: function () { wx.showLoading({ title: '正在绘制图片', }) /*获取手机宽高*/ let that = this let imgHeigth = this.data.swiperHeight let imgUrl = this.data.imageUrl let qrcodeUrl = this.data.codeUrl wx.getSystemInfo({ success(res) { that.setData({ _width: res.windowWidth, _heigth: res.windowHeight, canvasType: true, }) // 获取图片信息生成canvas that.getImginfo([imgUrl, qrcodeUrl], 0); } }) }, // 获取图片信息 getImginfo: function (urlArr, _type) { let that = this; wx.getImageInfo({ src: urlArr[_type], success: function (res) { //res.path是网络图片的本地地址 if (_type === 0) { //商品图片 that.setData({ localImageUrl: res.path, }) that.getImginfo(urlArr, 1) } else { that.setData({ //二维码 localCodeUrl: res.path, }) // 创建canvas图片 that.createNewImg(); } }, fail: function (res) { //失败回调 console.log('Fail：', _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; //文字的宽度 //商品名称 ctx.fillText('汽车服务：白金蜡', 10, imgH + 40, txtWidth); // 绘制价格单位 '￥' ctx.setFontSize(14); ctx.setFillStyle('#d2aa68'); ctx.fillText('￥', 10, imgH + 65, txtWidth); // 绘制价格 ctx.setFontSize(18); ctx.fillText('90元/次', 26, imgH + 65, txtWidth); // 绘制小程序名称 ctx.setFontSize(20); ctx.setFillStyle('red'); ctx.fillText('武鸣爱车', 10, imgH + 105, txtWidth); // 绘制提示信息 ctx.setFontSize(14); ctx.setFillStyle('#999'); ctx.fillText('微信小程序 • 长按识别', 10, imgH + 125, 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 = res.tempFilePath; that.setData({ loadImagePath: tempFilePath, }); }, fail: function (res) { console.log(res); } }); }, 500); //关闭提示 wx.hideLoading(); }, //点击保存到相册 saveImg: function () { //调用wxapi.js里集成的接口 app.globalData.wxapi.saveImgToLocal(this.data.loadImagePath); }, // 关闭弹窗 onClickOverlay: function () { this.setData({ canvasType: false }); }, }) ``` ### wxapi.js ```javascript /* * 保存图片到相册 */ function saveImgToLocal(imagePath, msg) { //判断用户是否授权"保存到相册" wx.getSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { savePhoto(imagePath, msg); } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { savePhoto(imagePath, msg); }, fail() { wx.showModal({ title: '您没有授权，无法保存到相册', confirmText: "知道了", showCancel: false, success: function (res) { if (res.confirm) { } else if (res.cancel) { } } }) } }) } else { wx.openSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { savePhoto(imagePath, msg); } else { wx.showModal({ title: '您没有授权，无法保存到相册', confirmText: "知道了", showCancel: false, success: function (res) { if (res.confirm) { } else if (res.cancel) { } } }) } } }) } } }) } function savePhoto(imagePath,msg) { var that = this; wx.saveImageToPhotosAlbum({ filePath: imagePath, success(res) { wx.showModal({ title: '二维码已保存到系统相册', content: msg ? msg:'', showCancel: false, success: function (res) { if (res.confirm) { //console.log('点击确定') } else if (res.cancel) { //console.log('点击取消') } } }) } }) } //方法对外开放（开放才能从外部调用） module.exports = { saveImgToLocal: saveImgToLocal } ``` ### wxapi.js是我另外封装的保存图片到相册的接口，调用方式如下： 1、wxapi.js位置如下图： ::: align-center ![wxapi.js](https://www.88-bit.com/images/blog/1dd125e85d414e8d9da72d4246d22bc8.png) ::: 2、在app.js中引入 wxapi.js，并定义到globalData全局变量中 ```javascript //app.js const wxapi = require('utils/wxapi.js') App({ onLaunch: function() { }, /** * 全局属性 */ globalData: { wxapi: wxapi, } }) ``` 3、调用方式 ```javascript //获取应用实例 const app = getApp() //调用wxapi.js里集成的接口 app.globalData.wxapi.saveImgToLocal('传入图片的全路径'); ``` 原文链接：

他的文章