-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
70a1477
commit 3ba1ad6
Showing
8 changed files
with
1,168 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,273 @@ | ||
| <template> | ||
| <div class="drawing-container"> | ||
| <!-- 绘图组件容器DOM --> | ||
| <div id="tui-image-editor"></div> | ||
| <el-button class="save" type="primary" size="small" @click="save" | ||
| >下载</el-button | ||
| > | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import "tui-image-editor/dist/tui-image-editor.css"; | ||
| import "tui-color-picker/dist/tui-color-picker.css"; | ||
| import ImageEditor from "tui-image-editor"; | ||
| import { ElMessageBox } from "element-plus"; | ||
| import router from "@/router"; | ||
| // 中文菜单sass-loader | ||
| 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 { | ||
| props: { | ||
| image: { | ||
| type: Object, | ||
| default: () => ({ | ||
| title: "【重磅干货】大家都关心的嘉宾PPT下载指南来啦！", | ||
| img: "https://s2.loli.net/2024/04/03/57w8v3bRUgBypkl.jpg", | ||
| id: 1, | ||
| }), | ||
| }, | ||
| }, | ||
| name: "ImgTui", | ||
| data() { | ||
| return { | ||
| instance: null, // 创建的画布对象 | ||
| // image: { | ||
| // title: "【重磅干货】大家都关心的嘉宾PPT下载指南来啦！", | ||
| // img: "https://lf3-cdn-tos.bytescm.com/obj/ttfe/xevaluation/ima-pingjia-default.png", | ||
| // id: 1, | ||
| // }, | ||
| }; | ||
| }, | ||
| mounted() { | ||
| console.log(this.image); | ||
| this.init(); // 页面创建完成后调用 | ||
| }, | ||
| methods: { | ||
| init() { | ||
| console.log(this.image.img); | ||
| this.instance = new ImageEditor( | ||
| document.querySelector("#tui-image-editor"), | ||
| { | ||
| includeUI: { | ||
| loadImage: { | ||
| path: this.image.img, | ||
| name: this.image.title, | ||
| }, | ||
| menu: [ | ||
| "resize", | ||
| "crop", | ||
| "rotate", | ||
| "draw", | ||
| "shape", | ||
| "icon", | ||
| "text", | ||
| "filter", | ||
| ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask | ||
| initMenu: "draw", // 默认打开的菜单项 | ||
| menuBarPosition: "bottom", // 菜单所在的位置 | ||
| locale: locale_zh, // 本地化语言为中文 | ||
| theme: customTheme, // 自定义样式 | ||
| }, | ||
| cssMaxWidth: 500, // canvas 最大宽度 | ||
| cssMaxHeight: 600, // canvas 最大高度 | ||
| } | ||
| ); | ||
| document.getElementsByClassName("tui-image-editor-main")[0].style.top = | ||
| "70px"; // 调整图片显示位置 | ||
| document.getElementsByClassName( | ||
| "tie-btn-reset tui-image-editor-item help" | ||
| )[0].style.display = "none"; // 隐藏顶部重置按钮 | ||
| }, | ||
| // 保存图片，并上传 | ||
| save() { | ||
| const xhr = new XMLHttpRequest(); | ||
| const src = this.image.img; | ||
| xhr.open("GET", src, true); | ||
| xhr.responseType = "blob"; | ||
| xhr.onload = function () { | ||
| const blob = new Blob([this.response], { | ||
| type: "application/octet-stream", | ||
| }); | ||
| const link = document.createElement("a"); | ||
| link.href = window.URL.createObjectURL(blob); | ||
| link.download = src.split("/").pop(); | ||
| document.body.appendChild(link); | ||
| link.click(); | ||
| }; | ||
| xhr.send(); | ||
| ElMessageBox.alert("保存成功", "提示").then(() => { | ||
| this.$router.back(); | ||
| }); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .drawing-container { | ||
| height: 60vh; | ||
| width: 60vw; | ||
| position: relative; | ||
| left: 50%; | ||
| top: 50%; | ||
| transform: translate(-50%, 0); | ||
| margin-top: 300px; | ||
| margin-bottom: 300px; | ||
| } | ||
| .save { | ||
| position: absolute; | ||
| right: 50px; | ||
| top: 15px; | ||
| } | ||
| </style> |