diff --git a/yudao-ui-app/package-lock.json b/yudao-ui-app/package-lock.json index 59864be9e..25b3b58e3 100644 --- a/yudao-ui-app/package-lock.json +++ b/yudao-ui-app/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "clipboard": "^2.0.11", "html-to-image": "^1.11.11", + "html2canvas": "^1.4.1", "qrcode": "^1.5.3" } }, @@ -27,6 +28,14 @@ "color-convert": "^2.0.1" } }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/camelcase": { "version": "5.3.1", "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz", @@ -65,6 +74,14 @@ "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/decamelize": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz", @@ -117,6 +134,18 @@ "resolved": "https://registry.npmmirror.com/html-to-image/-/html-to-image-1.11.11.tgz", "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -216,11 +245,27 @@ "ansi-regex": "^5.0.1" } }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/tiny-emitter": { "version": "2.1.0", "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/which-module": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz", @@ -283,6 +328,11 @@ "color-convert": "^2.0.1" } }, + "base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==" + }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz", @@ -321,6 +371,14 @@ "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "requires": { + "utrie": "^1.0.2" + } + }, "decamelize": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz", @@ -373,6 +431,15 @@ "resolved": "https://registry.npmmirror.com/html-to-image/-/html-to-image-1.11.11.tgz", "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" }, + "html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "requires": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + } + }, "is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -466,11 +533,27 @@ "ansi-regex": "^5.0.1" } }, + "text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "requires": { + "utrie": "^1.0.2" + } + }, "tiny-emitter": { "version": "2.1.0", "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" }, + "utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "requires": { + "base64-arraybuffer": "^1.0.2" + } + }, "which-module": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz", diff --git a/yudao-ui-app/package.json b/yudao-ui-app/package.json index a991192ef..397776a07 100644 --- a/yudao-ui-app/package.json +++ b/yudao-ui-app/package.json @@ -12,6 +12,7 @@ "dependencies": { "clipboard": "^2.0.11", "html-to-image": "^1.11.11", + "html2canvas": "^1.4.1", "qrcode": "^1.5.3" }, "uni-app": { diff --git a/yudao-ui-app/pages/users/user_spread_code/index.vue b/yudao-ui-app/pages/users/user_spread_code/index.vue index a8950af26..0f121e0a9 100644 --- a/yudao-ui-app/pages/users/user_spread_code/index.vue +++ b/yudao-ui-app/pages/users/user_spread_code/index.vue @@ -46,7 +46,7 @@ } from "vuex"; import appConfig from '@/config/app.js' import QRCode from 'qrcode' - import * as htmlToImage from 'html-to-image' + import html2canvas from 'html2canvas' export default { data() { return { @@ -81,29 +81,19 @@ mask: true }); that.isHideBtn = true - for(let i = 0; i<2; i++){ - await htmlToImage.toPng(document.getElementById('poster-wrap'), { - quality: 0.95, - cacheBust: true - }); - } - htmlToImage.toPng(document.getElementById('poster-wrap'), { - quality: 0.95, - cacheBust: true - }) - .then(function(dataUrl) { - console.log('dataUrl', dataUrl) - uni.hideLoading() - that.posterUrl = dataUrl - that.$util.Tips({ - title: '生成成功，长按保存图片' - }) + setTimeout(()=>{ + html2canvas(document.getElementById('poster-wrap')).then(function(canvas) { + that.$util.Tips({ + title: '生成成功，长按保存图片' + }) + that.posterUrl = canvas.toDataURL('image/png') }).catch(()=>{ that.$util.Tips({ title: '生成失败' }) that.isHideBtn = false }) + }, 200) }, // 生成二维码； make() {