分享一个强大的 Vue 图片编辑插件（快来试试！）

第分享一个强大的Vue图片编辑插件（快来试试！）最近用户提出了一个新的需求，老师可以批改学生的图片作业，需要对图片进行旋转、缩放、裁剪、涂鸦、标注、添加文本等。乍一听，又要掉不少头发。有没有功能强大的插件实现以上功能，让我有更多的时间去阻止女票双十一剁手呢？答案当然是有的。

是不是很强大！还有众多功能我就不一一展示了。那么还等什么，跟我一起用起来吧~

npmitui-image-editor

//or

yarnaddtui-image-editor

复制以下代码，将插件引入到自己的项目中。

template

div

divid=tui-image-editor/div

/div

/template

script

importtui-image-editor/dist/tui-image-editor.CSS

importtui-color-picker/dist/tui-color-picker.css

importImageEditorfromtui-image-editor

exportdefault{

data(){

return{

instance:null,

mounted(){

this.init();

methods:{

init(){

this.instance=newImageEditor(

document.querySelector(#tui-image-editor),

includeUI:{

loadImage:{

path:/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image,

name:image,

initMenu:draw,//默认打开的菜单项

menuBarPosition:bottom,//菜单所在的位置

cssMaxWidth:1000,//canvas最大宽度

cssMaxHeight:600,//canvas最大高度

document.getElementsByClassName(tui-image-editor-mAIn)[0].style.top=45px//图片距顶部工具栏的距离

/script

stylescoped

.drawing-container{

height:900px;

/style

可以看到活生生的图片编辑工具就出现了，是不是很简单：

由于是老外开发的，默认的文字描述都是英文，这里我们先汉化一下：

constlocale_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:颜色,

Textsize:字体大小,

Custom:自定义,

Square:正方形,

Apply:应用,

Cancel:取消,

FlipX:X轴,

FlipY: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:气泡,

Customicon:自定义图标,

LoadMaskImage:加载蒙层图片,

Grayscale:灰度,

Blur:模糊,

Sharpen:锐化,

Emboss:浮雕,

RemoveWhite:除去白色,

Distance:距离,

Brightness:亮度,

Noise:噪音,

ColorFilter:彩色滤镜,

Sepia:棕色,

Sepia2:棕色2,

Invert:负片,

Pixelate:像素化,

Threshold:阈值,

Tint:色调,

Multiply:正片叠底,

Blend:混合色,

Width:宽度,

Height:高度,

LockAspectRatio:锁定宽高比例,

this.instance=newImageEditor(

document.querySelector(#tui-image-editor),

includeUI:{

loadImage:{

path:/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image,

name:image,

initMenu:draw,//默认打开的菜单项

menuBarPosition:bottom,//菜单所在的位置

locale:locale_zh,//本地化语言为中文

cssMaxWidth:1000,//canvas最大宽度

cssMaxHeight:600,//canvas最大高度

);

效果如下：

自定义样式

默认风格为暗黑系，如果想改成白底，或者想改变按钮的大小、颜色等样式，可以使用自定义样式。

constcustomTheme={

common.bi.image:,//左上角logo图片

common.bisize.width:0px,

common.bisize.height:0px,

common.backgroundImage:none,

common.backgroundColor:#f3f4f6,

common.border:1pxsolid#333,

//header

header.backgroundImage:none,

header.backgroundColor:#f3f4f6,

header.border:0px,

//loadbutton

loadButton.backgroundColor:#fff,

loadButton.border:1pxsolid#ddd,

loadButton.color:#222,

loadButton.fontFamily:NotoSans,sans-serif,

loadButton.fontSize:12px,

loadButton.display:none,//隐藏

//downloadbutton

downloadButton.backgroundColor:#fdba3b,

downloadButton.border:1pxsolid#fdba3b,

downloadButton.color:#fff,

downloadButton.fontFamily:NotoSans,sans-serif,

downloadButton.fontSize:12px,

downloadButton.display:none,//隐藏

//iconsdefault

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,

//submenuprimarycolor

submenu.backgroundColor:#1e1e1e,

submenu.partition.color:#858585,

//submenulabels

submenu.normalLabel.color:#858585,

submenu.normalLabel.fontWeight:lighter,

submenu.activeLabel.color:#fff,

submenu.activeLabel.fontWeight:lighter,

//checkboxstyle

checkbox.border:1pxsolid#ccc,

checkbox.backgroundColor:#fff,

//rangostyle

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:1pxsolid#353535,

range.value.backgroundColor:#151515,

range.title.color:#fff,

range.title.fontWeight:lighter,

//colorpickerstyle

colorpicker.button.border:1pxsolid#1e1e1e,

colorpicker.title.color:#fff,

this.instance=newImageEditor(

document.querySelector(#tui-image-editor),

includeUI:{

loadImage:{

path:/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image,

name:image,

initMenu:draw,//默认打开的菜单项

menuBarPosition:bottom,//菜单所在的位置

locale:locale_zh,//本地化语言为中文

theme:customTheme,//自定义样式

cssMaxWidth:1000,//canvas最大宽度

cssMaxHeight:600,//canvas最大高度

);

效果如下：

通过自定义样式，我们看到右上角的Load和Download按钮已经被隐藏了，接下来我们再隐藏掉其他用不上的按钮（根据业务需要），并添加一个保存图片的按钮。

template

div

divid=tui-image-editor/div

el-buttontype=primarysize=small@click=save保存/el-button

/div

/template

//...

methods:{

init(){

this.instance=newImageEditor(

document.querySelector(#tui-image-editor),

includeUI:{

loadImage:{

path:/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image,

name:image,

menu:[resize,crop,rotate,draw,shape,icon,text,filter],//底部菜单按钮列表隐藏镜像flip和遮罩mask

initMenu:draw,//默认打开的菜单项

menuBarPosition:bottom,//菜单所在的位置

locale:locale_zh,//本地化语言为中文

theme:customTheme,//自定义样式

cssMaxWidth:1000,//canvas最大宽度

cssMaxHeight:600,//canvas最大高度

document.getElementsByClassName(tui-image-editor-main)[0].style.top=45px//调整图片显示位置

document.getElementsByClassName(tie-btn-resettui-image-editor-itemhelp)[0].style.display=none//隐藏顶部重置按钮

//保存图片，并上传

save(){

constbase64String=this.instance.toDataURL();//base64文件

constdata=window.atob(base64String.split(,)[1]);

constia=newUint8Array(data.length);

for(leti=0;idata.length;i++){

ia[i]=data.charCodeAt(i);

constblob=newBlob([ia],{type:image/png});//blob文件

constform=newFormData();

form.append(image,blob);

//uploadfile

stylescoped

.drawing-container{

height:900px;

position:relative;

.save{

position:absolute;

right:50px;

top:15px;

/style

效果如下：

可以看到顶部的重置按钮，以及底部的镜像和遮罩按钮都已经不见了。右上角多了一个我们自己的保存按钮，点击按钮，可以获取到base64文件和blob文件。

template

div

divid=tui-image-editor/div

el-buttontype=primarysize=small@click=save保存/el-button

/div

/template

script

importtui-image-editor/dist/tui-image-editor.css

importtui-color-picker/dist/tui-color-picker.css

importImageEditorfromtui-image-editor

constlocale_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:颜色,

Textsize:字体大小,

Custom:自定义,

Square:正方形,

Apply:应用,

Cancel:取消,

FlipX:X轴,

FlipY: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:气泡,

Customicon:自定义图标,

LoadMaskImage:加载蒙层图片,

Grayscale:灰度,

Blur:模糊,

Sharpen:锐化,

Emboss:浮雕,

RemoveWhite:除去白色,

Distance:距离,

Brightness:亮度,

Noise:噪音,

ColorFilter:彩色滤镜,

Sepia:棕色,

Sepia2:棕色2,

Invert:负片,

Pixelate:像素化,

Threshold:阈值,

Tint:色调,

Multiply:正片叠底,

Blend:混合色,

Width:宽度,

Height:高度,

LockAspectRatio:锁定宽高比例

constcustomTheme={

common.bi.image:,//左上角logo图片

common.bisize.width:0px,

common.bisize.height:0px,

common.backgroundImage:none,

common.backgroundColor:#f3f4f6,

common.border:1pxsolid#333,

//header

header.backgroundImage:none,

header.backgroundColor:#f3f4f6,

header.border:0px,

//loadbutton

loadButton.backgroundColor:#fff,

loadButton.border:1pxsolid#ddd,

loadButton.color:#222,

loadButton.fontFamily:NotoSans,sans-serif,

loadButton.fontSize:12px,

loadButton.display:none,//隐藏

//downloadbutton

downloadButton.backgroundColor:#fdba3b,

downloadButton.border:1pxsolid#fdba3b,

downloadButton.color:#fff,

downloadButton.fontFamily:NotoSans,sans-serif,

downloadButton.fontSize:12px,

downloadButton.display:none,//隐藏

//iconsdefault

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,

//submenuprimarycolor

submenu.backgroundColor:#1e1e1e,

submenu.partition.color:#858585,

//submenulabels

submenu.normalLabel.color:#858585,

submenu.normalLabel.fontWeight:lighter,

submenu.activeLabel.color:#fff,

submenu.activeLabel.fontWeight:lighter,

//checkboxstyle

checkbox.border:1pxsolid#ccc,

checkbox.backgroundColor:#fff,

//rangostyle

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:1pxsolid#353535,

range.value.backgroundColor:#151515,

range.title.color:#fff,

range.title.fontWeight:lighter,

//colorpickerstyle

colorpicker.button.border:1pxsolid#1e1e1e,

colorpicker.title.color:#fff,

exportdefault{

data(){

return{

instance:null

mounted(){

this.init()

methods:{

init(){

this.instance=newImageEditor(document.querySelector(#tui-image-editor),{

includeUI:{

loadImage:{

path:/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image,

name:image

menu:[resize,crop,rotate,draw,shape,icon,text,filter],//底部菜单按钮列表隐藏镜像flip和遮罩mask

initMenu:draw,//默认打开的菜单项

menuBarPosition:bottom,//菜单所在的位置

locale:locale_zh,//本地化语言为中文

theme