feat: 打包配置

zjk

1 天以前 173766e82d7cde9a7ae30b8896a9a287dff411f8

 laboratory/src/components/SignatureCanvas.vue

@@ -6,7 +6,7 @@
    :close-on-click-modal="false"
    custom-class="signature-dialog"
    append-to-body
    @close="$emit('update:visible', false)"
    @close="$emit('close', false)"
  >
    <div class="signature-container">
      <div class="signature-content">
@@ -32,6 +32,8 @@
</template>

<script>
import { customUploadRequest, getFullUrl } from '@/utils/utils'
import {editSignPicture} from './service'
export default {
  name: 'SignatureCanvas',
  props: {
@@ -163,30 +165,61 @@
      this.drawDashedBorder()
    },

    // 新增：base64转blob
    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

    // 修改：确认签名时上传图片
    confirmSignature() {
      const canvas = this.$refs.signatureCanvas
      const ctx = this.context
      
      const canvas = this.$refs.signatureCanvas;
      const ctx = this.context;
      // 保存当前画布内容
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      // 先填充背景色
      ctx.fillStyle = 'rgba(239, 248, 250, 1)'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      
      ctx.fillStyle = 'rgba(239, 248, 250, 1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      // 创建一个临时画布来保存签名内容
      const tempCanvas = document.createElement('canvas')
      tempCanvas.width = canvas.width
      tempCanvas.height = canvas.height
      const tempCtx = tempCanvas.getContext('2d')
      tempCtx.putImageData(imageData, 0, 0)
      
      const tempCanvas = document.createElement('canvas');
      tempCanvas.width = canvas.width;
      tempCanvas.height = canvas.height;
      const tempCtx = tempCanvas.getContext('2d');
      tempCtx.putImageData(imageData, 0, 0);
      // 将签名内容绘制到主画布上
      ctx.drawImage(tempCanvas, 0, 0)
      
      // 导出图片
      const signatureImage = canvas.toDataURL('image/png')
      this.$emit('confirm', signatureImage)
      ctx.drawImage(tempCanvas, 0, 0);
      // 导出图片为base64
      const base64Data = canvas.toDataURL('image/png');
      // base64转blob
      const blob = this.dataURLtoBlob(base64Data);
      // 新增：生成带时间戳的文件名
      const timestamp = Date.now();
      const fileName = `signature_${timestamp}.png`;
      const file = new File([blob], fileName, { type: blob.type });
      // 上传
      customUploadRequest({
        file,
        onSuccess: (res) => {
          // 假设返回的图片路径为 res.url
          const url = res.msg || res.data || res
          editSignPicture({signPicture:res.msg}).then(res=>{
            if(res.code==200){
              this.$message.success('签名成功');
              this.$emit('confirm', url);
            }
          })
        },
        onError: (err) => {
          // this.$message && this.$message.error ? this.$message.error('上传签名失败') : alert('上传签名失败');
        }
      });
    }
  },
  beforeDestroy() {