uni-app生成海报并且能下载到本地相册（带小程序码）

最新推荐文章于 2024-08-14 15:24:40 发布

谢宴

最新推荐文章于 2024-08-14 15:24:40 发布

阅读量497

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/witer_flower/article/details/132209963

版权

               context.save();
               context.beginPath();
               context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
               context.lineTo(x + width - radius, y);
               context.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
               context.lineTo(x + width, y + height - radius);
               context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
               context.lineTo(x + radius, y + height);
               context.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
               context.lineTo(x, y + radius);
               context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
               context.closePath();
               context.clip();

               context.setFillStyle('#ffffff');
               context.fillRect(0, 0, width, height);
               context.draw();
               // 绘制用户昵称
               context.setFontSize(14);
               context.setFillStyle('#000000');
               // 这里根据自己的项目填写用户昵称的字段
               context.fillText('来自YUAN的分享', 100, 38);
               context.setFontSize(12);
               // 绘制商品名称，这里是调用一个方法，按字符串长度进行分割换行。【可以做一个优化】

               context.drawImage(this.logoImg, 20, 400, 130, 40);
               // 绘制商品详情
               uni.downloadFile({
                   url: this.imgUrl,
                   success: function(res) {
                       const x = 20;
                       const y = 55;
                       const width = 250;
                       const height = 320;
                       const radius = 8;

                       context.save();
                       context.beginPath();
                       context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
                       context.lineTo(x + width - radius, y);
                       context.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
                       context.lineTo(x + width, y + height - radius);
                       context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
                       context.lineTo(x + radius, y + height);
                       context.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
                       context.lineTo(x, y + radius);
                       context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
                       context.closePath();
                       context.clip();

context.drawImage(res.tempFilePath, x, y, width, height);

                       context.restore();
                       context.draw(true);
                   }
               });
               // 绘制小程序码
               context.drawImage(qrImg, 200, 380, 70, 70);
               // 绘制完成，让canvas显示【这里看自己项目，是否有loading动画】
               this.posterInfo.status = true;
           },
           //*****
       },
       onShareAppMessage(res) {
           if (res.from === 'button') { // 来自页面内分享按钮
               return {
                   title: "hhhh", //分享标题
                   path: '/pages/tzss/tzss?ids=' + JSON.stringify(this.productList), //分享页面路径
                   imageUrl: '', //分享图标
                   desc: '', //自定义分享描述
               }
               this.search()
           } else {
               return {
                   title: "哈哈哈", //分享标题
                   path: '/pages/tzss/tzss?id=' + this.nr, //分享页面路径
                   imageUrl: '', //分享图标
                   desc: '', //自定义分享描述
               }
           }

},
}
</script>

   // 弹窗
   .pop_up {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 999;
   }

   // 功能按钮
   .share_icon {
       height: 280rpx;
       width: 100%;
       background-color: #ededed;
       border-radius: 10rpx 10rpx 0 0;
       position: fixed;
       bottom: 0;
       box-shadow: 4rpx 0rpx 49rpx 0rpx #5a5a5a;

       .icons {
           background-color: #fff;
           height: 70%;
           width: 100%;
           padding: 0 60rpx;
           box-sizing: border-box;
           border-radius: 10rpx 10rpx 0 0;

           image {
               width: 95rpx;
               height: 121rpx;
               font-size: 24rpx;
               color: #ccc;
           }

           button {
               background-color: rgba(0, 0, 0, 0);
               padding: 0;
               margin: 0;
           }

           .shareq {
               width: 80rpx;
               height: 121rpx;
           }
       }
   }

   .esc {
       height: 30%;
       width: 100%;
       background-color: #fff;
       margin-top: 10rpx;
       color: #848484;
   }

   // 生成海报
   .my-canvas-box {
       width: 750rpx;
       height: 100%;
       position: fixed;
       background-color: rgba(0, 0, 0, 0.6);
       z-index: 99;

       &.hide {
           display: none;
       }

       &.show {
           display: block;
       }

       .canvas-tip {
           color: #ffffff;
           font-size: 24rpx;
           margin-top: 30rpx;
           text-align: center;
       }

       /* #ifdef MP-WEIXIN */
       .my-canvas {
           width: 600rpx;
           height: 950rpx;
           border-radius: 10rpx;
           background-color: #ffffff;
           margin: 80rpx auto;
       }

/* #endif */

       /* #ifdef APP-PLUS || H5 */
       .my-canvas {
           width: 600rpx;
           height: 950rpx;
           border-radius: 10rpx;
           background-color: #ffffff;
           margin-top: 220rpx auto;
       }

/* #endif */
}
</style>