Vue中使用图片编辑器 tui-image-editor 实现在线编辑保存
<template>
<div class="box">
<div class="drawing-container">
<div id="tui-image-editor"></div>
<el-button class="back" type="primary" size="small" @click="back">返回</el-button>
<el-button class="save" type="primary" size="small" @click="save">保存</el-button>
</div>
</div>
</template>
<script>
import storage from "@/utils/storage";
import "tui-image-editor/dist/";
import "tui-color-picker/dist/";
import ImageEditor from "tui-image-editor";
export default {
name: 'copper',
data() {
return {
myHeaders:{},
instance: null,
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": "锁定宽高比例",
},
customTheme : {
"": "", // 左上角logo图片
"": "0px",
"": "0px",
"": "none",
"": "#f3f4f6",
"": "1px solid #333",
// header
"": "none",
"": "#f3f4f6",
"": "0px",
// load button
"": "#fff",
"": "1px solid #ddd",
"": "#222",
"": "NotoSans, sans-serif",
"": "12px",
"": "none", // 隐藏
// download button
"": "#fdba3b",
"": "1px solid #fdba3b",
"": "#fff",
"": "NotoSans, sans-serif",
"": "12px",
"": "none", // 隐藏
// icons default
"": "#8a8a8a",
"": "#555555",
"": "#ccc",
"": "#e9e9e9",
"": "#8a8a8a",
"": "#e9e9e9",
"": "24px",
"": "24px",
"": "32px",
"": "32px",
// submenu primary color
"": "#1e1e1e",
"": "#858585",
// submenu labels
"": "#858585",
"": "lighter",
"": "#fff",
"": "lighter",
// checkbox style
"": "1px solid #ccc",
"": "#fff",
// rango style
"": "#fff",
"": "#666",
"": "#d1d1d1",
"": "#414141",
"": "#282828",
"": "#414141",
"": "#fff",
"": "lighter",
"": "11px",
"": "1px solid #353535",
"": "#151515",
"": "#fff",
"": "lighter",
// colorpicker style
"": "1px solid #1e1e1e",
"": "#fff",
},
}
},
props: ["parent2"],
mounted() {
();
= {
'Token':("Token")
}
},
methods: {
init(file) {
= new ImageEditor(
("#tui-image-editor"),
{
includeUI: {
loadImage: {
// path: require("@/assets/这里可以自定义照片，我给改成带入的了"),
path: file,
name: "image",
},
menu: ["resize", "crop", "flip", "rotate", "draw", "shape", "icon", "text", "mask", "filter"], // 底部菜单按钮列表 想隐藏什么按顺序去除就行
initMenu: "draw", // 默认打开的菜单项
menuBarPosition: "bottom", // 菜单所在的位置
locale: this.locale_zh, // 本地化语言为中文
theme: , // 自定义样式
},
cssMaxWidth: 1000, // canvas 最大宽度
cssMaxHeight: 600, // canvas 最大高度
}
);
("tui-image-editor-main")[0]. = "45px"; // 图片距顶部工具栏的距离
// ("tie-btn-reset tui-image-editor-item help") [0]. = "none"; // 隐藏顶部重置按钮
},
//返回
back(){
this.parent2.showFlag1 = true;
this. = false;
this.()
},
// 保存图片，并上传
save() {
//下面进行获取图片，然后进行转换到后台可以上传的格式
const base64String = (); // base64 文件
const data = ((",")[1]);
const ia = new Uint8Array();
for (let i = 0; i < ; i++) {
ia[i] = (i);
}
const blob = new Blob([ia], { type: "image/png" }); // blob 文件
//下面懒得弄组件直接用当前时间弄得文件名，如果后台写了这里可以随便，也可以使用uuid进行生成
const file = new File([blob], new Date().getTime()+'.png', { type: });
const form = new FormData();
//后端使用@RequestParam("file") MultipartFile file接受，这里变换一下格式
("file", file);
// 上传文件操作
const url = this.$base.url + "file/upload"
this.$http({
url: url,
method: "POST",
data: form,
header:
}).then(({data}) => {
if (data && === 0) {
//我这里返回的是图片地址
var url = ;
//点击进入的代码我在下一部分贴出来
//保存完要返回，这里是一些返回操作，这里是从孙组件返回子组件，可以百度一下
//让上级组件显示
this.parent2.showFlag1 = true;
//让自己隐藏
this. = false;
//这个是恢复上级组件按钮的方法，框架有毛病，这个不重要
this.()
//这里是组件传值里面的带参返回
this.$emit('fileUrl', url);
} else {
this.$message.error();
}
})
},
}
}
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
}
.drawing-container {
height: 900px;
position: relative;
.save {
position: absolute;
right: 50px;
top: 15px;
}
.back {
position: absolute;
right: 120px;
top: 15px;
}
}
</style>