快给你的Vue项⽬添加⼀个编辑图⽚组件吧⼀款功能极其强⼤的图⽚编辑插件
快速体验
⾸选在你的前端项⽬中安装：
npm i tui-image-editor
// or
yarn add tui-image-editor
现在你就去新建⼀个.vue⽂件，复制进去下⾯这段代码：
<template>
<div id="tui-image-editor"></div>
</template>
<script>
import"tui-image-editor/dist/tui-image-editor.css";
import"tui-color-picker/dist/tui-color-picker.css";
const ImageEditor =require("tui-image-editor");
export default{
data(){
return{
instance:null,
}
},
mounted(){
this.instance =new ImageEditor(
document.querySelector("#tui-image-editor"),
{
includeUI:{
loadImage:{
path:"uploadbeta/api/pictures/random/",
name:"image"
},
initMenu:"draw",
menuBarPosition:"bottom"
},
}
)
;
}
}
</script>
默认效果：
国际化：
⼯具中的描述默认都是英⽂的我们先把这部分⼀下：
// 将原有的代码改为这样
<template>
<div id="tui-image-editor"></div>
</template>
<script>
import"tui-image-editor/dist/tui-image-editor.css";
import"tui-color-picker/dist/tui-color-picker.css";
const ImageEditor =require("tui-image-editor");
const locale_zh ={
// override default English locale to your custom
Crop:"裁剪",
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 轴",
fontweight默认值"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:"混合⾊"
//
};
};
export default{
data(){
return{
instance:null,
}
},
mounted(){
this.instance =new ImageEditor(
document.querySelector("#tui-image-editor"),
{
includeUI:{
loadImage:{
path:"uploadbeta/api/pictures/random/",
name:"image"
},
initMenu:"draw",
menuBarPosition:"bottom",
locale: locale_zh // 本地化语⾔为中⽂
},
}
);
}
}
</script>
后
这时候你会发现你可能不需要右上⾓的Load和Download和左上⾓这个默认的logo，我们可以通过⾃定义主题将这部分改掉：修改上⾯的代码为：
<template>
<div id="tui-image-editor"></div>
</template>
<script>
import"tui-image-editor/dist/tui-image-editor.css";
import"tui-color-picker/dist/tui-color-picker.css";
const ImageEditor =require("tui-image-editor");
const locale_zh ={
// override default English locale to your custom
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:"正⽅形",
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:"混合⾊"
//
};
const customTheme ={
// image 坐上⾓度图⽚
"common.bi.image":"",// 在这⾥换上你喜欢的logo图⽚"common.bisize.width":"0px",
"common.bisize.height":"0px",
"common.backgroundImage":"none", "common.backgroundColor":"#f3f4f6", "common.border":"1px solid #444",
// header
"header.backgroundImage":"none",
"header.backgroundColor":"#f3f4f6",
"header.border":"0px",
// load button
"loadButton.backgroundColor":"#fff", "loadButton.border":"1px solid #ddd", "lor":"#222",
"loadButton.fontFamily":"NotoSans, sans-serif", "loadButton.fontSize":"12px",
"loadButton.display":"none",// 可以直接隐藏掉
// download button
// download button
"downloadButton.backgroundColor":"#fdba3b", "downloadButton.border":"1px solid #fdba3b", "lor":"#fff", "downloadButton.fontFamily":"NotoSans, sans-serif", "downloadButton.fontSize":"12px", "downloadButton.display":"none",// 可以直接隐藏掉
// icons default
"lor":"#8a8a8a",
"lor":"#555555",
"lor":"#434343",
"lor":"#e9e9e9", "lor":"#8a8a8a", "l
or":"#e9e9e9",
"menu.iconSize.width":"24px",
"menu.iconSize.height":"24px",
"submenu.iconSize.width":"32px",
"submenu.iconSize.height":"32px",
// submenu primary color
"submenu.backgroundColor":"#1e1e1e", "lor":"#858585",
// submenu labels
"lor":"#858585", "alLabel.fontWeight":"lighter", "lor":"#fff", "submenu.activeLabel.fontWeight":"lighter",
// checkbox style
"checkbox.border":"1px solid #ccc", "checkbox.backgroundColor":"#fff",
// rango style
"lor":"#fff",
"lor":"#666",
"lor":"#d1d1d1",
"lor":"#414141", "lor":"#282828",
"lor":"#414141",
"lor":"#fff",
"range.value.fontWeight":"lighter",
"range.value.fontSize":"11px",
"range.value.border":"1px solid #353535", "range.value.backgroundColor":"#151515", "lor":"#fff",
"range.title.fontWeight":"lighter",
// colorpicker style
"colorpicker.button.border":"1px solid #1e1e1e", "lor":"#fff"
};
export default{
data(){
return{
instance:null,
}
},
mounted(){
this.instance =new ImageEditor(
document.querySelector("#tui-image-editor"), {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论