uniapp 生成商品分享通用海報源碼，使用canvas生成海報，圓片加圓角，標題換行顯示兩排 多余點點，兼容H5端和小程序端。

組件顯示代碼<template><view><uni-popup ref="popup" type="center" class="poster-alert"><view class="poster"><image :src="poster" @longpress="saveImg"></image></view><view class="hm row-center"><view class="item" @tap="shareWx"><button open-type="share" class="sharebtn"><image :src="util.ossimg('button-wechat.png')"></image></button><text>微信</text></view> <!-- #ifdef MP-WEIXIN --><view class="item" @tap="saveImg"><view class="sharebtn"><image :src="util.ossimg('button-save.png')"></image></view><text>保存圖片</text></view><!-- #endif --></view> </uni-popup></view> </template><script>export default{name:'GoodsPoster', //商品分享海報 data(){return{poster:'',}},methods:{show(){this.$refs.popup.open();},close(){this.$refs.popup.close();},//分享微信好友shareWx(){},//保存圖片async saveImg(){// #ifdef MP-WEIXINlet that = this;let imginfo = await uni.getImageInfo({src: that.poster })if(imginfo[1]){uni.saveImageToPhotosAlbum({filePath:imginfo[1].path,success() { that.tips.toast('保存成功') },fail(rej){ that.tips.toast('保存失敗'); }})}// #endif },} } </script><style lang="scss" scoped>.poster-alert{ width:520rpx;.poster{ width:520rpx; height:832rpx; overflow: hidden; background:#fff; border-radius:16rpx;}.hm{ margin-top:60rpx; .item{ text-align: center; margin:0 60rpx;.sharebtn{ background:none; border:0; padding:0; width:100rpx; height:100rpx; margin:0 auto; margin-bottom:12rpx;&:after{display:none;}image{ width:100rpx; height:100rpx; display:block; } }text{ font-size:24rpx; color:#fff;}}}} </style>

?

