diff --git a/src/views/modules/labelSetting/LabelDesigner.vue b/src/views/modules/labelSetting/LabelDesigner.vue index f70f73d..eb1b313 100644 --- a/src/views/modules/labelSetting/LabelDesigner.vue +++ b/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, diff --git a/src/views/modules/labelSetting/components/PropertyForm.vue b/src/views/modules/labelSetting/components/PropertyForm.vue index 0cb8ad5..7e5c2cf 100644 --- a/src/views/modules/labelSetting/components/PropertyForm.vue +++ b/src/views/modules/labelSetting/components/PropertyForm.vue @@ -454,6 +454,32 @@
预览
+ + +
+ + + + + + + +
+ @@ -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'