写点什么

前端合成海报并保存到本地

作者:南城FE
  • 2023-08-16
    广东
  • 本文字数:1924 字

    阅读完需:约 6 分钟

前端合成海报并保存到本地

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

发布于: 刚刚阅读数: 4
用户头像

南城FE

关注

还未添加个人签名 2019-02-12 加入

专注前端开发,分享前端知识

评论

发布
暂无评论
前端合成海报并保存到本地_JavaScript_南城FE_InfoQ写作社区