近期给 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)