版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第分享一個(gè)強(qiáng)大的Vue圖片編輯插件（快來(lái)試試?。┳罱脩籼岢隽艘粋€(gè)新的需求，老師可以批改學(xué)生的圖片作業(yè)，需要對(duì)圖片進(jìn)行旋轉(zhuǎn)、縮放、裁剪、涂鴉、標(biāo)注、添加文本等。乍一聽，又要掉不少頭發(fā)。有沒有功能強(qiáng)大的插件實(shí)現(xiàn)以上功能，讓我有更多的時(shí)間去阻止女票雙十一剁手呢？答案當(dāng)然是有的。
是不是很強(qiáng)大！還有眾多功能我就不一一展示了。那么還等什么，跟我一起用起來(lái)吧~
npmitui-image-editor
//or
yarnaddtui-image-editor
復(fù)制以下代碼，將插件引入到自己的項(xiàng)目中。
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,//默認(rèn)打開的菜單項(xiàng)
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
可以看到活生生的圖片編輯工具就出現(xiàn)了，是不是很簡(jiǎn)單：
由于是老外開發(fā)的，默認(rèn)的文字描述都是英文，這里我們先漢化一下：
constlocale_zh={
ZoomIn:放大,
ZoomOut:縮小,
Hand:手掌,
History:歷史,
Resize:調(diào)整寬高,
Crop:裁剪,
DeleteAll:全部刪除,
Delete:刪除,
Undo:撤銷,
Redo:反撤銷,
Reset:重置,
Flip:鏡像,
Rotate:旋轉(zhuǎn),
Draw:畫,
Shape:形狀標(biāo)注,
Icon:圖標(biāo)標(biāo)注,
Text:文字標(biāo)注,
Mask:遮罩,
Filter:濾鏡,
Bold:加粗,
Italic:斜體,
Underline:下劃線,
Left:左對(duì)齊,
Center:居中,
Right:右對(duì)齊,
Color:顏色,
Textsize:字體大小,
Custom:自定義,
Square:正方形,
Apply:應(yīng)用,
Cancel:取消,
FlipX:X軸,
FlipY:Y軸,
Range:區(qū)間,
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:自定義圖標(biāo),
LoadMaskImage:加載蒙層圖片,
Grayscale:灰度,
Blur:模糊,
Sharpen:銳化,
Emboss:浮雕,
RemoveWhite:除去白色,
Distance:距離,
Brightness:亮度,
Noise:噪音,
ColorFilter:彩色濾鏡,
Sepia:棕色,
Sepia2:棕色2,
Invert:負(fù)片,
Pixelate:像素化,
Threshold:閾值,
Tint:色調(diào),
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,//默認(rèn)打開的菜單項(xiàng)
menuBarPosition:bottom,//菜單所在的位置
locale:locale_zh,//本地化語(yǔ)言為中文
cssMaxWidth:1000,//canvas最大寬度
cssMaxHeight:600,//canvas最大高度
);
效果如下：
自定義樣式
默認(rèn)風(fēng)格為暗黑系，如果想改成白底，或者想改變按鈕的大小、顏色等樣式，可以使用自定義樣式。
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,//默認(rèn)打開的菜單項(xiàng)
menuBarPosition:bottom,//菜單所在的位置
locale:locale_zh,//本地化語(yǔ)言為中文
theme:customTheme,//自定義樣式
cssMaxWidth:1000,//canvas最大寬度
cssMaxHeight:600,//canvas最大高度
);
效果如下：
通過(guò)自定義樣式，我們看到右上角的Load和Download按鈕已經(jīng)被隱藏了，接下來(lái)我們?cè)匐[藏掉其他用不上的按鈕（根據(jù)業(yè)務(wù)需要），并添加一個(gè)保存圖片的按鈕。
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,//默認(rèn)打開的菜單項(xiàng)
menuBarPosition:bottom,//菜單所在的位置
locale:locale_zh,//本地化語(yǔ)言為中文
theme:customTheme,//自定義樣式
cssMaxWidth:1000,//canvas最大寬度
cssMaxHeight:600,//canvas最大高度
document.getElementsByClassName(tui-image-editor-main)[0].style.top=45px//調(diào)整圖片顯示位置
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
效果如下：
可以看到頂部的重置按鈕，以及底部的鏡像和遮罩按鈕都已經(jīng)不見了。右上角多了一個(gè)我們自己的保存按鈕，點(diǎn)擊按鈕，可以獲取到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:調(diào)整寬高,
Crop:裁剪,
DeleteAll:全部刪除,
Delete:刪除,
Undo:撤銷,
Redo:反撤銷,
Reset:重置,
Flip:鏡像,
Rotate:旋轉(zhuǎn),
Draw:畫,
Shape:形狀標(biāo)注,
Icon:圖標(biāo)標(biāo)注,
Text:文字標(biāo)注,
Mask:遮罩,
Filter:濾鏡,
Bold:加粗,
Italic:斜體,
Underline:下劃線,
Left:左對(duì)齊,
Center:居中,
Right:右對(duì)齊,
Color:顏色,
Textsize:字體大小,
Custom:自定義,
Square:正方形,
Apply:應(yīng)用,
Cancel:取消,
FlipX:X軸,
FlipY:Y軸,
Range:區(qū)間,
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:自定義圖標(biāo),
LoadMaskImage:加載蒙層圖片,
Grayscale:灰度,
Blur:模糊,
Sharpen:銳化,
Emboss:浮雕,
RemoveWhite:除去白色,
Distance:距離,
Brightness:亮度,
Noise:噪音,
ColorFilter:彩色濾鏡,
Sepia:棕色,
Sepia2:棕色2,
Invert:負(fù)片,
Pixelate:像素化,
Threshold:閾值,
Tint:色調(diào),
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,//默認(rèn)打開的菜單項(xiàng)
menuBarPosition:bottom,//菜單所在的位置
locale:locale_zh,//本地化語(yǔ)言為中文
theme
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 行政管理與文化素養(yǎng)相結(jié)合的試題及答案
- 執(zhí)業(yè)護(hù)士考試臨床溝通與策略分析能力提升的實(shí)施與綜合策略試題及答案
- 2025執(zhí)業(yè)護(hù)士考試試題及答案的技巧
- 2025年行政策略試題及答案詳細(xì)講解
- 2025衛(wèi)生資格考試常識(shí)點(diǎn)總結(jié)試題及答案
- 清新黑板風(fēng)卡通兒童初中期末家長(zhǎng)會(huì)
- 從實(shí)踐中學(xué)習(xí)主管護(hù)師考試試題及答案
- 護(hù)理學(xué)考察試題專輯及答案2025年
- 行政法學(xué)與社會(huì)公共事務(wù)試題及答案
- 2025年護(hù)士執(zhí)業(yè)考試知識(shí)競(jìng)賽試題及答案
- 2025年隨州國(guó)投集團(tuán)公開招聘42名工作人員筆試參考題庫(kù)附帶答案詳解
- 租賃種植空地合同協(xié)議
- 鎳銅合金涂層組織與性能的研究：激光輔助電沉積技術(shù)的應(yīng)用
- 2025年四川省成都市錦江區(qū)嘉祥外國(guó)語(yǔ)高級(jí)中學(xué)高考數(shù)學(xué)三診試卷（含答案）
- 江蘇省新高考基地學(xué)校2024-2025學(xué)年高三下學(xué)期第二次大聯(lián)考化學(xué)試卷（含答案）
- 2024年懷化市鶴城區(qū)社區(qū)專職工作人員招聘筆試真題
- 《養(yǎng)牛與牛病防控技術(shù)》課件-項(xiàng)目九 疾病防控體系
- 三重一大培訓(xùn)課件
- 安裝防雷設(shè)施合同協(xié)議
- 廣東省2024-2025學(xué)年佛山市普通高中教學(xué)質(zhì)量檢測(cè)生物試卷（二）高三試卷（佛山二模）
- 商業(yè)銀行資產(chǎn)配置與風(fēng)險(xiǎn)管理
評(píng)論
0/150
提交評(píng)論