海報生成代碼<template><view> <!--分享海報--> <goods-poster ref="poster"></goods-poster><canvas canvas-id="mycanvas" class="mycanvas"></canvas> </view> </template><script>import GoodsPoster from '@/components/Goods/GoodsPoster.vue'export default{components:{ GoodsPoster },data(){return{}},async onLoad() {this.create();}, methods:{ //生成圓形填充圖片//參數：ctx:canvas, img:圖片, x:距離X, y:距離Y, r:半徑circleImg(ctx, img, x, y, r) {ctx.save();var d =2 * r;var cx = x + r;var cy = y + r;ctx.arc(cx, cy, r, 0, 2 * Math.PI);ctx.clip();ctx.drawImage(img, x, y, d, d);ctx.restore();},//圓角矩形填充圖片// 參數：ctx: canvas, img:圖片地址, x:距離X，y:距離Y, width:寬, height:高，radius:圓角大小drawRoundRectPath(ctx, img, x, y, width, height, radius) {ctx.save();ctx.translate(x, y);ctx.beginPath(0);ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);ctx.lineTo(radius, height);ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);ctx.lineTo(0, radius);ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);ctx.lineTo(width - radius, 0);ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);ctx.lineTo(width, height - radius);ctx.closePath();ctx.clip(); ctx.drawImage(img,0,0,uni.upx2px(460),uni.upx2px(460));ctx.restore();},// 文字自動換行// 參數：ctx:canvas, content:文字, drawX:距離X, drawY:距離Y, lineHeight: 行高, lineMaxWidth最大寬度, lineNum: 行數textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {var drawTxt = ''; // 當前繪制的內容var drawLine = 1; // 第幾行開始繪制var drawIndex = 0; // 當前繪制內容的索引// 判斷內容是否可以一行繪制完畢if(ctx.measureText(content).width <= lineMaxWidth){ctx.fillText(content, drawX, drawY);} else {for (var i = 0; i < content.length; i++) {drawTxt += content[i];if (ctx.measureText(drawTxt).width >= lineMaxWidth) {if (drawLine >= lineNum) {ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);break;} else {ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);drawIndex = i + 1;drawLine += 1;drawY += lineHeight;drawTxt = '';}} else {// 內容繪制完畢，但是剩下的內容寬度不到lineMaxWidthif (i === content.length - 1) {ctx.fillText(content.substring(drawIndex), drawX, drawY);}}}}}, //獲取圖片信息//微信:要下載遠程圖片到本地//H5遠程圖片時要將圖片生成base64位,這個可讓后臺幫生成base64位，前端生成始終有跨域問題頭疼, 另一種是將圖片放在static目錄async getimgInfo(path){// #ifdef MP-WEIXINconst info = await uni.downloadFile({url:path}) return info;// #endif // #ifdef H5const info = [{},{tempFilePath:'/static/img/p.png'}] return info;// #endif },//生成海報async create(){uni.showLoading({title:'海報生成中...'})let ctx = uni.createCanvasContext('mycanvas',this);ctx.fillStyle = "#fff"ctx.fillRect(0,0,uni.upx2px(520),uni.upx2px(845))//頭像let head = "https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg";let headurl = await this.getimgInfo(head);headurl = headurl[1].tempFilePath;this.circleImg(ctx,headurl,uni.upx2px(30),uni.upx2px(30),uni.upx2px(36))//姓名ctx.setFontSize(uni.upx2px(28))ctx.fillStyle = '#000';ctx.fillText("神夜大俠",uni.upx2px(115),uni.upx2px(55))//說明ctx.setFontSize(uni.upx2px(20))ctx.fillStyle = '#000';ctx.fillText("這件商品很棒，推薦給你看看",uni.upx2px(115),uni.upx2px(85))//logolet logo = "https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg";let logourl = await this.getimgInfo(logo);logourl = logourl[1].tempFilePath;ctx.drawImage(logourl,uni.upx2px(410),uni.upx2px(35),uni.upx2px(80),uni.upx2px(40))//商品圖let img = "https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg";let imgurl = await this.getimgInfo(img);imgurl = imgurl[1].tempFilePath;this.drawRoundRectPath(ctx,imgurl,uni.upx2px(30),uni.upx2px(120),uni.upx2px(460),uni.upx2px(460),uni.upx2px(16)); //商品標題ctx.setFontSize(uni.upx2px(24))ctx.fillStyle = '#333';this.textPrewrap(ctx,"這是商品標題名稱商品標題名稱",uni.upx2px(30),uni.upx2px(670),uni.upx2px(36),uni.upx2px(250),2);//價格ctx.setFontSize(uni.upx2px(22))ctx.fillStyle = this.config.webColor;ctx.fillText("￥",uni.upx2px(30),uni.upx2px(760))ctx.setFontSize(uni.upx2px(36))ctx.fillStyle = this.config.webColor;ctx.fillText("58.00",uni.upx2px(50),uni.upx2px(760))//二維碼let ewm = 'https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg';let ewmurl = await this.getimgInfo(ewm);ewmurl = ewmurl[1].tempFilePath;ctx.drawImage(ewmurl,uni.upx2px(339),uni.upx2px(620),uni.upx2px(150),uni.upx2px(150))//掃碼購買ctx.setFontSize(uni.upx2px(20))ctx.fillStyle = "#333";ctx.fillText("-掃碼購買商品-",uni.upx2px(347),uni.upx2px(800)) ctx.draw();setTimeout(()=>{uni.canvasToTempFilePath({canvasId:'mycanvas',success:res=>{this.$refs.poster.poster = res.tempFilePath;this.$refs.poster.show();uni.hideLoading();},fail:err=>{this.tips.toast('海報生成失敗')uni.hideLoading();}})},500) }, }} </script><style lang="scss" scoped> .mycanvas{ width:520rpx; height:845rpx; background:#fff; position: fixed; bottom:1000px; border-radius:16rpx;} </style>

總結

以上是生活随笔為你收集整理的uniapp 生成商品分享通用海报源码详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。