海报：完善商品海报分享

sheep/components/s-share-modal/canvas-poster/index.vue

@@ -2,15 +2,39 @@
 <template>
   <su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
     <view class="ss-flex-col ss-col-center ss-row-center">
-      <template v-if="poster.views.length > 0">
-        <l-painter :board="poster" />
-      </template>
+      <view
+        v-if="poster.views.length === 0"
+        class="poster-title ss-flex ss-row-center"
+        :style="{
+          height: poster.height + 'px',
+          width: poster.width + 'px',
+        }"
+      >
+        海报加载中...
+      </view>
+      <!-- v-if 保障等待所有的海报信息都加载完后才开始渲染 -->
+          <template v-if="poster.views.length > 0">
+            <l-painter :board="poster" ref="painterRef"/>
+          </template>
+    </view>
+    <view
+      class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
+      v-if="poster.views.length > 0"
+    >
+      <button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
+      <button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
+        {{
+          ['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
+            ? '长按图片保存'
+            : '保存图片'
+        }}
+      </button>
     </view>
   </su-popup>
 </template>
 
 <script setup>
-  import { getCurrentInstance, reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import sheep from '@/sheep';
   import { getPosterData } from '@/sheep/components/s-share-modal/canvas-poster/poster';
 
@@ -26,24 +50,22 @@
     },
   });
 
-
   const poster = reactive({
     css: {
       // 根节点若无尺寸，自动获取父级节点
       width: sheep.$platform.device.windowWidth * 0.9,
-      height: 600,
+      height: 600
     },
     views: [],
   });
 
-
   const emits = defineEmits(['success', 'close']);
-  const vm = getCurrentInstance();
 
   const onClosePoster = () => {
     emits('close');
   };
 
+  const painterRef = ref()
   // 保存海报图片
   const onSavePoster = () => {
     if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
@@ -51,26 +73,35 @@
       return;
     }
 
-    uni.saveImageToPhotosAlbum({
-      filePath: poster.src,
+    painterRef.value.canvasToTempFilePathSync({
+      fileType: "jpg",
+      // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+      pathType: 'url',
+      quality: 1,
       success: (res) => {
-        onClosePoster();
-        sheep.$helper.toast('保存成功');
-      },
-      fail: (err) => {
-        sheep.$helper.toast('保存失败');
-        console.log('图片保存失败:', err);
+        console.log(res.tempFilePath);
+        // 非H5 保存到相册
+        uni.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: (res) => {
+            onClosePoster();
+            sheep.$helper.toast('保存成功');
+          },
+          fail: (err) => {
+            sheep.$helper.toast('保存失败');
+            console.log('图片保存失败:', err);
+          },
+        });
       },
     });
   };
 
-  // 使用 canvas 生成海报
-  async function getPoster(params) {
-    let drawer = await getPosterData({
-      width: sheep.$platform.device.windowWidth * 0.9,
+  // 获得海报数据
+  async function getPoster() {
+    poster.views = await getPosterData({
+      width: poster.css.width,
       shareInfo: props.shareInfo,
     });
-    poster.views = drawer;
   }
 
   defineExpose({
@@ -120,10 +151,4 @@
     border-radius: 20rpx;
   }
 
-  .hideCanvas {
-    position: fixed;
-    top: -99999rpx;
-    left: -99999rpx;
-    z-index: -99999;
-  }
 </style>

sheep/components/s-share-modal/canvas-poster/poster/goods.js

@@ -12,7 +12,6 @@ const goods = async (poster) => {
       src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
       css: {
         width,
-        background: 'white',
         position: 'fixed',
         'object-fit': 'contain',
         top: '0',

sheep/components/s-share-modal/canvas-poster/useCanvas.js

@@ -1,87 +0,0 @@
-/**
- * Shopro + qs-canvas 绘制海报
- * @version 1.0.0
- * @author lidongtony
- * @param {Object} options - 海报参数
- * @param {Object} vm - 自定义组件实例
- */
-import QSCanvas from 'qs-canvas';
-import { getPosterData } from './poster';
-
-export default async function useCanvas(options, vm) {
-  const width = options.width;
-  const qsc = new QSCanvas(
-    {
-      canvasId: options.canvasId,
-      width: options.width,
-      height: options.height,
-      setCanvasWH: (canvas) => {
-        options.height = canvas.height;
-      },
-    },
-    vm,
-  );
-
-  let drawer = await getPosterData(options);
-  console.log(drawer);
-  // 绘制背景图
-  const background = await qsc.drawImg({
-    type: 'image',
-    val: drawer.background,
-    x: 0,
-    y: 0,
-    width,
-    mode: 'widthFix',
-    zIndex: 0,
-  });
-  await qsc.updateCanvasWH({
-    width: background.width,
-    height: background.bottom,
-  });
-
-  let list = drawer.list;
-
-  for (let i = 0; i < list.length; i++) {
-    let item = list[i];
-    // 绘制文字
-    if (item.type === 'text') {
-      await qsc.drawText(item);
-    }
-    // 绘制图片
-    if (item.type === 'image') {
-      if (item.d) {
-        qsc.setCircle({
-          x: item.x,
-          y: item.y,
-          d: item.d,
-          clip: true,
-        });
-      }
-
-      if (item.r) {
-        qsc.setRect({
-          x: item.x,
-          y: item.y,
-          height: item.height,
-          width: item.width,
-          r: item.r,
-          clip: true,
-        });
-      }
-      await qsc.drawImg(item);
-      qsc.restore();
-    }
-
-    // 绘制二维码
-    if (item.type === 'qrcode') {
-      await qsc.drawQrCode(item);
-    }
-  }
-
-  await qsc.draw();
-  // 延迟执行, 防止不稳定
-  setTimeout(async () => {
-    options.src = await qsc.toImage();
-  }, 100);
-  return options;
-}