uni-app小程序绘制海报
生活随笔
收集整理的這篇文章主要介紹了
uni-app小程序绘制海报
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
簡單版
<template><view class="poster_page"><canvas canvas-id="poster" class="poster_canvas"></canvas><view class="poster_box" :class="{ active: swiperIndex == index }"><image class="poster_bg" :src="posterBg" mode="widthFix"></image><view class="poster_content"><image :src="avatarUrl" class="poster_avatarUrl"></image><view class="inviter_info"><text class="inviter">{{inviter}}</text>邀請(qǐng)您加入</view><view class="poster_title">{{posterTitlt}}</view><view class="poster_dot"><view class="line"></view></view><view class="inviter_code">邀請(qǐng)碼：{{inviteCode}}</view><image class="inviter_code_url" :src="inviteCodeUrl" mode=""></image><view class="poster_info">長按識(shí)別 立即加入</view></view></view><view class="footer_save fixed-bottom"><view class="save_btn_box"><button class="save_item" open-type="share"><view class="save_item_image_wrap"><image class="save_item_image" src="../../static/share/wxicon.png" mode=""></image></view><view class="txt">微信好友</view></button><button class="save_item" @click="onSaveImg"><view class="save_item_image_wrap"><image class="save_item_image" src="../../static/share/icon.png" mode=""></image></view><view class="txt">保存圖片</view></button></view><view class="safe-reg "></view></view></view> </template><script>// 文字換行function drawtext(text, maxWidth) {let textArr = text.split("");let len = textArr.length;// 上個(gè)節(jié)點(diǎn)let previousNode = 0;// 記錄節(jié)點(diǎn)寬度let nodeWidth = 0;// 文本換行數(shù)組let rowText = [];// 如果是字母，側(cè)保存長度let letterWidth = 0;// 漢字寬度let chineseWidth = 21;// otherFont寬度let otherWidth = 10.5;for (let i = 0; i < len; i++) {if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {if (letterWidth > 0) {if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i)});previousNode = i;nodeWidth = chineseWidth;letterWidth = 0;} else {nodeWidth += chineseWidth + letterWidth * otherWidth;letterWidth = 0;}} else {if (nodeWidth + chineseWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i)});previousNode = i;nodeWidth = chineseWidth;} else {nodeWidth += chineseWidth;}}} else {if (/\n/g.test(textArr[i])) {rowText.push({type: "break",content: text.substring(previousNode, i)});previousNode = i + 1;nodeWidth = 0;letterWidth = 0;} else if (textArr[i] == "\\" && textArr[i + 1] == "n") {rowText.push({type: "break",content: text.substring(previousNode, i)});previousNode = i + 2;nodeWidth = 0;letterWidth = 0;} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {letterWidth += 1;if (nodeWidth + letterWidth * otherWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i + 1 - letterWidth)});previousNode = i + 1 - letterWidth;nodeWidth = letterWidth * otherWidth;letterWidth = 0;}} else {if (nodeWidth + otherWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i)});previousNode = i;nodeWidth = otherWidth;} else {nodeWidth += otherWidth;}}}}if (previousNode < len) {rowText.push({type: "text",content: text.substring(previousNode, len)});}return rowText;}function roundRect(ctx, x, y, w, h, r) {// 開始繪制ctx.beginPath()// 因?yàn)檫吘壝柽叴嬖阡忼X，最好指定使用 transparent 填充ctx.setFillStyle('transparent')// ctx.setStrokeStyle('transparent')// 繪制左上角圓弧ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)// 繪制border-topctx.moveTo(x + r, y)ctx.lineTo(x + w - r, y)ctx.lineTo(x + w, y + r)// 繪制右上角圓弧ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)// 繪制border-rightctx.lineTo(x + w, y + h - r)ctx.lineTo(x + w - r, y + h)// 繪制右下角圓弧ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)// 繪制border-bottomctx.lineTo(x + r, y + h)ctx.lineTo(x, y + h - r)// 繪制左下角圓弧ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)// 繪制border-leftctx.lineTo(x, y + r)ctx.lineTo(x + r, y)ctx.fill()// ctx.stroke()ctx.closePath()// 剪切ctx.clip()}// 是否授權(quán)保存圖片let settingWritePhotosAlbum = false;export default {data() {return {shareUrl: '',posterBg: 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/ytB7r7_1608704284756.png',posterTitlt: '智能記賬，一站式企業(yè)服務(wù)平臺(tái)',inviteCode: '99999',inviteCodeUrl: '/pages/index/index'}},computed: {avatarUrl() {return 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/XG1WkA_1608705366010.png'},inviter() {return '茉莉'}},methods: {// 創(chuàng)建海報(bào)createPoster() {let self = thisreturn new Promise((resolve, reject) => {uni.showLoading({title: '海報(bào)生成中'});const ctx = uni.createCanvasContext('poster');ctx.fillRect(0, 0, 375, 673);ctx.setFillStyle("#FFF");ctx.fillRect(0, 0, 375, 673);uni.getImageInfo({src: self.posterBg,success: (bgUrl) => {ctx.drawImage(bgUrl.path, 0, 0, 375, 673);uni.getImageInfo({src: self.avatarUrl,success: (avatarUrl) => {uni.getImageInfo({src: self.inviteCodeUrl,success: (codeUrl) => {// 繪制圓角白色主體roundRect(ctx, 20, 120, 335, 365, 10)// ctx.rect(20, 120, 335, 365)ctx.setFillStyle('#FFFFFF')ctx.fill()// 繪制頭像ctx.save();ctx.beginPath(); //開始繪制//先畫個(gè)圓 前兩個(gè)參數(shù)確定了圓心 （x,y） 坐標(biāo) 第三個(gè)參數(shù)是圓的半徑 四參數(shù)是繪圖方向 默認(rèn)是false，即順時(shí)針ctx.arc(185, 170, 25, 0, Math.PI * 2, false);ctx.clip(); //畫好了圓 剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi) 這也是我們要save上下文的原因ctx.drawImage(avatarUrl.path, 160, 145, 50, 50); // 推進(jìn)去圖片，必須是https圖片ctx.restore(); //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 還可以繼續(xù)繪制let textTop = 215// 繪制邀請(qǐng)人ctx.setFontSize(16);ctx.setFillStyle('#333');let middel = (375 / 2)let inviterW = ctx.measureText(self.inviter).width// 70 是邀請(qǐng)您加入 的寬度let inviterMiddle = middel - ((inviterW + 70 + 6) / 2)ctx.fillText(self.inviter, inviterMiddle, textTop);ctx.setFontSize(14);ctx.fillText('邀請(qǐng)您加入', inviterMiddle + inviterW + 6, textTop - 1);textTop += 30// 繪制標(biāo)題ctx.setFontSize(18);ctx.setFillStyle('#FF8200');let posterTitltW = ctx.measureText(self.posterTitlt).width// 70 是邀請(qǐng)您加入 的寬度let posterTitltMiddle = middel - (posterTitltW / 2)ctx.font = `normal bold 18px sans-serif`;ctx.fillText(self.posterTitlt, posterTitltMiddle, textTop);ctx.fillText(self.posterTitlt, posterTitltMiddle, textTop);textTop += 28// 繪制虛線ctx.setStrokeStyle('#D5D5D5')ctx.setLineDash([3, 4], 1);ctx.beginPath();ctx.moveTo(40, textTop);ctx.lineTo(335, textTop);ctx.stroke();// 繪制兩個(gè)藍(lán)色半圓ctx.beginPath();ctx.arc(20, textTop - 1, 10, 0, 2 * Math.PI)ctx.setFillStyle('#1064EA')ctx.fill()ctx.stroke();ctx.beginPath();ctx.arc(355, textTop - 1, 10, 0, 2 * Math.PI)ctx.setFillStyle('#1064EA')ctx.fill()ctx.stroke();textTop += 36// 繪制邀請(qǐng)碼ctx.font = `10px sans-serif`;ctx.setFontSize(15);ctx.setFillStyle('#333');let inviteCode = '邀請(qǐng)碼:' + self.inviteCodelet inviteCodeW = ctx.measureText(inviteCode).widthlet inviteCodeMiddle = middel - (inviteCodeW / 2)ctx.fillText(inviteCode, inviteCodeMiddle, textTop);textTop += 20// 繪制二維碼ctx.drawImage(codeUrl.path, 137, textTop, 100, 100);textTop += 120// 繪制長按識(shí)別 立即加入ctx.setFontSize(12);ctx.setFillStyle('#969696');let infoW = ctx.measureText('長按識(shí)別 立即加入').widthlet infoMiddle = middel - (infoW / 2)ctx.fillText('長按識(shí)別 立即加入', infoMiddle, textTop);console.log('生成前')ctx.draw(true, () => {console.log('生成了111')// canvas畫布轉(zhuǎn)成圖片并返回圖片地址uni.canvasToTempFilePath({canvasId: 'poster',width: 375,height: 673,success: (result) => {self.shareUrl = result.tempFilePath;console.log("海報(bào)制作成功！");uni.hideLoading();resolve(result.tempFilePath);},fail: (err) => {console.log("海報(bào)制作失敗！", err);uni.hideLoading();reject();}})});},fail: err => {console.log('失敗了1', err)uni.hideLoading();uni.showToast({title: '海報(bào)制作失敗，圖片下載失敗1',icon: 'none'});}});}})},fail: err => {console.log('生成背景圖失敗', err)uni.hideLoading();uni.showToast({title: JSON.stringify(err),icon: 'none'});}});});},// 輪播圖變化onSwiperChange(e) {this.swiperIndex = e.detail.current;},// 保存圖片async onSaveImg() {let shareUrl = "";if (this.shareUrl) {shareUrl = this.shareUrl} else {shareUrl = await this.createPoster();}// #ifdef H5this.h5SaveImg = shareUrl;uni.hideLoading();// #endif// #ifdef MP-WEIXINuni.showLoading({title: '海報(bào)下載中'});if (settingWritePhotosAlbum) {uni.getSetting({success: res => {if (res.authSetting['scope.writePhotosAlbum']) {uni.saveImageToPhotosAlbum({filePath: shareUrl,success: () => {uni.hideLoading();uni.showToast({title: '保存成功'});}});} else {uni.showModal({title: '提示',content: '請(qǐng)先在設(shè)置頁面打開“保存相冊”使用權(quán)限',confirmText: '去設(shè)置',cancelText: '算了',success: data => {if (data.confirm) {uni.hideLoading();uni.openSetting();}}});}}});} else {settingWritePhotosAlbum = true;uni.authorize({scope: 'scope.writePhotosAlbum',success: () => {uni.saveImageToPhotosAlbum({filePath: shareUrl,success: () => {uni.hideLoading();uni.showToast({title: '保存成功'});}});}});}// #endif},async onShareAppMessage(res) {if (res.from === 'button') { // 來自頁面內(nèi)分享按鈕console.log(res.target)}let path = '/pages/index/index'if (this.$store.state.inviteCode) {path += '?superId=' + this.$store.state.inviteCode}return {title:this.$store.state.inviteCode+this.posterTitlt,// imageUrl: shareUrl,path: path}}}} </script><style lang="scss" scoped>.poster_page {min-height: 100vh;background-color: #1064ea;display: flex;.poster_canvas {width: 750rpx;height: 1334rpx;position: fixed;top: -10000rpx;// top: 0rpx;left: 0rpx;background-color: pink;}.poster_box {width: 100%;height: 100%;position: absolute;.poster_bg {position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;}.poster_content {position: relative;background: #ffffff;border-radius: 20rpx;top: 240rpx;left: 40rpx;width: 670rpx;height: 730rpx;text-align: center;.poster_avatarUrl {width: 110rpx;height: 110rpx;border-radius: 110rpx;margin-top: 50rpx;}.inviter_info {font-size: 30rpx;line-height: 1;.inviter {font-size: 31rpx;margin: 10rpx;}}.poster_title {color: #ff8200;font-size: 36rpx;font-weight: bold;line-height: 1;margin-top: 40rpx;margin-bottom: 30rpx;}.poster_dot {position: relative;width: 100%;height: 40rpx;padding-top: 19rpx;// border-top: 1px dashed #D5D5D5;&::before {content: '';position: absolute;top: 0;left: -20rpx;width: 40rpx;height: 40rpx;background-color: #1064ea;border-radius: 100%;}&::after {content: '';position: absolute;top: 0;right: -20rpx;width: 40rpx;height: 40rpx;background-color: #1064ea;border-radius: 100%;}.line {margin-left: 7%;width: 86%;border-top: 1px dashed #d5d5d5;}}.inviter_code {color: #333333;font-size: 30rpx;margin-bottom: 20rpx;}.inviter_code_url {overflow: hidden;width: 200rpx;height: 200rpx;margin-bottom: 10rpx;}.poster_info {color: #969696;font-size: 24rpx;}}}.footer_save {padding-bottom: 40rpx;background-color: #1064ea;box-sizing: border-box;.save_btn_box {display: flex;align-items: center;.save_item {flex: 1;text-align: center;background-color: #1064ea;&::after {border: none;}.save_item_image_wrap {margin: 0 auto;background-color: #ffffff;width: 100rpx;height: 100rpx;border-radius: 100%;text-align: center;.save_item_image {margin-top: 20rpx;width: 60rpx;height: 60rpx;}}.txt {line-height: 1;margin-top: 10rpx;color: #ffffff;font-size: 26rpx;}}}.safe-reg {background-color: #1064ea;}}} </style>動(dòng)態(tài)切換版
<template><view class="poster_page"><canvas canvas-id="poster" class="poster_canvas"></canvas><swiper class="poster_swiper" previous-margin="110rpx" circular :current="swiperIndex" next-margin="110rpx" @change="onSwiperChange"><swiper-item v-for="(item, index) of imgs" :key="index"><view class="goods_info_box" :class="{ active: swiperIndex == index }"><image class="goods_image" :src="item" mode="aspectFit"></image><view class="goods_info"><view class="goods_name">{{title}}</view><view class="price_box"><view class="price">{{price}}</view><view class="store_price">{{priceLine}}</view></view><view class="poster_info"><view class="info"><view>長按識(shí)別二維碼訪問</view><text>{{platformName}}</text></view><image class="poster_code_image" :src="codeUrl" mode="widthFix"></image></view></view></view></swiper-item></swiper><view class="share_save_box"><!-- #ifdef MP --><button class="btn-options" open-type="share"><image src="../../static/share/wxicon.png" mode="aspectFit"></image><text>發(fā)給好友</text></button><!-- #endif --><button class="btn-options" @click="onSaveImg"><image src="../../static/share/icon.png" mode="aspectFit"></image><text>保存圖片</text></button></view><!-- #ifdef H5 --><view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''"><image :src="h5SaveImg" mode="widthFix"></image><button class="download">長按圖片保存圖片</button></view><!-- #endif --></view> </template><script>// 文字換行function drawtext(text, maxWidth) {let textArr = text.split("");let len = textArr.length;// 上個(gè)節(jié)點(diǎn)let previousNode = 0;// 記錄節(jié)點(diǎn)寬度let nodeWidth = 0;// 文本換行數(shù)組let rowText = [];// 如果是字母，側(cè)保存長度let letterWidth = 0;// 漢字寬度let chineseWidth = 21;// otherFont寬度let otherWidth = 10.5;for (let i = 0; i < len; i++) {if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {if (letterWidth > 0) {if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i)});previousNode = i;nodeWidth = chineseWidth;letterWidth = 0;} else {nodeWidth += chineseWidth + letterWidth * otherWidth;letterWidth = 0;}} else {if (nodeWidth + chineseWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i)});previousNode = i;nodeWidth = chineseWidth;} else {nodeWidth += chineseWidth;}}} else {if (/\n/g.test(textArr[i])) {rowText.push({type: "break",content: text.substring(previousNode, i)});previousNode = i + 1;nodeWidth = 0;letterWidth = 0;} else if (textArr[i] == "\\" && textArr[i + 1] == "n") {rowText.push({type: "break",content: text.substring(previousNode, i)});previousNode = i + 2;nodeWidth = 0;letterWidth = 0;} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {letterWidth += 1;if (nodeWidth + letterWidth * otherWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i + 1 - letterWidth)});previousNode = i + 1 - letterWidth;nodeWidth = letterWidth * otherWidth;letterWidth = 0;}} else {if (nodeWidth + otherWidth > maxWidth) {rowText.push({type: "text",content: text.substring(previousNode, i)});previousNode = i;nodeWidth = otherWidth;} else {nodeWidth += otherWidth;}}}}if (previousNode < len) {rowText.push({type: "text",content: text.substring(previousNode, len)});}return rowText;}// 是否授權(quán)保存圖片let settingWritePhotosAlbum = false;export default {data() {return {posterImgs: [],swiperIndex: 0,imgs: ["http://qn.kemean.cn/file/upload/202005/21/1590043404759qml3zmlm.jpg?imageView2/0/w/800"],title: '冰希黎巴黎紅精粹沙龍香水50ml 粹沙龍香水100ml',price: "￥699.0",priceLine: "￥699.0",platformName: 'lly',codeUrl: 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/bQyAsz_1599467682825.png',h5SaveImg: "",id: '1'}},methods: {// 創(chuàng)建海報(bào)createPoster() {let self = thisreturn new Promise((resolve, reject) => {uni.showLoading({title: '海報(bào)生成中'});const ctx = uni.createCanvasContext('poster');ctx.fillRect(0, 0, 375, 673);ctx.setFillStyle("#FFF");ctx.fillRect(0, 0, 375, 673);uni.getImageInfo({src: self.imgs[self.swiperIndex],success: (bgUrl) => {ctx.drawImage(bgUrl.path, 0, 0, 375, 375);uni.getImageInfo({src: self.codeUrl,success: (codeUrl) => {// 商品標(biāo)題ctx.setFontSize(21);ctx.setFillStyle('#333');let drawtextList = drawtext(self.title, 341);let textTop = 0;drawtextList.forEach((item, index) => {if (index < 2) {textTop = 380 + (index + 1) * 28;ctx.fillText(item.content, 17, textTop);}});// 商品價(jià)格ctx.setFontSize(26);ctx.setFillStyle('#f00');ctx.fillText(self.price, 17, textTop + 47);// 商品門市價(jià)ctx.setFontSize(18);ctx.setFillStyle('#999');let textLeft = 38 + (self.price.length * 13)ctx.fillText(self.price, textLeft, textTop + 45);// 商品門市價(jià)橫線ctx.beginPath();ctx.setLineWidth(1);ctx.moveTo(textLeft - 1, textTop + 38);ctx.lineTo((textLeft + 5 + self.price.length * 9), textTop + 38);ctx.setStrokeStyle('#999');ctx.stroke();// 商品分割線ctx.beginPath();ctx.setLineWidth(1);ctx.moveTo(17, textTop + 70);ctx.lineTo(358, textTop + 70);ctx.setStrokeStyle('#eee');ctx.stroke();// 長按識(shí)別二維碼訪問ctx.setFontSize(19);ctx.setFillStyle('#333');ctx.fillText("長按識(shí)別二維碼訪問", 17, textTop + 136);// 平臺(tái)名稱ctx.setFontSize(16);ctx.setFillStyle('#999');ctx.fillText(self.platformName, 17, textTop + 170);// 二維碼ctx.drawImage(codeUrl.path, 238, textTop + 88, 120, 120);console.log('生成前')ctx.draw(true, () => {console.log('生成了111')// canvas畫布轉(zhuǎn)成圖片并返回圖片地址uni.canvasToTempFilePath({canvasId: 'poster',width: 375,height: 673,success: (result) => {if (self.posterImgs[self.swiperIndex]) {self.posterImgs[self.swiperIndex].url = result.tempFilePath;} else {self.posterImgs[self.swiperIndex] = {url: result.tempFilePath};}console.log("海報(bào)制作成功！");uni.hideLoading();resolve(result.tempFilePath);},fail: (err) => {console.log("海報(bào)制作失敗！", err);uni.hideLoading();reject();}})});},fail: err => {console.log('失敗了1', err)uni.hideLoading();uni.showToast({title: '海報(bào)制作失敗，圖片下載失敗1',icon: 'none'});}});},fail: err => {console.log('生成背景圖失敗', err)uni.hideLoading();uni.showToast({title: JSON.stringify(err),icon: 'none'});}});});},// 輪播圖變化onSwiperChange(e) {this.swiperIndex = e.detail.current;},// 保存圖片async onSaveImg() {let imgUrl = "";if (this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].url) {imgUrl = await this.posterImgs[this.swiperIndex].url;} else {imgUrl = await this.createPoster();}// #ifdef H5this.h5SaveImg = imgUrl;uni.hideLoading();// #endif// #ifdef MP-WEIXINuni.showLoading({title: '海報(bào)下載中'});if (settingWritePhotosAlbum) {uni.getSetting({success: res => {if (res.authSetting['scope.writePhotosAlbum']) {uni.saveImageToPhotosAlbum({filePath: imgUrl,success: () => {uni.hideLoading();uni.showToast({title: '保存成功'});}});} else {uni.showModal({title: '提示',content: '請(qǐng)先在設(shè)置頁面打開“保存相冊”使用權(quán)限',confirmText: '去設(shè)置',cancelText: '算了',success: data => {if (data.confirm) {uni.hideLoading();uni.openSetting();}}});}}});} else {settingWritePhotosAlbum = true;uni.authorize({scope: 'scope.writePhotosAlbum',success: () => {uni.saveImageToPhotosAlbum({filePath: imgUrl,success: () => {uni.hideLoading();uni.showToast({title: '保存成功'});}});}});}// #endif},}} </script><style lang="scss" scoped>.poster_page {min-height: 100vh;background-color: #f5f5f5;display: flex;align-items: center;}.poster_canvas {width: 750rpx;height: 1334rpx;position: fixed;top: -10000rpx;// top: 0rpx;left: 0rpx;background-color: pink;}.poster_swiper {height: 950rpx;width: 100%;swiper-item {box-sizing: border-box;display: flex;align-items: center;.goods_info_box {width: 100%;height: 100%;transform: scale(0.88);transition: all 0.4s;position: relative;overflow: hidden;background-color: #FFFFFF;&.active {transform: scale(1);}.goods_image {width: 100%;height: calc(100vw - 220rpx);}.goods_info {padding: 24rpx;.goods_name {color: #333;font-size: 30rpx;// @include bov(2);}.price_box {margin-top: 24rpx;display: flex;align-items: center;.price {font-size: 38rpx;color: red;}.store_price {margin-left: 30rpx;font-size: 26rpx;color: #999;text-decoration: line-through;}}.poster_info {border-top: 2rpx solid #f1f1f1;padding-top: 24rpx;// margin-top: 24rpx;display: flex;align-items: center;justify-content: space-between;.info {display: flex;flex-direction: column;view {color: #333;font-size: 28rpx;}text {color: #999;font-size: 24rpx;margin-top: 20rpx;}}.poster_code_image {display: block;width: 170rpx;height: 170rpx;flex-shrink: 0;}}}}}}.share_save_box {position: fixed;bottom: calc((100vh - 950rpx - 240rpx) / 4);left: 0;z-index: 6;width: 100%;display: flex;justify-content: space-around;border-top: 1px solid #eee;padding-top: 10rpx;.btn-options {display: flex;flex-direction: column;align-items: center;background-color: transparent;border-color: #F5F5F5!important;image {width: 50rpx;height: 50rpx;}text {line-height: 1.5;font-size: 24rpx;color: #333333;}&::after{border:none;}}}.h5_press_save {background-color: #000;position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;z-index: 100;image {width: 100%;}.download {font-size: 24rpx;color: #ffffff;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;flex-direction: row;justify-content: center;position: absolute;padding: 5rpx 30rpx;border-radius: 40rpx;bottom: 30rpx;left: 50%;transform: translateX(-50%);&:before {content: '';background: url(../../static/demo/icon_download.png);width: 24rpx;height: 24rpx;margin-right: 15rpx;}}} </style>總結(jié)
以上是生活随笔為你收集整理的uni-app小程序绘制海报的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 重磅 | 逆天操作，修图神器Photos
- 下一篇： 团队项目课堂展示