微信小程序-使用canvas绘制图片,下载,分享

需求, 使用canvas绘制图片和文字, 生成图片 官方文档 wxml: 选择图片 下载 分享 canvas区域 效果图 布局太简单, 就不展示了 选择图片功能 先设置canvas区域的宽度和高度 js代码 data: { title: 'canvas绘制图片', canvasWidth: '', // canvas宽度 canvasHeight: '', // canvas高度 imagePath: '', // 分享的图片路径 leftMargin: 0, topMargin: 0, imgInfo: {}, ctx: [], canvasImage: '', previewImage: false, imgProportion: 0.8, // 图片占canvas画布宽度百分比 imgToTop: 100 // 图片到canvas顶部的距离 }, onLoad: function(options) { var that = this var sysInfo = wx.getSystemInfo({ success: function(res) { that.setData({ canvasWidth: res.windowWidth, // 我这里选择canvas高度是系统高度的80% canvasHeight: res.windowHeight * 0.8 }) // 根据图片比例, 使图片居中 let leftMargin = (res.windowWidth * (1 - that.data.imgProportion)) / 2 that.setData({ leftMargin }) } }) } 接下来选择图片 // 点击选择图片按钮触发 start: function() { let that = this let ctx = wx.createCanvasContext('myCanvas') // 设置canvas背景色, 否则制作的图片是透明的 ctx.setFillStyle('#f8f8f8') ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight) this.addImage(ctx) }, // 添加图片 addImage: function(ctx) { var that = this; let imgInfo = that.data.imgInfo var path wx.chooseImage({ count: '1', success(res) { wx.getImageInfo({ src: res.tempFilePaths[0], success: function(response) { // 返回的response里有图片的临时路径和图片信息(高度/宽度) that.setData({ imgInfo: response, path: response.path }) that.drawImage(ctx) } }) } }) this.addTitle(ctx) }, 绘制文字和图片 // 绘制图片 drawImage(ctx) { let that = this let imgInfo = that.data.imgInfo let path = that.data.path // 计算图片宽度 宽度固定 高度等比缩放 let imgWidth = that.data.canvasWidth * that.data.imgProportion let imgHeight = imgInfo.height / imgInfo.width * imgWidth // drawImage参数, 下面会说明 ctx.drawImage(path, 0, 0, imgInfo.width, imgInfo.height, that.data.leftMargin, that.data.imgToTop, imgWidth, imgHeight) ctx.draw() that.data.previewImage = true }, //绘制文字 addTitle: function(ctx) { var str = this.data.title ctx.font = 'normal bold 16px sans-serif'; ctx.setTextAlign('center'); // 文字居中 ctx.setFillStyle("#222222"); ctx.fillText(str, this.data.canvasWidth / 2, 45) // 文字位置 }, drawImage方法 官方文档 drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型： drawImage(image, dx, dy) 在画布指定位置绘制原图 drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分 从 1.9.0 起支持 参数描述 image 所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载） sx 需要绘制到画布中的，image的矩形（裁剪）选择框的左上角 x 坐标 sy 需要绘制到画布中的，image的矩形（裁剪）选择框的左上角 y 坐标 sWidth 需要绘制到画布中的，image的矩形（裁剪）选择框的宽度 sHeight 需要绘制到画布中的，image的矩形（裁剪）选择框的高度 dx image的左上角在目标 canvas 上 x 轴的位置 dy image的左上角在目标 canvas 上 y 轴的位置 dWidth 在目标画布上绘制imageResource的宽度，允许对绘制的image进行缩放 dHeight 在目标画布上绘制imageResource的高度，允许对绘制的image进行缩放 图片可能更直观 image.png 下载图片 //点击下载按钮保存canvas图片 downloadCanvas: function() { let that = this; // 判断用户是否选择了图片 if (that.data.previewImage) { wx.canvasToTempFilePath({ x: 0, y: 0, width: that.canvasWidth, height: that.canvasWidth, destWidth: that.canvasWidth, destHeight: that.canvasHeight, canvasId: 'myCanvas', success: function success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { console.log(res, '保存') } }) } }); } else { wx.showToast({ title: '请先选择图片', image: '../../static/img/error.png' }) } } 分享图片 // 分享图片 share() { let that = this if (that.data.previewImage) { wx.canvasToTempFilePath({ x: 0, y: 0, width: that.canvasWidth, height: that.canvasWidth, destWidth: that.canvasWidth, destHeight: that.canvasHeight, canvasId: 'myCanvas', success: function success(res) { wx.showToast({ icon: 'none', title: '长按图片分享', duration: 1500 }) setTimeout( () => { wx.previewImage({ urls: [res.tempFilePath] }) }, 1000) } }) } else { wx.showToast({ title: '请先选择图片', image: '../../static/img/error.png' }) } }

本文章由javascript技术分享原创和收集