效果圖

下載包

pnpm i tui-image-editor
pnpm i tui-color-picker

調用組件

//html部分
<el-dialog v-model="imgshow" destroy-on-close width="40%" draggable align-center :show-close="true":close-on-click-modal="false"><template #header><div style="display: flex; justify-content: space-between"><div style="display: flex"><h3>圖片</h3></div></div></template><div class="newBox"><!-- 圖片處理框 --><SignImage v-if="cropperObj.cVisible" :dialogVisible="cropperObj.cVisible" :title="cropperObj.ctitle":imgUrl="cropperObj.previewsImgUrl" @getNewImg="cropperObj.getNewImg"@closeCropperDialog="cropperObj.closeCropperView"></SignImage></div></el-dialog>//js部分
import { SignImage } from './index';//調用組件
let imgshow = ref<boolean>(false);
const cropperObj = reactive({cVisible: true, // 顯示切圖彈框ctitle: "", // 彈框標題previewsImgUrl: "https://img0.baidu.com/it/u=2759734465,3558448225&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1708621200&t=acc59373dca9b8658e33e14a974f6c47", //圖片地址// 開啟剪切彈框openCropperView: () => {cropperObj.ctitle = "圖片處理"cropperObj.cVisible = true},// 關閉彈框所觸發的事件closeCropperView: (data) => {cropperObj.cVisible = false},// 獲取處理完的圖片數據getNewImg: (val: any) => {console.log("val", val);pictureAnnotationFun(val)}
})
//圖片上傳函數,并加其他參數
async function pictureAnnotationFun(file: any) {const formData = new FormData()formData.append("file", file);formData.append('id', xx);formData.append('bid', xxx);try {const { code, msg, data } = await uploadimg(formData);if (code > 0) {cropperObj.cVisible = false;ElMessage({showClose: true,message: '上傳成功',type: 'success',});} else {ElMessage({showClose: true,message: '上傳失敗' + msg,type: 'error',duration: 0,});}} catch (e) {ElMessage({showClose: true,message: '錯誤: ' + e.message,type: 'error',duration: 0,});}
}

封裝組件代碼

<template><div class="drawing-container"><!-- 繪圖組件容器DOM --><div id="tui-image-editor"></div><el-button class="save" type="primary" @click="save">保存</el-button></div>
</template>
<script setup lang="ts">
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 { nextTick, onMounted, ref } from 'vue';// 中文菜單
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',
};// props
const props = defineProps({dialogVisible: {type: Boolean,default: () => {return false;},},title: {type: String,default: '',},imgUrl: {type: String,default: '',},
});
const emit = defineEmits(['closeCropperDialog', 'getNewImg']);
const instance = ref<any>(null);onMounted(() => {nextTick(() => {init(); // 頁面創建完成后調用});
});// 關閉彈框
const closeDialog = () => {emit('closeCropperDialog');// options.img = ''
};const init = () => {instance.value = new ImageEditor(document.querySelector('#tui-image-editor'), {includeUI: {loadImage: {path: props.imgUrl,name: 'image',},menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜單按鈕列表 隱藏鏡像flip和遮罩maskinitMenu: 'draw', // 默認打開的菜單項menuBarPosition: 'bottom', // 菜單所在的位置locale: locale_zh, // 本地化語言為中文theme: customTheme, // 自定義樣式},cssMaxWidth: 400, // canvas 最大寬度cssMaxHeight: 500, // canvas 最大高度});document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px'; // 調整圖片顯示位置document.getElementsByClassName('tie-btn-reset tui-image-editor-item help')[0].style.display = 'none'; // 隱藏頂部重置按鈕
};// 保存圖片，并上傳
const save = async () => {const base64String = instance.value.toDataURL(); // base64 文件const data = window.atob(base64String.split(',')[1]);const ia = new Uint8Array(data.length);for (let i = 0; i < data.length; i++) {ia[i] = data.charCodeAt(i);}const file = new File([ia], "打標.png", { type: "image/png" });emit('getNewImg', file);};
</script><style lang="scss" scoped>
.drawing-container {width: 100%;height: 80vh;position: relative;.save {position: absolute;right: 50px;top: 15px;}
}
</style>