图片可设置大小

src/views/modules/labelSetting/LabelDesigner.vue

@@ -559,8 +559,8 @@ export default {
           data: ''
         },
         pic: {
-          width: 100,
-          height: 100
+          width: 200,  // 默认宽度200像素
+          height: 100  // 默认高度100像素
         },
         hLine: {
           width: 400,

src/views/modules/labelSetting/components/PropertyForm.vue

@@ -454,6 +454,32 @@
         <div v-if="element.previewUrl" class="image-preview">
           <img :src="element.previewUrl" alt="预览" />
         </div>
+
+        <!-- 图片尺寸设置 -->
+        <div class="form-row">
+          <el-form-item label="宽度(像素)" class="form-item-half">
+            <el-input
+              v-model="element.width"
+              :min="50"
+              :max="800"
+              controls-position="right"
+              size="mini"
+              @change="onImageSizeChange"
+            />
+          </el-form-item>
+
+          <el-form-item label="高度(像素)" class="form-item-half">
+            <el-input
+              v-model="element.height"
+              :min="50"
+              :max="800"
+              controls-position="right"
+              size="mini"
+              @change="onImageSizeChange"
+            />
+          </el-form-item>
+        </div>
+
         <el-form-item label="不显示规则(如:XXX=N)" class="form-item-half">
           <el-input v-model="element.showElement" controls-position="right" size="mini"/>
         </el-form-item>
@@ -736,6 +762,51 @@ export default {
       }
     },
 
+    /**
+     * 图片尺寸变化处理
+     */
+    onImageSizeChange() {
+      // 限制图片尺寸范围
+      if (this.element.width > 800) {
+        this.$message.warning('图片宽度最大为800像素')
+        this.element.width = 800
+      } else if (this.element.width < 50) {
+        this.element.width = 50
+      }
+
+      if (this.element.height > 800) {
+        this.$message.warning('图片高度最大为800像素')
+        this.element.height = 800
+      } else if (this.element.height < 50) {
+        this.element.height = 50
+      }
+
+      // 如果已经有图片数据，重新生成ZPL数据
+      if (this.element.previewUrl) {
+        this.regenerateImageZPL()
+      }
+    },
+
+    /**
+     * 重新生成图片的ZPL数据
+     */
+    regenerateImageZPL() {
+      if (!this.element.previewUrl) return
+
+      const img = new Image()
+      img.onload = () => {
+        try {
+          const { zplData } = this.convertImageToZPL(img)
+          this.element.zplData = zplData
+          // 触发父组件更新
+          this.$emit('image-upload', { zplData, previewUrl: this.element.previewUrl })
+        } catch (error) {
+          console.error('重新生成图片ZPL失败:', error)
+        }
+      }
+      img.src = this.element.previewUrl
+    },
+
     async handleImageUpload(event) {
       const file = event.target.files[0]
       if (!file) return
@@ -775,12 +846,13 @@ export default {
     },
 
     convertImageToZPL(img) {
-      const targetWidth = 200
-      const scale = targetWidth / img.width
+      // 使用元素的宽度和高度设置，如果没有设置则使用默认值
+      const targetWidth = parseInt(this.element.width) || 200
+      const targetHeight = parseInt(this.element.height) || Math.round(img.height * (targetWidth / img.width))
 
       const canvas = document.createElement('canvas')
       canvas.width = targetWidth
-      canvas.height = Math.round(img.height * scale)
+      canvas.height = targetHeight
 
       const ctx = canvas.getContext('2d')
       ctx.fillStyle = '#fff'