• vue3中使用 tui-image-editor进行图片处理,并上传

    效果图

    在这里插入图片描述

    下载包

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

    • 1
    • 2

    调用组件

    //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,
		});
	}
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    封装组件代码

    <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和遮罩mask
			initMenu: '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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
  • 相关阅读:
    Codeforces 1878G 枚举 + 树上倍增
    Flink MySQL CDC
    网络安全（黑客）自学
    生产订单自动下达
    蓝桥等考Python组别八级004
    QT DAY3
    设计模式5、原型模式 Prototype
    JAVA学习(2)-全网最详细~
    餐饮外卖配送小程序商城的作用是什么？
    C++11标准模板（STL）- 算法（std::upper_bound）
  • 原文地址：https://blog.csdn.net/qq_44871531/article/details/136214417