|
|
@@ -202,15 +202,15 @@
|
|
|
changeType == 'text' || changeType == 'luminance' ? 0 : '32px',
|
|
|
}"
|
|
|
>
|
|
|
- <canvas
|
|
|
- id="canvas"
|
|
|
+ <div
|
|
|
+ id="imgCanvas"
|
|
|
ref="imgCanvas"
|
|
|
:style="{
|
|
|
width: form.width + 'px',
|
|
|
height: form.height + 'px',
|
|
|
background: form.bg_color,
|
|
|
}"
|
|
|
- ></canvas>
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
<div>
|
|
|
@@ -257,6 +257,164 @@
|
|
|
import Header from "@/components/Header";
|
|
|
import DragLine from "@/components/DragLine";
|
|
|
import { getToken, removeToken } from "@/utils/auth";
|
|
|
+import { WebFileDownload } from "@/api/api";
|
|
|
+
|
|
|
+import "tui-image-editor/dist/tui-image-editor.css";
|
|
|
+import "tui-color-picker/dist/tui-color-picker.css";
|
|
|
+import ImageEditor from "tui-image-editor";
|
|
|
+
|
|
|
+const locale_zh = {
|
|
|
+ ZoomIn: "放大",
|
|
|
+ ZoomOut: "缩小",
|
|
|
+ Hand: "手掌",
|
|
|
+ History: "历史",
|
|
|
+ Resize: "调整宽高",
|
|
|
+ Crop: "裁剪",
|
|
|
+ DeleteAll: "全部删除",
|
|
|
+ Delete: "删除",
|
|
|
+ Undo: "撤销",
|
|
|
+ Redo: "反撤销",
|
|
|
+ Reset: "重置",
|
|
|
+ Flip: "镜像",
|
|
|
+ Rotate: "旋转",
|
|
|
+ Draw: "画",
|
|
|
+ Shape: "形状标注",
|
|
|
+ Icon: "图标标注",
|
|
|
+ Text: "文字标注",
|
|
|
+ Mask: "遮罩",
|
|
|
+ Filter: "滤镜",
|
|
|
+ Bold: "加粗",
|
|
|
+ Italic: "斜体",
|
|
|
+ Underline: "下划线",
|
|
|
+ Left: "左对齐",
|
|
|
+ Center: "居中",
|
|
|
+ Right: "右对齐",
|
|
|
+ Color: "颜色",
|
|
|
+ "Text size": "字体大小",
|
|
|
+ Custom: "自定义",
|
|
|
+ Square: "正方形",
|
|
|
+ Apply: "应用",
|
|
|
+ Cancel: "取消",
|
|
|
+ "Flip X": "X 轴",
|
|
|
+ "Flip Y": "Y 轴",
|
|
|
+ Range: "区间",
|
|
|
+ Stroke: "描边",
|
|
|
+ Fill: "填充",
|
|
|
+ Circle: "圆",
|
|
|
+ Triangle: "三角",
|
|
|
+ Rectangle: "矩形",
|
|
|
+ Free: "曲线",
|
|
|
+ Straight: "直线",
|
|
|
+ Arrow: "箭头",
|
|
|
+ "Arrow-2": "箭头2",
|
|
|
+ "Arrow-3": "箭头3",
|
|
|
+ "Star-1": "星星1",
|
|
|
+ "Star-2": "星星2",
|
|
|
+ Polygon: "多边形",
|
|
|
+ Location: "定位",
|
|
|
+ Heart: "心形",
|
|
|
+ Bubble: "气泡",
|
|
|
+ "Custom icon": "自定义图标",
|
|
|
+ "Load Mask Image": "加载蒙层图片",
|
|
|
+ Grayscale: "灰度",
|
|
|
+ Blur: "模糊",
|
|
|
+ Sharpen: "锐化",
|
|
|
+ Emboss: "浮雕",
|
|
|
+ "Remove White": "除去白色",
|
|
|
+ Distance: "距离",
|
|
|
+ Brightness: "亮度",
|
|
|
+ Noise: "噪音",
|
|
|
+ "Color Filter": "彩色滤镜",
|
|
|
+ Sepia: "棕色",
|
|
|
+ Sepia2: "棕色2",
|
|
|
+ Invert: "负片",
|
|
|
+ Pixelate: "像素化",
|
|
|
+ Threshold: "阈值",
|
|
|
+ Tint: "色调",
|
|
|
+ Multiply: "正片叠底",
|
|
|
+ Blend: "混合色",
|
|
|
+ Width: "宽度",
|
|
|
+ Height: "高度",
|
|
|
+ "Lock Aspect Ratio": "锁定宽高比例",
|
|
|
+};
|
|
|
+
|
|
|
+const customTheme = {
|
|
|
+ "common.bi.image": "", // 左上角logo图片
|
|
|
+ "common.bisize.width": "0px",
|
|
|
+ "common.bisize.height": "0px",
|
|
|
+ "common.backgroundImage": "none",
|
|
|
+ "common.backgroundColor": "#f3f4f6",
|
|
|
+ "common.border": "1px solid #333",
|
|
|
+
|
|
|
+ // header
|
|
|
+ "header.backgroundImage": "none",
|
|
|
+ "header.backgroundColor": "#f3f4f6",
|
|
|
+ "header.border": "0px",
|
|
|
+
|
|
|
+ // load button
|
|
|
+ "loadButton.backgroundColor": "#fff",
|
|
|
+ "loadButton.border": "1px solid #ddd",
|
|
|
+ "loadButton.color": "#222",
|
|
|
+ "loadButton.fontFamily": "NotoSans, sans-serif",
|
|
|
+ "loadButton.fontSize": "12px",
|
|
|
+ "loadButton.display": "none", // 隐藏
|
|
|
+
|
|
|
+ // download button
|
|
|
+ "downloadButton.backgroundColor": "#fdba3b",
|
|
|
+ "downloadButton.border": "1px solid #fdba3b",
|
|
|
+ "downloadButton.color": "#fff",
|
|
|
+ "downloadButton.fontFamily": "NotoSans, sans-serif",
|
|
|
+ "downloadButton.fontSize": "12px",
|
|
|
+ "downloadButton.display": "none", // 隐藏
|
|
|
+
|
|
|
+ // icons default
|
|
|
+ "menu.normalIcon.color": "#8a8a8a",
|
|
|
+ "menu.activeIcon.color": "#555555",
|
|
|
+ "menu.disabledIcon.color": "#ccc",
|
|
|
+ "menu.hoverIcon.color": "#e9e9e9",
|
|
|
+ "submenu.normalIcon.color": "#8a8a8a",
|
|
|
+ "submenu.activeIcon.color": "#e9e9e9",
|
|
|
+
|
|
|
+ "menu.iconSize.width": "24px",
|
|
|
+ "menu.iconSize.height": "24px",
|
|
|
+ "submenu.iconSize.width": "32px",
|
|
|
+ "submenu.iconSize.height": "32px",
|
|
|
+
|
|
|
+ // submenu primary color
|
|
|
+ "submenu.backgroundColor": "#1e1e1e",
|
|
|
+ "submenu.partition.color": "#858585",
|
|
|
+
|
|
|
+ // submenu labels
|
|
|
+ "submenu.normalLabel.color": "#858585",
|
|
|
+ "submenu.normalLabel.fontWeight": "lighter",
|
|
|
+ "submenu.activeLabel.color": "#fff",
|
|
|
+ "submenu.activeLabel.fontWeight": "lighter",
|
|
|
+
|
|
|
+ // checkbox style
|
|
|
+ "checkbox.border": "1px solid #ccc",
|
|
|
+ "checkbox.backgroundColor": "#fff",
|
|
|
+
|
|
|
+ // rango style
|
|
|
+ "range.pointer.color": "#fff",
|
|
|
+ "range.bar.color": "#666",
|
|
|
+ "range.subbar.color": "#d1d1d1",
|
|
|
+
|
|
|
+ "range.disabledPointer.color": "#414141",
|
|
|
+ "range.disabledBar.color": "#282828",
|
|
|
+ "range.disabledSubbar.color": "#414141",
|
|
|
+
|
|
|
+ "range.value.color": "#fff",
|
|
|
+ "range.value.fontWeight": "lighter",
|
|
|
+ "range.value.fontSize": "11px",
|
|
|
+ "range.value.border": "1px solid #353535",
|
|
|
+ "range.value.backgroundColor": "#151515",
|
|
|
+ "range.title.color": "#fff",
|
|
|
+ "range.title.fontWeight": "lighter",
|
|
|
+
|
|
|
+ // colorpicker style
|
|
|
+ "colorpicker.button.border": "1px solid #1e1e1e",
|
|
|
+ "colorpicker.title.color": "#fff",
|
|
|
+};
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -441,21 +599,47 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
initCanvasImage() {
|
|
|
- let imgCanvas = this.$refs.imgCanvas; //绘制图片的canvas
|
|
|
- this.imgCtx = imgCanvas.getContext("2d");
|
|
|
- let img = new Image();
|
|
|
- img.src = this.fileList[0].file_url;
|
|
|
- img.onload = () => {
|
|
|
- //图片加载完成后开始绘制图片
|
|
|
- this.imgCtx.drawImage(img, 0, 0, this.form.width, this.form.height);
|
|
|
- };
|
|
|
+ this.loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ // 直接使用跨域 请求文件流转url 再使用
|
|
|
+ WebFileDownload({
|
|
|
+ FileID: this.fileList[0].file_id,
|
|
|
+ }).then((res) => {
|
|
|
+ const objectUrl = window.URL.createObjectURL(res);
|
|
|
+ this.instance = new ImageEditor(document.querySelector("#imgCanvas"), {
|
|
|
+ includeUI: {
|
|
|
+ loadImage: {
|
|
|
+ path: objectUrl,
|
|
|
+ name: "image",
|
|
|
+ },
|
|
|
+ menu: [
|
|
|
+ "resize",
|
|
|
+ "crop",
|
|
|
+ "rotate",
|
|
|
+ "draw",
|
|
|
+ "shape",
|
|
|
+ "icon",
|
|
|
+ "text",
|
|
|
+ "filter",
|
|
|
+ ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
|
|
|
+ initMenu: "draw", // 默认打开的菜单项
|
|
|
+ menuBarPosition: "bottom", // 菜单所在的位置
|
|
|
+ locale: locale_zh, // 本地化语言为中文
|
|
|
+ theme: customTheme, // 自定义样式
|
|
|
+ },
|
|
|
+ cssMaxWidth: this.form.width, // canvas 最大宽度
|
|
|
+ cssMaxHeight: this.form.heigt, // canvas 最大高度
|
|
|
+ });
|
|
|
+ this.loading.close();
|
|
|
+ });
|
|
|
},
|
|
|
// 删除上传的图片
|
|
|
deleteImage() {
|
|
|
this.fileList = [];
|
|
|
- let imgCanvas = this.$refs.imgCanvas; //绘制图片的canvas
|
|
|
- this.imgCtx = imgCanvas.getContext("2d");
|
|
|
- this.imgCtx.clearRect(0, 0, this.form.width, this.form.height);
|
|
|
},
|
|
|
handlebeforeUplaod(file) {
|
|
|
if (file.size > 20 * 1024 * 1024) {
|
qinpeng