From 8dd5fb6519bc7f2a085507b1622d6ef8604dd301 Mon Sep 17 00:00:00 2001 From: yf <770153798@qq.com> Date: Tue, 7 Jan 2025 01:07:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E7=A8=BF=E4=BB=B6?= =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6=E4=B8=8B=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../saleorder/front/dto/SaleOrderSkuDTO.java | 8 +- .../saleordersku/SaleOrderSkuDO.java | 4 + .../saleorder/SaleOrderServiceImpl.java | 1 + hangtag-ui/hangtag-ui-admin/index.html | 1 + hangtag-ui/hangtag-ui-admin/package.json | 2 +- .../public/js/dom-to-image.js | 777 ++++++++++++++++++ .../DraftDesign/components/DesignPropEdit.vue | 84 +- .../components/node/TextCellNode.vue | 26 +- hangtag-ui/hangtag-ui-front/index.html | 1 + hangtag-ui/hangtag-ui-front/package.json | 1 - .../public/js/dom-to-image.js | 777 ++++++++++++++++++ .../DraftDesign/components/DesignPropEdit.vue | 84 +- .../components/node/TextCellNode.vue | 26 +- .../OrderAddProductStep/ProductItem1.vue | 50 +- .../OrderAddProductStep/ProductSkuList.vue | 22 +- sql/mysql/20250107/产品信息新增字段.sql | 5 + 16 files changed, 1786 insertions(+), 83 deletions(-) create mode 100644 hangtag-ui/hangtag-ui-admin/public/js/dom-to-image.js create mode 100644 hangtag-ui/hangtag-ui-front/public/js/dom-to-image.js create mode 100644 sql/mysql/20250107/产品信息新增字段.sql diff --git a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/saleorder/front/dto/SaleOrderSkuDTO.java b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/saleorder/front/dto/SaleOrderSkuDTO.java index 5a53609..82332b8 100644 --- a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/saleorder/front/dto/SaleOrderSkuDTO.java +++ b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/saleorder/front/dto/SaleOrderSkuDTO.java @@ -49,10 +49,15 @@ public class SaleOrderSkuDTO implements Serializable { private Double height; /** - * 最终稿件 base64编码数据 + * 预览稿件 */ private String previewImage; + /** + * 源文件链接 + */ + private String sourceFile; + /** * 模板类型-字典 product_draft_template_type 1有模板 2无模板 3尺码唛 */ @@ -92,6 +97,7 @@ public class SaleOrderSkuDTO implements Serializable { this.width = saleOrderSkuDO.getWidth().doubleValue(); this.height = saleOrderSkuDO.getHeight().doubleValue(); this.previewImage = saleOrderSkuDO.getPreviewImage(); + this.sourceFile = saleOrderSkuDO.getSourceFile(); this.productTemplateType = saleOrderSkuDO.getProductTemplateType(); this.propInfo = saleOrderSkuDO.getPropInfo(); this.labelSize = saleOrderSkuDO.getLabelSize(); diff --git a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/dataobject/saleordersku/SaleOrderSkuDO.java b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/dataobject/saleordersku/SaleOrderSkuDO.java index 8d09cdc..e5c432e 100644 --- a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/dataobject/saleordersku/SaleOrderSkuDO.java +++ b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/dataobject/saleordersku/SaleOrderSkuDO.java @@ -68,6 +68,10 @@ public class SaleOrderSkuDO extends BaseDO { * 预览图 */ private String previewImage; + /** + * 设计稿源文件 + */ + private String sourceFile; /** * 动态属性 json动态属性 */ diff --git a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/saleorder/SaleOrderServiceImpl.java b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/saleorder/SaleOrderServiceImpl.java index 44f9de9..adf5a03 100644 --- a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/saleorder/SaleOrderServiceImpl.java +++ b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/saleorder/SaleOrderServiceImpl.java @@ -719,6 +719,7 @@ public class SaleOrderServiceImpl implements SaleOrderService { saleOrderSkuDO.setProductTemplateType(saleOrderSkuDTO.getProductTemplateType()); saleOrderSkuDO.setSpecInfo(JSONUtil.toJsonStr(saleOrderSkuDTO.getSpecInfo())); saleOrderSkuDO.setRemark(saleOrderSkuDTO.getRemark()); + saleOrderSkuDO.setSourceFile(saleOrderSkuDTO.getSourceFile()); saleOrderSkuDO.setId(FuncUtil.getNextId()); skuList.add(saleOrderSkuDO); } diff --git a/hangtag-ui/hangtag-ui-admin/index.html b/hangtag-ui/hangtag-ui-admin/index.html index b2323e4..c53c816 100644 --- a/hangtag-ui/hangtag-ui-admin/index.html +++ b/hangtag-ui/hangtag-ui-admin/index.html @@ -15,6 +15,7 @@ content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！" /> %VITE_APP_TITLE% +
diff --git a/hangtag-ui/hangtag-ui-admin/package.json b/hangtag-ui/hangtag-ui-admin/package.json index ea734b3..fb0e980 100644 --- a/hangtag-ui/hangtag-ui-admin/package.json +++ b/hangtag-ui/hangtag-ui-admin/package.json @@ -49,12 +49,12 @@ "axios": "^1.6.8", "benz-amr-recorder": "^1.1.5", "bpmn-js-token-simulation": "^0.10.0", + "bwip-js": "^4.5.1", "camunda-bpmn-moddle": "^7.0.1", "cropperjs": "^1.6.1", "crypto-js": "^4.2.0", "dayjs": "^1.11.10", "diagram-js": "^12.8.0", - "dom-to-image": "^2.6.0", "driver.js": "^1.3.1", "echarts": "^5.5.0", "echarts-wordcloud": "^2.1.0", diff --git a/hangtag-ui/hangtag-ui-admin/public/js/dom-to-image.js b/hangtag-ui/hangtag-ui-admin/public/js/dom-to-image.js new file mode 100644 index 0000000..ab14a2a --- /dev/null +++ b/hangtag-ui/hangtag-ui-admin/public/js/dom-to-image.js @@ -0,0 +1,777 @@ +(function (global) { + 'use strict'; + + var util = newUtil(); + var inliner = newInliner(); + var fontFaces = newFontFaces(); + var images = newImages(); + + // Default impl options + var defaultOptions = { + // Default is to fail on error, no placeholder + imagePlaceholder: undefined, + // Default cache bust is false, it will use the cache + cacheBust: false + }; + + var domtoimage = { + toSvg: toSvg, + toPng: toPng, + toJpeg: toJpeg, + toBlob: toBlob, + toPixelData: toPixelData, + impl: { + fontFaces: fontFaces, + images: images, + util: util, + inliner: inliner, + options: {} + } + }; + + if (typeof module !== 'undefined') + module.exports = domtoimage; + else + global.domtoimage = domtoimage; + + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options + * @param {Function} options.filter - Should return true if passed node should be included in the output + * (excluding node means excluding it's children as well). Not called on the root node. + * @param {String} options.bgcolor - color for the background, any valid CSS color value. + * @param {Number} options.width - width to be applied to node before rendering. + * @param {Number} options.height - height to be applied to node before rendering. + * @param {Object} options.style - an object whose properties to be copied to node's style before rendering. + * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only), + defaults to 1.0. + * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch + * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url + * @return {Promise} - A promise that is fulfilled with a SVG image data URL + * */ + function toSvg(node, options) { + options = options || {}; + copyOptions(options); + return Promise.resolve(node) + .then(function (node) { + return cloneNode(node, options.filter, true); + }) + .then(embedFonts) + .then(inlineImages) + .then(applyOptions) + .then(function (clone) { + return makeSvgDataUri(clone, + options.width || util.width(node), + options.height || util.height(node) + ); + }); + + function applyOptions(clone) { + if (options.bgcolor) clone.style.backgroundColor = options.bgcolor; + + if (options.width) clone.style.width = options.width + 'px'; + if (options.height) clone.style.height = options.height + 'px'; + + if (options.style) + Object.keys(options.style).forEach(function (property) { + clone.style[property] = options.style[property]; + }); + + return clone; + } + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data. + * */ + function toPixelData(node, options) { + return draw(node, options || {}) + .then(function (canvas) { + return canvas.getContext('2d').getImageData( + 0, + 0, + util.width(node), + util.height(node) + ).data; + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a PNG image data URL + * */ + function toPng(node, options) { + return draw(node, options || {}) + .then(function (canvas) { + return canvas.toDataURL(); + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a JPEG image data URL + * */ + function toJpeg(node, options) { + options = options || {}; + return draw(node, options) + .then(function (canvas) { + return canvas.toDataURL('image/jpeg', options.quality || 1.0); + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a PNG image blob + * */ + function toBlob(node, options) { + return draw(node, options || {}) + .then(util.canvasToBlob); + } + + function copyOptions(options) { + // Copy options to impl options for use in impl + if(typeof(options.imagePlaceholder) === 'undefined') { + domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder; + } else { + domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder; + } + + if(typeof(options.cacheBust) === 'undefined') { + domtoimage.impl.options.cacheBust = defaultOptions.cacheBust; + } else { + domtoimage.impl.options.cacheBust = options.cacheBust; + } + } + + function draw(domNode, options) { + return toSvg(domNode, options) + .then(util.makeImage) + .then(util.delay(100)) + .then(function (image) { + var canvas = newCanvas(domNode); + let context = canvas.getContext('2d'); + const ratio = window.devicePixelRatio || 1; + canvas.width *= ratio; + canvas.height *= ratio; + context.scale(ratio, ratio); + context.drawImage(image, 0, 0); + return canvas; + + }); + + function newCanvas(domNode) { + var canvas = document.createElement('canvas'); + canvas.width = options.width || util.width(domNode); + canvas.height = options.height || util.height(domNode); + + + if (options.bgcolor) { + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = options.bgcolor; + ctx.fillRect(0, 0, canvas.width, canvas.height); + } + + return canvas; + } + } + + function cloneNode(node, filter, root) { + if (!root && filter && !filter(node)) return Promise.resolve(); + + return Promise.resolve(node) + .then(makeNodeCopy) + .then(function (clone) { + return cloneChildren(node, clone, filter); + }) + .then(function (clone) { + return processClone(node, clone); + }); + + function makeNodeCopy(node) { + if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL()); + return node.cloneNode(false); + } + + function cloneChildren(original, clone, filter) { + var children = original.childNodes; + if (children.length === 0) return Promise.resolve(clone); + + return cloneChildrenInOrder(clone, util.asArray(children), filter) + .then(function () { + return clone; + }); + + function cloneChildrenInOrder(parent, children, filter) { + var done = Promise.resolve(); + children.forEach(function (child) { + done = done + .then(function () { + return cloneNode(child, filter); + }) + .then(function (childClone) { + if (childClone) parent.appendChild(childClone); + }); + }); + return done; + } + } + + function processClone(original, clone) { + if (!(clone instanceof Element)) return clone; + + return Promise.resolve() + .then(cloneStyle) + .then(clonePseudoElements) + .then(copyUserInput) + .then(fixSvg) + .then(function () { + return clone; + }); + + function cloneStyle() { + copyStyle(window.getComputedStyle(original), clone.style); + + function copyStyle(source, target) { + if (source.cssText) target.cssText = source.cssText; + else copyProperties(source, target); + + function copyProperties(source, target) { + util.asArray(source).forEach(function (name) { + target.setProperty( + name, + source.getPropertyValue(name), + source.getPropertyPriority(name) + ); + }); + } + } + } + + function clonePseudoElements() { + [':before', ':after'].forEach(function (element) { + clonePseudoElement(element); + }); + + function clonePseudoElement(element) { + var style = window.getComputedStyle(original, element); + var content = style.getPropertyValue('content'); + + if (content === '' || content === 'none') return; + + var className = util.uid(); + clone.className = clone.className + ' ' + className; + var styleElement = document.createElement('style'); + styleElement.appendChild(formatPseudoElementStyle(className, element, style)); + clone.appendChild(styleElement); + + function formatPseudoElementStyle(className, element, style) { + var selector = '.' + className + ':' + element; + var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style); + return document.createTextNode(selector + '{' + cssText + '}'); + + function formatCssText(style) { + var content = style.getPropertyValue('content'); + return style.cssText + ' content: ' + content + ';'; + } + + function formatCssProperties(style) { + + return util.asArray(style) + .map(formatProperty) + .join('; ') + ';'; + + function formatProperty(name) { + return name + ': ' + + style.getPropertyValue(name) + + (style.getPropertyPriority(name) ? ' !important' : ''); + } + } + } + } + } + + function copyUserInput() { + if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value; + if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value); + } + + function fixSvg() { + if (!(clone instanceof SVGElement)) return; + clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + + if (!(clone instanceof SVGRectElement)) return; + ['width', 'height'].forEach(function (attribute) { + var value = clone.getAttribute(attribute); + if (!value) return; + + clone.style.setProperty(attribute, value); + }); + } + } + } + + function embedFonts(node) { + return fontFaces.resolveAll() + .then(function (cssText) { + var styleNode = document.createElement('style'); + node.appendChild(styleNode); + styleNode.appendChild(document.createTextNode(cssText)); + return node; + }); + } + + function inlineImages(node) { + return images.inlineAll(node) + .then(function () { + return node; + }); + } + + function makeSvgDataUri(node, width, height) { + return Promise.resolve(node) + .then(function (node) { + node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); + return new XMLSerializer().serializeToString(node); + }) + .then(util.escapeXhtml) + .then(function (xhtml) { + return '' + xhtml + ''; + }) + .then(function (foreignObject) { + return '' + + foreignObject + ''; + }) + .then(function (svg) { + return 'data:image/svg+xml;charset=utf-8,' + svg; + }); + } + + function newUtil() { + return { + escape: escape, + parseExtension: parseExtension, + mimeType: mimeType, + dataAsUrl: dataAsUrl, + isDataUrl: isDataUrl, + canvasToBlob: canvasToBlob, + resolveUrl: resolveUrl, + getAndEncode: getAndEncode, + uid: uid(), + delay: delay, + asArray: asArray, + escapeXhtml: escapeXhtml, + makeImage: makeImage, + width: width, + height: height + }; + + function mimes() { + /* + * Only WOFF and EOT mime types for fonts are 'real' + * see http://www.iana.org/assignments/media-types/media-types.xhtml + */ + var WOFF = 'application/font-woff'; + var JPEG = 'image/jpeg'; + + return { + 'woff': WOFF, + 'woff2': WOFF, + 'ttf': 'application/font-truetype', + 'eot': 'application/vnd.ms-fontobject', + 'png': 'image/png', + 'jpg': JPEG, + 'jpeg': JPEG, + 'gif': 'image/gif', + 'tiff': 'image/tiff', + 'svg': 'image/svg+xml' + }; + } + + function parseExtension(url) { + var match = /\.([^\.\/]*?)$/g.exec(url); + if (match) return match[1]; + else return ''; + } + + function mimeType(url) { + var extension = parseExtension(url).toLowerCase(); + return mimes()[extension] || ''; + } + + function isDataUrl(url) { + return url.search(/^(data:)/) !== -1; + } + + function toBlob(canvas) { + return new Promise(function (resolve) { + var binaryString = window.atob(canvas.toDataURL().split(',')[1]); + var length = binaryString.length; + var binaryArray = new Uint8Array(length); + + for (var i = 0; i < length; i++) + binaryArray[i] = binaryString.charCodeAt(i); + + resolve(new Blob([binaryArray], { + type: 'image/png' + })); + }); + } + + function canvasToBlob(canvas) { + if (canvas.toBlob) + return new Promise(function (resolve) { + canvas.toBlob(resolve); + }); + + return toBlob(canvas); + } + + function resolveUrl(url, baseUrl) { + var doc = document.implementation.createHTMLDocument(); + var base = doc.createElement('base'); + doc.head.appendChild(base); + var a = doc.createElement('a'); + doc.body.appendChild(a); + base.href = baseUrl; + a.href = url; + return a.href; + } + + function uid() { + var index = 0; + + return function () { + return 'u' + fourRandomChars() + index++; + + function fourRandomChars() { + /* see http://stackoverflow.com/a/6248722/2519373 */ + return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4); + } + }; + } + + function makeImage(uri) { + return new Promise(function (resolve, reject) { + var image = new Image(); + image.onload = function () { + resolve(image); + }; + image.onerror = reject; + image.src = uri; + }); + } + + function getAndEncode(url) { + var TIMEOUT = 30000; + if(domtoimage.impl.options.cacheBust) { + // Cache bypass so we dont have CORS issues with cached images + // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache + url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(); + } + + return new Promise(function (resolve) { + var request = new XMLHttpRequest(); + + request.onreadystatechange = done; + request.ontimeout = timeout; + request.responseType = 'blob'; + request.timeout = TIMEOUT; + request.open('GET', url, true); + request.send(); + + var placeholder; + if(domtoimage.impl.options.imagePlaceholder) { + var split = domtoimage.impl.options.imagePlaceholder.split(/,/); + if(split && split[1]) { + placeholder = split[1]; + } + } + + function done() { + if (request.readyState !== 4) return; + + if (request.status !== 200) { + if(placeholder) { + resolve(placeholder); + } else { + fail('cannot fetch resource: ' + url + ', status: ' + request.status); + } + + return; + } + + var encoder = new FileReader(); + encoder.onloadend = function () { + var content = encoder.result.split(/,/)[1]; + resolve(content); + }; + encoder.readAsDataURL(request.response); + } + + function timeout() { + if(placeholder) { + resolve(placeholder); + } else { + fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url); + } + } + + function fail(message) { + console.error(message); + resolve(''); + } + }); + } + + function dataAsUrl(content, type) { + return 'data:' + type + ';base64,' + content; + } + + function escape(string) { + return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1'); + } + + function delay(ms) { + return function (arg) { + return new Promise(function (resolve) { + setTimeout(function () { + resolve(arg); + }, ms); + }); + }; + } + + function asArray(arrayLike) { + var array = []; + var length = arrayLike.length; + for (var i = 0; i < length; i++) array.push(arrayLike[i]); + return array; + } + + function escapeXhtml(string) { + return string.replace(/#/g, '%23').replace(/\n/g, '%0A'); + } + + function width(node) { + var leftBorder = px(node, 'border-left-width'); + var rightBorder = px(node, 'border-right-width'); + return node.scrollWidth + leftBorder + rightBorder; + } + + function height(node) { + var topBorder = px(node, 'border-top-width'); + var bottomBorder = px(node, 'border-bottom-width'); + return node.scrollHeight + topBorder + bottomBorder; + } + + function px(node, styleProperty) { + var value = window.getComputedStyle(node).getPropertyValue(styleProperty); + return parseFloat(value.replace('px', '')); + } + } + + function newInliner() { + var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g; + + return { + inlineAll: inlineAll, + shouldProcess: shouldProcess, + impl: { + readUrls: readUrls, + inline: inline + } + }; + + function shouldProcess(string) { + return string.search(URL_REGEX) !== -1; + } + + function readUrls(string) { + var result = []; + var match; + while ((match = URL_REGEX.exec(string)) !== null) { + result.push(match[1]); + } + return result.filter(function (url) { + return !util.isDataUrl(url); + }); + } + + function inline(string, url, baseUrl, get) { + return Promise.resolve(url) + .then(function (url) { + return baseUrl ? util.resolveUrl(url, baseUrl) : url; + }) + .then(get || util.getAndEncode) + .then(function (data) { + return util.dataAsUrl(data, util.mimeType(url)); + }) + .then(function (dataUrl) { + return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3'); + }); + + function urlAsRegex(url) { + return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g'); + } + } + + function inlineAll(string, baseUrl, get) { + if (nothingToInline()) return Promise.resolve(string); + + return Promise.resolve(string) + .then(readUrls) + .then(function (urls) { + var done = Promise.resolve(string); + urls.forEach(function (url) { + done = done.then(function (string) { + return inline(string, url, baseUrl, get); + }); + }); + return done; + }); + + function nothingToInline() { + return !shouldProcess(string); + } + } + } + + function newFontFaces() { + return { + resolveAll: resolveAll, + impl: { + readAll: readAll + } + }; + + function resolveAll() { + return readAll(document) + .then(function (webFonts) { + return Promise.all( + webFonts.map(function (webFont) { + return webFont.resolve(); + }) + ); + }) + .then(function (cssStrings) { + return cssStrings.join('\n'); + }); + } + + function readAll() { + return Promise.resolve(util.asArray(document.styleSheets)) + .then(getCssRules) + .then(selectWebFontRules) + .then(function (rules) { + return rules.map(newWebFont); + }); + + function selectWebFontRules(cssRules) { + return cssRules + .filter(function (rule) { + return rule.type === CSSRule.FONT_FACE_RULE; + }) + .filter(function (rule) { + return inliner.shouldProcess(rule.style.getPropertyValue('src')); + }); + } + + function getCssRules(styleSheets) { + var cssRules = []; + styleSheets.forEach(function (sheet) { + try { + util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules)); + } catch (e) { + console.log('Error while reading CSS rules from ' + sheet.href, e.toString()); + } + }); + return cssRules; + } + + function newWebFont(webFontRule) { + return { + resolve: function resolve() { + var baseUrl = (webFontRule.parentStyleSheet || {}).href; + return inliner.inlineAll(webFontRule.cssText, baseUrl); + }, + src: function () { + return webFontRule.style.getPropertyValue('src'); + } + }; + } + } + } + + function newImages() { + return { + inlineAll: inlineAll, + impl: { + newImage: newImage + } + }; + + function newImage(element) { + return { + inline: inline + }; + + function inline(get) { + if (util.isDataUrl(element.src)) return Promise.resolve(); + + return Promise.resolve(element.src) + .then(get || util.getAndEncode) + .then(function (data) { + return util.dataAsUrl(data, util.mimeType(element.src)); + }) + .then(function (dataUrl) { + return new Promise(function (resolve, reject) { + element.onload = resolve; + element.onerror = reject; + element.src = dataUrl; + }); + }); + } + } + + function inlineAll(node) { + if (!(node instanceof Element)) return Promise.resolve(node); + + return inlineBackground(node) + .then(function () { + if (node instanceof HTMLImageElement) + return newImage(node).inline(); + else + return Promise.all( + util.asArray(node.childNodes).map(function (child) { + return inlineAll(child); + }) + ); + }); + + function inlineBackground(node) { + var background = node.style.getPropertyValue('background'); + + if (!background) return Promise.resolve(node); + + return inliner.inlineAll(background) + .then(function (inlined) { + node.style.setProperty( + 'background', + inlined, + node.style.getPropertyPriority('background') + ); + }) + .then(function () { + return node; + }); + } + } + } +})(this); diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue index f3fbe32..52e3fcd 100644 --- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue +++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue @@ -262,10 +262,11 @@
-
-
+ > -
-
w:{{ imageSize.width }} - h:{{ imageSize.height }} -
- +
+
w:{{ imageSize.width }} + h:{{ imageSize.height }} +
+ *仅供参考 +
+
+
-
-
@@ -315,13 +316,18 @@ import {replaceDomain} from "@/utils"; import * as FileApi from "@/api/infra/file"; import {ProductInfoApi} from "@/api/oms/productinfo"; //@ts-ignore -import domtoimage from 'dom-to-image'; +// import domtoimage from './dom-to-image.js'; import {GroupTypeEnum} from "@/components/DraftDesign/config/constant"; import {useI18n} from "@/hooks/web/useI18n"; const {t} = useI18n() - +const svgSize= computed(() => { + return { + width: that.svgWidth * 10, + height: that.svgHeight * 10, + } +}) const emit = defineEmits(['change', 'initSucceed']) const draftDesignEditRef = ref() const that = reactive({ @@ -351,6 +357,7 @@ const that = reactive({ changeCount: 0, previewUrl: "", previewData: '', + sourceFile: '', // 源文件 html ingredientInfoList: [], sizeInfo: null, brandId: null, @@ -583,12 +590,24 @@ const getIngredientInfoListByType = (type) => { } const uploadFile = async (fileName) => { return new Promise((resolve, reject) => { - let svgElement = document.getElementById(that.svgId); + document.querySelector(`#${that.svgId} .bg-info`).style.width = `${that.svgWidth}px` + document.querySelector(`#${that.svgId} .bg-info`).style.height = `${that.svgHeight}px` + + console.log("svgElement?.innerHTML",) +// 创建一个 Blob 对象，用于保存 SVG 文件 + saveMaxSvg(svgElement,fileName); +// // 创建一个链接元素来触发下载 +// const link = document.createElement('a'); +// link.href = URL.createObjectURL(blob); +// link.download = 'graph.html'; // 指定下载文件名 +// // 触发点击事件来下载文件 +// link.click(); domtoimage.toBlob(svgElement, { - width: that.svgWidth + 5, - height: that.svgHeight + 5, + width: that.svgWidth + 10, + height: that.svgHeight + 10, type: 'image/png', + scale:4, quality: 1 }).then((blob) => { const file = new File([blob], fileName, {type: 'image/png'}); @@ -612,6 +631,21 @@ const uploadFile = async (fileName) => { }); } +const saveMaxSvg = (svgElement,fileName)=>{ + const blob = new Blob([svgElement?.parentElement?.innerHTML], { type: 'text/html' }); + const file = new File([blob], fileName+".html", {type: 'image/png'}); + FileApi.updateFile({file: file}) + .then((res) => { + console.log("res"+res) + if (res.code === 0) { + that.sourceFile = res.data + } else { + } + }).catch((res) => { + + }) +} + const deleteList = (key, index) => { const item = cloneDeep(that.propInfo[key]) @@ -1310,6 +1344,7 @@ const getPropInfo = () => { }) // 成功后再获取图片 draftDesignEditRef.value.toSVGData((url) => { + that.previewUrl = url that.hideCreate = false; setTimeout(() => { @@ -1323,6 +1358,8 @@ const getPropInfo = () => { const svgDom = document.querySelector(`#${that.svgId} svg`).getBoundingClientRect() that.svgHeight = dom.height; that.svgWidth = dom.width; + + console.log("that.svgHeight",that.svgHeight,that.svgWidth) document.querySelector(`#${that.svgId} svg`).style.left = `${svgDom.left - dom.left}px`; document.querySelector(`#${that.svgId} svg`).style.top = `${svgDom.top - dom.top}px`; // that.pageLoading.close() @@ -1348,6 +1385,7 @@ const getPropInfo = () => { // 设计稿id draftDesignId: that.draftDesignId, previewImage: that.previewData, + sourceFile: that.sourceFile, propInfo: that.propInfo }) }) diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue index 3c35e47..be8ccb0 100644 --- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue +++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue @@ -104,20 +104,20 @@ export default defineComponent({ // ,​ if(this.cellInfo.label){ let text = this.cellInfo.label; - text = text.replaceAll('"', "“"); + // text = text.replaceAll('"', "“"); text = text.replaceAll(',', ",​"); - text = text.replaceAll('.', ".​"); - text = text.replaceAll(':', ":​"); - text = text.replaceAll('!', "!​"); - text = text.replaceAll('?', "?​"); - text = text.replaceAll("'", "'​"); - text = text.replaceAll('-', "-​"); - text = text.replaceAll('—', "—​"); - text = text.replaceAll('/', "/​"); - text = text.replaceAll('(', "(​"); - text = text.replaceAll(')', ")​"); - text = text.replaceAll('+', "+​"); - text = text.replaceAll('=', "=​"); + // text = text.replaceAll('.', ".​"); + // text = text.replaceAll(':', ":​"); + // text = text.replaceAll('!', "!​"); + // text = text.replaceAll('?', "?​"); + // text = text.replaceAll("'", "'​"); + // text = text.replaceAll('-', "-​"); + // text = text.replaceAll('—', "—​"); + // text = text.replaceAll('/', "/​"); + // text = text.replaceAll('(', "(​"); + // text = text.replaceAll(')', ")​"); + // text = text.replaceAll('+', "+​"); + // text = text.replaceAll('=', "=​"); return text; } diff --git a/hangtag-ui/hangtag-ui-front/index.html b/hangtag-ui/hangtag-ui-front/index.html index 1ed3e88..e6afc7c 100644 --- a/hangtag-ui/hangtag-ui-front/index.html +++ b/hangtag-ui/hangtag-ui-front/index.html @@ -14,6 +14,7 @@ content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！" /> %VITE_APP_TITLE% +
diff --git a/hangtag-ui/hangtag-ui-front/package.json b/hangtag-ui/hangtag-ui-front/package.json index 5178dcb..b3f1285 100644 --- a/hangtag-ui/hangtag-ui-front/package.json +++ b/hangtag-ui/hangtag-ui-front/package.json @@ -54,7 +54,6 @@ "crypto-js": "^4.2.0", "dayjs": "^1.11.10", "diagram-js": "^12.8.0", - "dom-to-image": "^2.6.0", "driver.js": "^1.3.1", "echarts": "^5.5.0", "echarts-wordcloud": "^2.1.0", diff --git a/hangtag-ui/hangtag-ui-front/public/js/dom-to-image.js b/hangtag-ui/hangtag-ui-front/public/js/dom-to-image.js new file mode 100644 index 0000000..ab14a2a --- /dev/null +++ b/hangtag-ui/hangtag-ui-front/public/js/dom-to-image.js @@ -0,0 +1,777 @@ +(function (global) { + 'use strict'; + + var util = newUtil(); + var inliner = newInliner(); + var fontFaces = newFontFaces(); + var images = newImages(); + + // Default impl options + var defaultOptions = { + // Default is to fail on error, no placeholder + imagePlaceholder: undefined, + // Default cache bust is false, it will use the cache + cacheBust: false + }; + + var domtoimage = { + toSvg: toSvg, + toPng: toPng, + toJpeg: toJpeg, + toBlob: toBlob, + toPixelData: toPixelData, + impl: { + fontFaces: fontFaces, + images: images, + util: util, + inliner: inliner, + options: {} + } + }; + + if (typeof module !== 'undefined') + module.exports = domtoimage; + else + global.domtoimage = domtoimage; + + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options + * @param {Function} options.filter - Should return true if passed node should be included in the output + * (excluding node means excluding it's children as well). Not called on the root node. + * @param {String} options.bgcolor - color for the background, any valid CSS color value. + * @param {Number} options.width - width to be applied to node before rendering. + * @param {Number} options.height - height to be applied to node before rendering. + * @param {Object} options.style - an object whose properties to be copied to node's style before rendering. + * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only), + defaults to 1.0. + * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch + * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url + * @return {Promise} - A promise that is fulfilled with a SVG image data URL + * */ + function toSvg(node, options) { + options = options || {}; + copyOptions(options); + return Promise.resolve(node) + .then(function (node) { + return cloneNode(node, options.filter, true); + }) + .then(embedFonts) + .then(inlineImages) + .then(applyOptions) + .then(function (clone) { + return makeSvgDataUri(clone, + options.width || util.width(node), + options.height || util.height(node) + ); + }); + + function applyOptions(clone) { + if (options.bgcolor) clone.style.backgroundColor = options.bgcolor; + + if (options.width) clone.style.width = options.width + 'px'; + if (options.height) clone.style.height = options.height + 'px'; + + if (options.style) + Object.keys(options.style).forEach(function (property) { + clone.style[property] = options.style[property]; + }); + + return clone; + } + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data. + * */ + function toPixelData(node, options) { + return draw(node, options || {}) + .then(function (canvas) { + return canvas.getContext('2d').getImageData( + 0, + 0, + util.width(node), + util.height(node) + ).data; + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a PNG image data URL + * */ + function toPng(node, options) { + return draw(node, options || {}) + .then(function (canvas) { + return canvas.toDataURL(); + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a JPEG image data URL + * */ + function toJpeg(node, options) { + options = options || {}; + return draw(node, options) + .then(function (canvas) { + return canvas.toDataURL('image/jpeg', options.quality || 1.0); + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a PNG image blob + * */ + function toBlob(node, options) { + return draw(node, options || {}) + .then(util.canvasToBlob); + } + + function copyOptions(options) { + // Copy options to impl options for use in impl + if(typeof(options.imagePlaceholder) === 'undefined') { + domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder; + } else { + domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder; + } + + if(typeof(options.cacheBust) === 'undefined') { + domtoimage.impl.options.cacheBust = defaultOptions.cacheBust; + } else { + domtoimage.impl.options.cacheBust = options.cacheBust; + } + } + + function draw(domNode, options) { + return toSvg(domNode, options) + .then(util.makeImage) + .then(util.delay(100)) + .then(function (image) { + var canvas = newCanvas(domNode); + let context = canvas.getContext('2d'); + const ratio = window.devicePixelRatio || 1; + canvas.width *= ratio; + canvas.height *= ratio; + context.scale(ratio, ratio); + context.drawImage(image, 0, 0); + return canvas; + + }); + + function newCanvas(domNode) { + var canvas = document.createElement('canvas'); + canvas.width = options.width || util.width(domNode); + canvas.height = options.height || util.height(domNode); + + + if (options.bgcolor) { + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = options.bgcolor; + ctx.fillRect(0, 0, canvas.width, canvas.height); + } + + return canvas; + } + } + + function cloneNode(node, filter, root) { + if (!root && filter && !filter(node)) return Promise.resolve(); + + return Promise.resolve(node) + .then(makeNodeCopy) + .then(function (clone) { + return cloneChildren(node, clone, filter); + }) + .then(function (clone) { + return processClone(node, clone); + }); + + function makeNodeCopy(node) { + if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL()); + return node.cloneNode(false); + } + + function cloneChildren(original, clone, filter) { + var children = original.childNodes; + if (children.length === 0) return Promise.resolve(clone); + + return cloneChildrenInOrder(clone, util.asArray(children), filter) + .then(function () { + return clone; + }); + + function cloneChildrenInOrder(parent, children, filter) { + var done = Promise.resolve(); + children.forEach(function (child) { + done = done + .then(function () { + return cloneNode(child, filter); + }) + .then(function (childClone) { + if (childClone) parent.appendChild(childClone); + }); + }); + return done; + } + } + + function processClone(original, clone) { + if (!(clone instanceof Element)) return clone; + + return Promise.resolve() + .then(cloneStyle) + .then(clonePseudoElements) + .then(copyUserInput) + .then(fixSvg) + .then(function () { + return clone; + }); + + function cloneStyle() { + copyStyle(window.getComputedStyle(original), clone.style); + + function copyStyle(source, target) { + if (source.cssText) target.cssText = source.cssText; + else copyProperties(source, target); + + function copyProperties(source, target) { + util.asArray(source).forEach(function (name) { + target.setProperty( + name, + source.getPropertyValue(name), + source.getPropertyPriority(name) + ); + }); + } + } + } + + function clonePseudoElements() { + [':before', ':after'].forEach(function (element) { + clonePseudoElement(element); + }); + + function clonePseudoElement(element) { + var style = window.getComputedStyle(original, element); + var content = style.getPropertyValue('content'); + + if (content === '' || content === 'none') return; + + var className = util.uid(); + clone.className = clone.className + ' ' + className; + var styleElement = document.createElement('style'); + styleElement.appendChild(formatPseudoElementStyle(className, element, style)); + clone.appendChild(styleElement); + + function formatPseudoElementStyle(className, element, style) { + var selector = '.' + className + ':' + element; + var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style); + return document.createTextNode(selector + '{' + cssText + '}'); + + function formatCssText(style) { + var content = style.getPropertyValue('content'); + return style.cssText + ' content: ' + content + ';'; + } + + function formatCssProperties(style) { + + return util.asArray(style) + .map(formatProperty) + .join('; ') + ';'; + + function formatProperty(name) { + return name + ': ' + + style.getPropertyValue(name) + + (style.getPropertyPriority(name) ? ' !important' : ''); + } + } + } + } + } + + function copyUserInput() { + if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value; + if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value); + } + + function fixSvg() { + if (!(clone instanceof SVGElement)) return; + clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + + if (!(clone instanceof SVGRectElement)) return; + ['width', 'height'].forEach(function (attribute) { + var value = clone.getAttribute(attribute); + if (!value) return; + + clone.style.setProperty(attribute, value); + }); + } + } + } + + function embedFonts(node) { + return fontFaces.resolveAll() + .then(function (cssText) { + var styleNode = document.createElement('style'); + node.appendChild(styleNode); + styleNode.appendChild(document.createTextNode(cssText)); + return node; + }); + } + + function inlineImages(node) { + return images.inlineAll(node) + .then(function () { + return node; + }); + } + + function makeSvgDataUri(node, width, height) { + return Promise.resolve(node) + .then(function (node) { + node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); + return new XMLSerializer().serializeToString(node); + }) + .then(util.escapeXhtml) + .then(function (xhtml) { + return '' + xhtml + ''; + }) + .then(function (foreignObject) { + return '' + + foreignObject + ''; + }) + .then(function (svg) { + return 'data:image/svg+xml;charset=utf-8,' + svg; + }); + } + + function newUtil() { + return { + escape: escape, + parseExtension: parseExtension, + mimeType: mimeType, + dataAsUrl: dataAsUrl, + isDataUrl: isDataUrl, + canvasToBlob: canvasToBlob, + resolveUrl: resolveUrl, + getAndEncode: getAndEncode, + uid: uid(), + delay: delay, + asArray: asArray, + escapeXhtml: escapeXhtml, + makeImage: makeImage, + width: width, + height: height + }; + + function mimes() { + /* + * Only WOFF and EOT mime types for fonts are 'real' + * see http://www.iana.org/assignments/media-types/media-types.xhtml + */ + var WOFF = 'application/font-woff'; + var JPEG = 'image/jpeg'; + + return { + 'woff': WOFF, + 'woff2': WOFF, + 'ttf': 'application/font-truetype', + 'eot': 'application/vnd.ms-fontobject', + 'png': 'image/png', + 'jpg': JPEG, + 'jpeg': JPEG, + 'gif': 'image/gif', + 'tiff': 'image/tiff', + 'svg': 'image/svg+xml' + }; + } + + function parseExtension(url) { + var match = /\.([^\.\/]*?)$/g.exec(url); + if (match) return match[1]; + else return ''; + } + + function mimeType(url) { + var extension = parseExtension(url).toLowerCase(); + return mimes()[extension] || ''; + } + + function isDataUrl(url) { + return url.search(/^(data:)/) !== -1; + } + + function toBlob(canvas) { + return new Promise(function (resolve) { + var binaryString = window.atob(canvas.toDataURL().split(',')[1]); + var length = binaryString.length; + var binaryArray = new Uint8Array(length); + + for (var i = 0; i < length; i++) + binaryArray[i] = binaryString.charCodeAt(i); + + resolve(new Blob([binaryArray], { + type: 'image/png' + })); + }); + } + + function canvasToBlob(canvas) { + if (canvas.toBlob) + return new Promise(function (resolve) { + canvas.toBlob(resolve); + }); + + return toBlob(canvas); + } + + function resolveUrl(url, baseUrl) { + var doc = document.implementation.createHTMLDocument(); + var base = doc.createElement('base'); + doc.head.appendChild(base); + var a = doc.createElement('a'); + doc.body.appendChild(a); + base.href = baseUrl; + a.href = url; + return a.href; + } + + function uid() { + var index = 0; + + return function () { + return 'u' + fourRandomChars() + index++; + + function fourRandomChars() { + /* see http://stackoverflow.com/a/6248722/2519373 */ + return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4); + } + }; + } + + function makeImage(uri) { + return new Promise(function (resolve, reject) { + var image = new Image(); + image.onload = function () { + resolve(image); + }; + image.onerror = reject; + image.src = uri; + }); + } + + function getAndEncode(url) { + var TIMEOUT = 30000; + if(domtoimage.impl.options.cacheBust) { + // Cache bypass so we dont have CORS issues with cached images + // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache + url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(); + } + + return new Promise(function (resolve) { + var request = new XMLHttpRequest(); + + request.onreadystatechange = done; + request.ontimeout = timeout; + request.responseType = 'blob'; + request.timeout = TIMEOUT; + request.open('GET', url, true); + request.send(); + + var placeholder; + if(domtoimage.impl.options.imagePlaceholder) { + var split = domtoimage.impl.options.imagePlaceholder.split(/,/); + if(split && split[1]) { + placeholder = split[1]; + } + } + + function done() { + if (request.readyState !== 4) return; + + if (request.status !== 200) { + if(placeholder) { + resolve(placeholder); + } else { + fail('cannot fetch resource: ' + url + ', status: ' + request.status); + } + + return; + } + + var encoder = new FileReader(); + encoder.onloadend = function () { + var content = encoder.result.split(/,/)[1]; + resolve(content); + }; + encoder.readAsDataURL(request.response); + } + + function timeout() { + if(placeholder) { + resolve(placeholder); + } else { + fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url); + } + } + + function fail(message) { + console.error(message); + resolve(''); + } + }); + } + + function dataAsUrl(content, type) { + return 'data:' + type + ';base64,' + content; + } + + function escape(string) { + return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1'); + } + + function delay(ms) { + return function (arg) { + return new Promise(function (resolve) { + setTimeout(function () { + resolve(arg); + }, ms); + }); + }; + } + + function asArray(arrayLike) { + var array = []; + var length = arrayLike.length; + for (var i = 0; i < length; i++) array.push(arrayLike[i]); + return array; + } + + function escapeXhtml(string) { + return string.replace(/#/g, '%23').replace(/\n/g, '%0A'); + } + + function width(node) { + var leftBorder = px(node, 'border-left-width'); + var rightBorder = px(node, 'border-right-width'); + return node.scrollWidth + leftBorder + rightBorder; + } + + function height(node) { + var topBorder = px(node, 'border-top-width'); + var bottomBorder = px(node, 'border-bottom-width'); + return node.scrollHeight + topBorder + bottomBorder; + } + + function px(node, styleProperty) { + var value = window.getComputedStyle(node).getPropertyValue(styleProperty); + return parseFloat(value.replace('px', '')); + } + } + + function newInliner() { + var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g; + + return { + inlineAll: inlineAll, + shouldProcess: shouldProcess, + impl: { + readUrls: readUrls, + inline: inline + } + }; + + function shouldProcess(string) { + return string.search(URL_REGEX) !== -1; + } + + function readUrls(string) { + var result = []; + var match; + while ((match = URL_REGEX.exec(string)) !== null) { + result.push(match[1]); + } + return result.filter(function (url) { + return !util.isDataUrl(url); + }); + } + + function inline(string, url, baseUrl, get) { + return Promise.resolve(url) + .then(function (url) { + return baseUrl ? util.resolveUrl(url, baseUrl) : url; + }) + .then(get || util.getAndEncode) + .then(function (data) { + return util.dataAsUrl(data, util.mimeType(url)); + }) + .then(function (dataUrl) { + return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3'); + }); + + function urlAsRegex(url) { + return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g'); + } + } + + function inlineAll(string, baseUrl, get) { + if (nothingToInline()) return Promise.resolve(string); + + return Promise.resolve(string) + .then(readUrls) + .then(function (urls) { + var done = Promise.resolve(string); + urls.forEach(function (url) { + done = done.then(function (string) { + return inline(string, url, baseUrl, get); + }); + }); + return done; + }); + + function nothingToInline() { + return !shouldProcess(string); + } + } + } + + function newFontFaces() { + return { + resolveAll: resolveAll, + impl: { + readAll: readAll + } + }; + + function resolveAll() { + return readAll(document) + .then(function (webFonts) { + return Promise.all( + webFonts.map(function (webFont) { + return webFont.resolve(); + }) + ); + }) + .then(function (cssStrings) { + return cssStrings.join('\n'); + }); + } + + function readAll() { + return Promise.resolve(util.asArray(document.styleSheets)) + .then(getCssRules) + .then(selectWebFontRules) + .then(function (rules) { + return rules.map(newWebFont); + }); + + function selectWebFontRules(cssRules) { + return cssRules + .filter(function (rule) { + return rule.type === CSSRule.FONT_FACE_RULE; + }) + .filter(function (rule) { + return inliner.shouldProcess(rule.style.getPropertyValue('src')); + }); + } + + function getCssRules(styleSheets) { + var cssRules = []; + styleSheets.forEach(function (sheet) { + try { + util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules)); + } catch (e) { + console.log('Error while reading CSS rules from ' + sheet.href, e.toString()); + } + }); + return cssRules; + } + + function newWebFont(webFontRule) { + return { + resolve: function resolve() { + var baseUrl = (webFontRule.parentStyleSheet || {}).href; + return inliner.inlineAll(webFontRule.cssText, baseUrl); + }, + src: function () { + return webFontRule.style.getPropertyValue('src'); + } + }; + } + } + } + + function newImages() { + return { + inlineAll: inlineAll, + impl: { + newImage: newImage + } + }; + + function newImage(element) { + return { + inline: inline + }; + + function inline(get) { + if (util.isDataUrl(element.src)) return Promise.resolve(); + + return Promise.resolve(element.src) + .then(get || util.getAndEncode) + .then(function (data) { + return util.dataAsUrl(data, util.mimeType(element.src)); + }) + .then(function (dataUrl) { + return new Promise(function (resolve, reject) { + element.onload = resolve; + element.onerror = reject; + element.src = dataUrl; + }); + }); + } + } + + function inlineAll(node) { + if (!(node instanceof Element)) return Promise.resolve(node); + + return inlineBackground(node) + .then(function () { + if (node instanceof HTMLImageElement) + return newImage(node).inline(); + else + return Promise.all( + util.asArray(node.childNodes).map(function (child) { + return inlineAll(child); + }) + ); + }); + + function inlineBackground(node) { + var background = node.style.getPropertyValue('background'); + + if (!background) return Promise.resolve(node); + + return inliner.inlineAll(background) + .then(function (inlined) { + node.style.setProperty( + 'background', + inlined, + node.style.getPropertyPriority('background') + ); + }) + .then(function () { + return node; + }); + } + } + } +})(this); diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue index f3fbe32..52e3fcd 100644 --- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue +++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue @@ -262,10 +262,11 @@
-
-
+ > -
-
w:{{ imageSize.width }} - h:{{ imageSize.height }} -
- +
+
w:{{ imageSize.width }} + h:{{ imageSize.height }} +
+ *仅供参考 +
+
+
-
-
@@ -315,13 +316,18 @@ import {replaceDomain} from "@/utils"; import * as FileApi from "@/api/infra/file"; import {ProductInfoApi} from "@/api/oms/productinfo"; //@ts-ignore -import domtoimage from 'dom-to-image'; +// import domtoimage from './dom-to-image.js'; import {GroupTypeEnum} from "@/components/DraftDesign/config/constant"; import {useI18n} from "@/hooks/web/useI18n"; const {t} = useI18n() - +const svgSize= computed(() => { + return { + width: that.svgWidth * 10, + height: that.svgHeight * 10, + } +}) const emit = defineEmits(['change', 'initSucceed']) const draftDesignEditRef = ref() const that = reactive({ @@ -351,6 +357,7 @@ const that = reactive({ changeCount: 0, previewUrl: "", previewData: '', + sourceFile: '', // 源文件 html ingredientInfoList: [], sizeInfo: null, brandId: null, @@ -583,12 +590,24 @@ const getIngredientInfoListByType = (type) => { } const uploadFile = async (fileName) => { return new Promise((resolve, reject) => { - let svgElement = document.getElementById(that.svgId); + document.querySelector(`#${that.svgId} .bg-info`).style.width = `${that.svgWidth}px` + document.querySelector(`#${that.svgId} .bg-info`).style.height = `${that.svgHeight}px` + + console.log("svgElement?.innerHTML",) +// 创建一个 Blob 对象，用于保存 SVG 文件 + saveMaxSvg(svgElement,fileName); +// // 创建一个链接元素来触发下载 +// const link = document.createElement('a'); +// link.href = URL.createObjectURL(blob); +// link.download = 'graph.html'; // 指定下载文件名 +// // 触发点击事件来下载文件 +// link.click(); domtoimage.toBlob(svgElement, { - width: that.svgWidth + 5, - height: that.svgHeight + 5, + width: that.svgWidth + 10, + height: that.svgHeight + 10, type: 'image/png', + scale:4, quality: 1 }).then((blob) => { const file = new File([blob], fileName, {type: 'image/png'}); @@ -612,6 +631,21 @@ const uploadFile = async (fileName) => { }); } +const saveMaxSvg = (svgElement,fileName)=>{ + const blob = new Blob([svgElement?.parentElement?.innerHTML], { type: 'text/html' }); + const file = new File([blob], fileName+".html", {type: 'image/png'}); + FileApi.updateFile({file: file}) + .then((res) => { + console.log("res"+res) + if (res.code === 0) { + that.sourceFile = res.data + } else { + } + }).catch((res) => { + + }) +} + const deleteList = (key, index) => { const item = cloneDeep(that.propInfo[key]) @@ -1310,6 +1344,7 @@ const getPropInfo = () => { }) // 成功后再获取图片 draftDesignEditRef.value.toSVGData((url) => { + that.previewUrl = url that.hideCreate = false; setTimeout(() => { @@ -1323,6 +1358,8 @@ const getPropInfo = () => { const svgDom = document.querySelector(`#${that.svgId} svg`).getBoundingClientRect() that.svgHeight = dom.height; that.svgWidth = dom.width; + + console.log("that.svgHeight",that.svgHeight,that.svgWidth) document.querySelector(`#${that.svgId} svg`).style.left = `${svgDom.left - dom.left}px`; document.querySelector(`#${that.svgId} svg`).style.top = `${svgDom.top - dom.top}px`; // that.pageLoading.close() @@ -1348,6 +1385,7 @@ const getPropInfo = () => { // 设计稿id draftDesignId: that.draftDesignId, previewImage: that.previewData, + sourceFile: that.sourceFile, propInfo: that.propInfo }) }) diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/TextCellNode.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/TextCellNode.vue index 3c35e47..be8ccb0 100644 --- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/TextCellNode.vue +++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/TextCellNode.vue @@ -104,20 +104,20 @@ export default defineComponent({ // ,​ if(this.cellInfo.label){ let text = this.cellInfo.label; - text = text.replaceAll('"', "“"); + // text = text.replaceAll('"', "“"); text = text.replaceAll(',', ",​"); - text = text.replaceAll('.', ".​"); - text = text.replaceAll(':', ":​"); - text = text.replaceAll('!', "!​"); - text = text.replaceAll('?', "?​"); - text = text.replaceAll("'", "'​"); - text = text.replaceAll('-', "-​"); - text = text.replaceAll('—', "—​"); - text = text.replaceAll('/', "/​"); - text = text.replaceAll('(', "(​"); - text = text.replaceAll(')', ")​"); - text = text.replaceAll('+', "+​"); - text = text.replaceAll('=', "=​"); + // text = text.replaceAll('.', ".​"); + // text = text.replaceAll(':', ":​"); + // text = text.replaceAll('!', "!​"); + // text = text.replaceAll('?', "?​"); + // text = text.replaceAll("'", "'​"); + // text = text.replaceAll('-', "-​"); + // text = text.replaceAll('—', "—​"); + // text = text.replaceAll('/', "/​"); + // text = text.replaceAll('(', "(​"); + // text = text.replaceAll(')', ")​"); + // text = text.replaceAll('+', "+​"); + // text = text.replaceAll('=', "=​"); return text; } diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue index 8980f5f..fb7884f 100644 --- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue +++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue @@ -92,7 +92,21 @@ const props = defineProps({ type: Object, required: true, default: () => ({ - previewImage: '' + productId: "", + orderQty: 1, + propInfo: "", + propOrderByList: [], + draftDesignId: "", + previewImage: "", + sourceFile: "", + draftDesignInfo: {}, + specInfo: {} + }) + }, + product: { + type: Object, + required: true, + default: () => ({ }) }, badge: { @@ -101,12 +115,21 @@ const props = defineProps({ default: '' } }) +const that = { + productInfo:{}, +} const getLabelName = (item) => { if (item.shape === ShapeType.vueShapeImage) { return item.groupName + ":" } return item.groupName + ":" } +watch(()=>props.product,(value, oldValue, onCleanup)=>{ + that.productInfo = value +},{ + deep: true, + immediate: true +}) const getValue = (item:any) => { let arr = []; for (let i = 0; i < item.dataInfo.length; i++) { @@ -149,7 +172,8 @@ const propInfoOrderByList = computed(() => { const previewUrl = computed(() => { return formData.value.previewImage || "" }) -const init = ()=>{ + +const init = (productInfo:any)=>{ } const submit = (data:any) => { @@ -162,6 +186,7 @@ const submit = (data:any) => { tmpData.propOrderByList = data.propOrderByList; tmpData.draftDesignId = data.draftDesignId; tmpData.previewImage = data.previewImage; + tmpData.sourceFile = data.sourceFile; tmpData.draftDesignInfo = {...data.draftDesignInfo}; // 将颜色信息保存到规格信息中 tmpData.specInfo = { @@ -182,14 +207,29 @@ const change = () => { emit("update:productInfo", formData.value) emit("change", formData.value) } +const getDownloadName = ()=>{ + console.log("getFileName@@",that.productInfo) + if(that.productInfo){ + return `${that.productInfo.name}(${that.productInfo.code})` + } + return new Date().getTime(); +} +const getFileName = ()=>{ + if(formData.value.sourceFile){ + return `${getDownloadName()}.html` + } + return `${getDownloadName()}.png` +} const imagePreview = (imgUrl: string) => { - addDownloadImg(imgUrl,new Date().getTime()) + + addDownloadImg(formData.value.sourceFile || formData.value.previewImage ,getFileName()) createImageViewer({ zIndex: 9999999, urlList: [imgUrl] }) } -const addDownloadImg = (url: string,name = 'img') => { + +const addDownloadImg = (url: string,name = 'img.jpg') => { setTimeout(() => { let wrapper = document.getElementsByClassName("el-image-viewer__btn el-image-viewer__actions"); if (wrapper.length > 0) { @@ -213,7 +253,7 @@ const addDownloadImg = (url: string,name = 'img') => { .then((blob) => { const blobUrl = URL.createObjectURL(blob); // 创建 blob URL link.href = blobUrl; // 设置下载链接 - link.download = name+".jpg"; // 设置下载文件名 + link.download = name; // 设置下载文件名 link.click(); // 触发下载 URL.revokeObjectURL(blobUrl); // 释放 blob URL 资源 }) diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue index 878c3b2..860c947 100644 --- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue +++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue @@ -12,6 +12,7 @@