uni-app小程序绘制海报

简单版

<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>邀请您加入</view><view class="poster_title">{{posterTitlt}}</view><view class="poster_dot"><view class="line"></view></view><view class="inviter_code">邀请码：{{inviteCode}}</view><image class="inviter_code_url" :src="inviteCodeUrl" mode=""></image><view class="poster_info">长按识别 立即加入</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;// 上个节点let previousNode = 0;// 记录节点宽度let nodeWidth = 0;// 文本换行数组let rowText = [];// 如果是字母，侧保存长度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()// 因为边缘描边存在锯齿，最好指定使用 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()}// 是否授权保存图片let settingWritePhotosAlbum = false;export default {data() {return {shareUrl: '',posterBg: 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/ytB7r7_1608704284756.png',posterTitlt: '智能记账，一站式企业服务平台',inviteCode: '99999',inviteCodeUrl: '/pages/index/index'}},computed: {avatarUrl() {return 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/XG1WkA_1608705366010.png'},inviter() {return '茉莉'}},methods: {// 创建海报createPoster() {let self = thisreturn new Promise((resolve, reject) => {uni.showLoading({title: '海报生成中'});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(); //开始绘制//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针ctx.arc(185, 170, 25, 0, Math.PI * 2, false);ctx.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因ctx.drawImage(avatarUrl.path, 160, 145, 50, 50); // 推进去图片，必须是https图片ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制let textTop = 215// 绘制邀请人ctx.setFontSize(16);ctx.setFillStyle('#333');let middel = (375 / 2)let inviterW = ctx.measureText(self.inviter).width// 70 是邀请您加入 的宽度let inviterMiddle = middel - ((inviterW + 70 + 6) / 2)ctx.fillText(self.inviter, inviterMiddle, textTop);ctx.setFontSize(14);ctx.fillText('邀请您加入', inviterMiddle + inviterW + 6, textTop - 1);textTop += 30// 绘制标题ctx.setFontSize(18);ctx.setFillStyle('#FF8200');let posterTitltW = ctx.measureText(self.posterTitlt).width// 70 是邀请您加入 的宽度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();// 绘制两个蓝色半圆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// 绘制邀请码ctx.font = `10px sans-serif`;ctx.setFontSize(15);ctx.setFillStyle('#333');let inviteCode = '邀请码:' + 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// 绘制长按识别 立即加入ctx.setFontSize(12);ctx.setFillStyle('#969696');let infoW = ctx.measureText('长按识别 立即加入').widthlet infoMiddle = middel - (infoW / 2)ctx.fillText('长按识别 立即加入', infoMiddle, textTop);console.log('生成前')ctx.draw(true, () => {console.log('生成了111')// canvas画布转成图片并返回图片地址uni.canvasToTempFilePath({canvasId: 'poster',width: 375,height: 673,success: (result) => {self.shareUrl = result.tempFilePath;console.log("海报制作成功！");uni.hideLoading();resolve(result.tempFilePath);},fail: (err) => {console.log("海报制作失败！", err);uni.hideLoading();reject();}})});},fail: err => {console.log('失败了1', err)uni.hideLoading();uni.showToast({title: '海报制作失败，图片下载失败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: '海报下载中'});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: '请先在设置页面打开“保存相册”使用权限',confirmText: '去设置',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') { // 来自页面内分享按钮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>

动态切换版

<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>长按识别二维码访问</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>发给好友</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;// 上个节点let previousNode = 0;// 记录节点宽度let nodeWidth = 0;// 文本换行数组let rowText = [];// 如果是字母，侧保存长度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;}// 是否授权保存图片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: {// 创建海报createPoster() {let self = thisreturn new Promise((resolve, reject) => {uni.showLoading({title: '海报生成中'});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) => {// 商品标题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);}});// 商品价格ctx.setFontSize(26);ctx.setFillStyle('#f00');ctx.fillText(self.price, 17, textTop + 47);// 商品门市价ctx.setFontSize(18);ctx.setFillStyle('#999');let textLeft = 38 + (self.price.length * 13)ctx.fillText(self.price, textLeft, textTop + 45);// 商品门市价横线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();// 长按识别二维码访问ctx.setFontSize(19);ctx.setFillStyle('#333');ctx.fillText("长按识别二维码访问", 17, textTop + 136);// 平台名称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画布转成图片并返回图片地址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("海报制作成功！");uni.hideLoading();resolve(result.tempFilePath);},fail: (err) => {console.log("海报制作失败！", err);uni.hideLoading();reject();}})});},fail: err => {console.log('失败了1', err)uni.hideLoading();uni.showToast({title: '海报制作失败，图片下载失败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: '海报下载中'});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: '请先在设置页面打开“保存相册”使用权限',confirmText: '去设置',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>

uni-app小程序绘制海报相关推荐

微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...
小程序绘制海报的那些问题——记录一次uniapp小程序生成分享海报的问题及解决
最近做了一个需求,一个推广活动,在小程序中生成推广海报并且支持保存在手机相册,UI稿中呈现的是一个非全屏的固定宽高的海报图片,在保存的时候遇到了如下问题并一一解决 [问题1]开发者工具中可以正常绘制海 ...
小程序绘制海报保存到相册
说在前面的话自己第一次制作了海报并且保存相册,故来记录一下...分享给需要的朋友,这里以字节小程序为例,明白思路,学以致用!!! 正文开始了(一本正经) 思路:1.用canvas绘图,将自己的海报绘 ...
uni.app小程序的ajax封装详细讲解
我懒得说了 //放url相同的片段 const rootUrl = ""// 示例: ajax({ url:'/api/login', param: param, method: ...
uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
uni.app小程序失焦聚焦，表单验证
<input type="text" placeholder="请输入手机号/邮箱/账号" v-model="username" @f ...
uni.app小程序实现跳转获取数据
式例如上图所示 (前提是点击索引获得的id与获得数据的id是一样的) 首先是获取文档的数据我用的async await来获取数据,也可以用.then方法获取数据 async onLoad() {le ...
小程序保存海报，canvas绘制然后保存到相册，canvas文字换行计算
一.小程序保存海报,canvas绘制然后保存到相册 1.wxml <view class="box-canvas"><canvas canvas-id='myCa ...
uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...

uni-app小程序绘制海报

uni-app小程序绘制海报相关推荐

最新文章

热门文章