近期给AI产品减少了推广返佣的能力，波及到推广就会有分享裂变，集体的专属分享链接及海报。本次文章次要记录前端合成海报并下载到本地的流程，因为产品运行的平台次要是在小程序和PC浏览器，所以次要也是实现这两个平台的图片下载，接下来开始注释。
浏览器端实现
在实现下载之前首先要将海报内容合并成一张图片。这里用到了 html2canvas 这个库，这个置信很多人都有用到过。
html2canvas能够将网页中的HTML元素转换为Canvas图像，从而实现将网页内容截图的性能。它提供了一种简略的办法来捕获整个网页或特定的HTML元素，并生成对应的图像数据。
以下是一个简略的示例代码，第一个参数传入须要合并图像的DOM根元素，第二个参数传入相应的参数配置，在回调中即可获取到对应的canvas对象：
html2canvas(this.$refs.poster.$el, { useCORS: true, allowTaint: true, scale: this.getDPR(),}).then(canvas => {})接下来就是将canvas对象转换成图片并下载到本地，通过canvas.toDataURL能够将canvas对象转换为base64的图片地址，再创立一个a标签模仿点击即可触发图片下载到本地。
const dataURL = canvas.toDataURL('image/jpeg', 0.8);const link = document.createElement('a');link.href = dataURL;link.download = 'poster.png';// 模仿点击链接，触发下载link.click();小程序端实现
小程序实现就较为麻烦一些了，html2canvas在小程序外面不反对，能够应用wxml-to-canvas 代替，然而思考到接入的老本和以后实现的页面比较简单，目前实现是间接用原生canvas绘制海报，大略的代码如下所示，次要就是绘制图片及文本，如果波及到比较复杂的界面对应的代码复杂度也会升高很多，大家如果有更好的计划欢送探讨。
const ctx = wx.createCanvasContext('canvas');ctx.beginPath();ctx.drawImage('bg.png', 0, 0, this.canvasWidth, this.canvasHeight);ctx.setTextAlign('center');ctx.setFillStyle('#FFFFFF');ctx.setFontSize(24);ctx.fillText('海报文本', 150, uni.upx2px(90));ctx.draw();图片绘制好了接下来就是下载的过程。
在小程序外面下载图片须要用到 wx.canvasToTempFilePath，把以后画布指定区域的内容导出生成指定大小的图片，这里咱们传入对应的cavansID即可，在胜利的回调中就能获取到图片的临时文件门路 (本地门路)。
wx.canvasToTempFilePath({ canvasId: 'poster-canvas', success(res) { const tempFilePath = res.tempFilePath }})获取到了本地地址就能够进行图片的保留，然而可能存在用户未设置权限或回绝了存储到权限，所以下载之前须要进行权限相干的判断及提醒疏导操作。大略的代码如下：
// 判断用户受权wx.getSetting({ success(res) { // 没有权限，发动受权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 受权胜利，可下载 }, fail() { // 用户点击回绝受权，跳转到设置页，疏导用户受权 wx.openSetting({ success() { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 可下载 }, fail() { this.$showToast("保留失败"); } }) }, fail(res) { this.$showToast("未取得权限保留图片"); } }) } }) } else { // 用户已受权，可下载保留到相册 } }})权限判断没问题即可调用wx.saveImageToPhotosAlbum传入后面从canvasToTempFilePath获取的tempFilePath进行下载：
wx.saveImageToPhotosAlbum({ filePath, success() { // 保留胜利 }, fail() { // 保留失败 }})最初
在浏览器和小程序中保留图片的过程到此就完结了，可能在不同的设施或DOM元素会存在肯定的兼容性，本次次要分享外围的实现逻辑，大家有遇到什么坑欢送留言探讨～
看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）