前端Vue一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13326

效果图如下:

cc-beautyPoster

使用方法

 <!-- posterData： 海报数据 -->  <cc-beautyPoster :posterData="posterData"></cc-beautyPoster>  <!-- 海报数据字段 -->  posterData: {  // 用户姓名  name: '小明',  // 用户头像  logo: 'https://cdn.pixabay.com/photo/2014/02/17/10/20/statue-of-liberty-267948_1280.jpg',  // 商品名称  title: '精美时尚苹果手机一部',  // 商品价格  money: '5200.90',  // 商品图片  img: 'https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg',  // 商品链接  url: 'https://www.apple.com.cn/iphone/'  },  

HTML代码实现部分

 <template>  <view class="content">  <button style="margin-top: 38px;" @click="openPoster">生成商品海报</button>  <!-- 海报弹框 -->  <uni-popup ref="popup" type="center">  <view class="center_poter" style="margin: 0 auto;" v-if="shows">  <!-- #ifndef MP -->  <image class="close_btn" src="/static/images/goods/close.png" alt="前端Vue一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片" @click="hidePoster">  </image>  <!-- #endif -->  <!-- #ifdef MP -->  <cover-image class="close_btn" src="/static/images/goods/close.png" alt="前端Vue一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片" @click="hidePoster">  </cover-image>  <!-- #endif -->  <!-- posterData： 海报数据 -->  <cc-beautyPoster :posterData="posterData"></cc-beautyPoster>  </view>  </uni-popup>  </view>  </template>  <script>  import uniPopup from '@/components/uni-popup/uni-popup.vue'  export default {  components: {  uniPopup  },  data() {  return {  shows: false,  posterData: {  // 用户姓名  name: '小明',  // 用户头像  logo: 'https://cdn.pixabay.com/photo/2014/02/17/10/20/statue-of-liberty-267948_1280.jpg',  // 商品名称  title: '精美时尚苹果手机一部',  // 商品价格  money: '5200.90',  // 商品图片  img: 'https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg',  // 商品链接  url: 'https://www.apple.com.cn/iphone/'  },  }  },  methods: {  //生成海报  openPoster() {  this.shows = false  uni.showLoading({  title: '海报绘制中..'  })  this.$refs.popup.open()  setTimeout(() => {  uni.hideLoading()  this.shows = true  }, 400)  },  //关闭海报  hidePoster() {  this.$refs.popup.close()  },  }  }  </script>  <style lang="scss" scoped>  .content {  display: flex;  flex-direction: column;  }  .center_poter {  position: relative;  z-index: 999;  .close_btn {  width: 40upx;  height: 40upx;  background-color: rgba($color: #000000, $alpha: .3);  position: absolute;  top: 5upx;  right: 5upx;  z-index: 500;  padding: 5upx;  border-radius: 6upx;  z-index: 999;  text-align: center;  }  }  </style>