又是感谢封面拍摄者的一天 😃
今天学习的是snapshot 官方解释是 截图组件
很早的时候有个甲方 那时候才小程序才刚起来 甲方客户是个做本地山林深度游的 那时候的小程序还没这么多的组件和API可以使用 当时他的需求是 程序里 用户可以自行上传自己的照片 然后小程序里官方提供了5个图片外框 用户上传照片完成之后 会随机给用户上传的照片绘制上图像边框 印象里当时用的是canvas 用户上传的图片返回图床地址之后 随机在5个图片外框里获取其中一个 然后进行绘制 绘制的时候 要分别计算用户上传图片的长宽像素 因为用户可能上传各种长宽的图片 服务端那边要裁剪 之后返回照片的信息 再和相框进行比对 保证用户的照片能大致在相框中被居中绘制 绘制完成之后 弹出分享view 用户可以下载绘制完成之后的新海报 分享到其他社交媒体上
我记得那时候小🍠才刚兴起还是还没兴起 好像上线的小程序 都还不多 然后程序上线后 甲方客户在自己的私域客户群里发了发 然后...使用量在一个月呢就暴增了 服务器还经常崩溃 现在想想当时大家的手机好像都还是iphone5 6那会 😃 能顺利绘制还给客户提供下载 也是不容易 现在就简单多了 一个组件放上去 就能完成截图效果
老样子 贴一下官方组件代码
index.wxml
<snapshot id="view" class="intro"> <view class="snapshot-box"> <view class="poster-container"> <view class="poster-header"> <image class="head-img" src="https://res.wx.qq.com/op_res/g8_iWdQLmR5dKwrKW-c1fRZc7XRYP6z_rp1f-BDMmQ41BOjsDigYKkO6VQqj6aZoyVKUtTuJEEvOJuv3av8U2Q" /> <view class="poster-header-text"> <text>binnie</text> <text>发起 Skyline 学习活动</text> </view> </view> <view class="description"> <view class="schedule-text"> <view>学 习 进 度</view> <view class="detail">80%</view> </view> <view class="schedule"> <view class="schedule-all"> <view class="schedule-real"></view> </view> </view> <view class="members"> <view class="member"> <image class="head-img" src="https://res.wx.qq.com/op_res/g8_iWdQLmR5dKwrKW-c1fRZc7XRYP6z_rp1f-BDMmQ41BOjsDigYKkO6VQqj6aZoyVKUtTuJEEvOJuv3av8U2Q" /> <view class="leader">队长</view> </view> <view class="member"> <image class="head-img" src="https://res.wx.qq.com/op_res/v9cRw50kNOp93AQJWHjbjiOstqoOZHQgfWzWpJiK02jKt6i5HBHWD3IUpgMSneSW5_26oHaJLddq-h6A3wEI_A" /> <view> <text>binnnnnnn</text> </view> </view> <view class="member"> <image class="head-img" src="https://res.wx.qq.com/op_res/v9cRw50kNOp93AQJWHjbjl-OdWB18klNWCsWqEECTnxAvN-_EaCkgGXNjwANvi4_gIM3MrAHHZiGBK1ooFzmyg" /> <view>🚜拖</view> </view> </view> </view> <view class="line"> <view class="left-line"></view> <view class="real-line"></view> <view class="right-line"></view> </view> <view class="footer"> <view class="qrcode"> <image mode="aspectFill" src="https://res.wx.qq.com/wxdoc/dist/assets/img/skyline-demo.37eff20b.png"></image> </view> <view class="qrcode"> <text>长按识别小程序码来一起学习吧</text> </view> </view> </view> </view></snapshot><button type="primary" bindtap="tap">保存海报到本地</button>
index.js
const app = getApp()Page({ data: { }, onLoad() { wx.loadFontFace({ family: "Monaco", source: 'url("https://fonts.cdnfonts.com/s/14106/Monaco.woff")', scopes: ['webview', 'native'], success: (res) => { console.log('success', res.status) this.render() }, fail: function (res) { console.error(res) }, complete(res) { console.log('111', res) } }); }, tap() { wx.loadFontFace({ family: "Monaco", source: 'url("https://fonts.cdnfonts.com/s/14106/Monaco.woff")', scopes: ['webview', 'native'], success: (res) => { console.log('success', res.status) this.render() }, fail: function (res) { console.error(res) }, complete(res) { console.log('111', res) } }); this.createSelectorQuery().select("#view") .node().exec(res => { const node = res[0].node node.takeSnapshot({ // type: 'file' 且 format: 'png' 时，可直接导出成临时文件 type: 'arraybuffer', format: 'png', success: (res) => { const f = `${wx.env.USER_DATA_PATH}/hello.png` const fs = wx.getFileSystemManager(); fs.writeFileSync(f, res.data, 'binary') wx.showToast({ title: '保存成功' }) wx.saveImageToPhotosAlbum({ filePath: f, complete(res) { console.log("saveImageToPhotosAlbum:", res) } }) }, fail(res) { console.log("takeSnapshot fail:", res) } }) }) }})
index.wxss
@font-face { font-family: "test"; src: url("https://wximg.qq.com/cityservices/font/FZFWQingYinTiJWD.TTF");}.intro { margin: 90px 30px 30px; text-align: center;}.snapshot-box { font-family: "test"; padding: 20px 16px; background: url(
30%;}.poster-img { width: 100%;}.poster-container { background: linear-gradient(#229156, #2fce7c); padding: 20px 16px; border-radius: 10px;}.poster-header { display: flex; flex-direction: row; align-items: center;}.poster-header-text { font-size: 14px; line-height: 1.8; color: #fff; font-weight: bold; padding-left: 10px; text-align: left;}.head-img { width: 48px; height: 48px; border-radius: 50%;}.description { margin: 20px 0; padding: 20px 0; background-color: #fff; border-radius: 10px;}.schedule-text { font-size: 20px; font-weight: bold;}.schedule-text .detail{ font-size: 30px; font-weight: 500; margin: 10px 0;}.schedule { flex-direction: row; align-items: center; justify-content: center; display: flex; position: relative;}.schedule-all { width: 90%; height: 14px; background-color: #eeeeee; border-radius: 20px;}.schedule-real { position: absolute; width: 80%; height: 14px; background: linear-gradient(90deg, #2fce7c, #229156); border-radius: 20px;}.members { display: flex; flex-direction: row; justify-content: center;}.member { margin: 10px;}.member view { width: 48px; background-color: #c5ebdd; color: #07c160; border-radius: 20px; margin-top: -8px; font-size: 12px; line-height: 1.6; padding: 0 6px;}.member view text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.member .leader { background-color: #07c160; color: #fff;}.snapshot-footer { display: flex;}.snapshot-footer-desc { flex: 1; text-align: left; padding-left: 10px;}.line { display: flex; flex-direction: row; margin-left: -16px; margin-right: -16px;}.real-line { width: 90%; border-bottom: solid 3px rgba(255, 255, 255, 0.1); margin: 0 10px 10px 10px;}.left-line { width: 10px; height: 20px; background-color: rgba(255, 255, 255, 0.7); border-radius: 0 10px 10px 0; }.right-line { width: 10px; height: 20px; background-color: rgba(255, 255, 255, 0.7); border-radius: 10px 0 0 10px; }.qrcode { display: flex; justify-content: center; padding: 10px 0;}.qrcode image{ border-radius: 50%; width: 80px; height: 80px;}.qrcode text { font-size: 10px; color: #fff;}
生成新海报可以给用户下载分享到其他社媒 还是小程序比较刚需的一个小功能 如果是用作优惠券推广 或者营销活动裂变这样 设计做得好一些 漂亮点 让用户有分享欲 短期内就能显著看到推广的效果 用户裂变可是非常可怕的
保持好奇 不断进步 下期见~
微信扫一扫,分享到朋友圈
