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

效果图

在这里插入图片描述

下载包

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/696372.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+vue的视频网站系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

Stable Diffusion 模型分享:FenrisXL(芬里斯XL)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十

IO进程线程第6天

1.使用有名管道完成两个进程的相互通信 send.c代码如下&#xff1a; #include <myhead.h>int main(int argc, const char *argv[]) {pid_t pidfork();if(pid>0){//父进程//从管道1中读取数据int fd-1;if((fdopen("./mkfifo1",O_RDONLY))-1){perror("…

【安卓基础3】Activity(一)

&#x1f3c6;作者简介&#xff1a;|康有为| &#xff0c;大四在读&#xff0c;目前在小米安卓实习&#xff0c;毕业入职 &#x1f3c6;本文收录于 安卓学习大全&#xff0c;欢迎关注 &#x1f3c6;安卓学习资料推荐&#xff1a; 视频&#xff1a;b站搜动脑学院 视频链接 &…

Sora横空出世!AI将如何撬动未来?

近日&#xff0c;OpenAI 发布首个视频生成“Sora”模型&#xff0c;该模型通过接收文字指令&#xff0c;即可生成60秒的短视频。 而在2022年末&#xff0c;同样是OpenAI发布的AI语言模型ChatGPT&#xff0c;简化了文本撰写、创意构思以及代码校验等任务。用户仅需输入一个指令&…

【IC设计】Chisel API之Arbiter和RRArbiter的使用

文章目录 介绍Chisel的Valid和Ready流控build.sbtRRArbiter代码示例 介绍 仲裁器在NoC路由器中是重要的组成部分&#xff0c;虚通道仲裁和交叉开关仲裁都需要使用仲裁器。 Chisel提供了Arbiter和RRArbiter仲裁器 Arbiter是基础的低位优先仲裁器&#xff0c; RRArbiter初始情况…

前端构建效率优化之路

项目背景 我们的系统&#xff08;一个 ToB 的 Web 单页应用&#xff09;前端单页应用经过多年的迭代&#xff0c;目前已经累积有大几十万行的业务代码&#xff0c;30 路由模块&#xff0c;整体的代码量和复杂度还是比较高的。 项目整体是基于 Vue TypeScirpt&#xff0c;而构…

ProtoBuf认识与Windows下的安装

protobuf简介 Protobuf 是 Protocol Buffers 的简称&#xff0c;它是 Google 公司开发的一种数据描述语言&#xff0c;是一种轻便高效的结 构化数据存储格式&#xff0c;可以用于结构化数据&#xff0c;或者说序列化。它很适合做数据存储 或 RPC 数据交换格 式 。可用于通讯…

WebServer -- 定时器处理非活动连接(上)

目录 &#x1f34d;函数指针 &#x1f33c;基础知识 &#x1f419;整体概述 &#x1f382;基础API sigaction 结构体 sigaction() sigfillset() SIGALRM, SIGTERM 信号 alarm() socketpair() send() &#x1f4d5;信号通知流程 统一事件源 信号处理机制 &#x…

2024全球网络安全展望|构建协同生态,护航数字经济

2024年1月&#xff0c;世界经济论坛发布《2024全球网络安全展望》报告&#xff0c;指出在科技快速发展的背景下&#xff0c;网络安全不均衡问题加剧&#xff0c;需加强公共部门、企业组织和个人的合作。 报告强调&#xff0c;面对地缘政治动荡、技术不确定性和全球经济波动&am…

基于springboot+vue的美发门店管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

Cartographer框架简述

catographer框架分为前端和后端 前端包括雷达数据处理&#xff1b;位姿预测&#xff1b;扫描匹配和栅格地图更新。 后端包括后端&#xff1a;线程池任务与调度&#xff1b;向位姿图添加节点&#xff0c;计算节点的子图内约束和子图间约束&#xff08;回环检测&#xff09;&…

C++之Easyx——图形库的基本功能(1):界面操作

最近&#xff0c;我觉得使用控制台编写游戏太没意思了&#xff01;&#xff01; 所以我开始研究图形库了~ 一、setinitmode 函数定义 void EGEAPI setinitmode(int mode, int x CW_USEDEFAULT, int y CW_USEDEFAULT); //设置初始化模式&#xff0c;mode0为普通&#xff0c…

Javascript怎么输出内容?两种常见方式以及控制台介绍

javascript是一种非常重要的编程语言&#xff0c;在许多网页中它被广泛使用&#xff0c;可以实现许多交互效果和动态效果。输出是javascript中最基本的操作之一&#xff0c;下面将介绍两种常见的输出方式。 一、使用console.log()函数输出 console.log()函数是常用的输出函数…

Jmeter实现阶梯式线程增加的压测

安装相应jmeter 插件 1&#xff1a;安装jmeter 管理插件&#xff1a; 下载地址&#xff1a;https://jmeter-plugins.org/install/Install/&#xff0c;将下载下来的jar包放到jmeter文件夹下的lib/ext路径下&#xff0c;然后重启jmeter。 2&#xff1a;接着打开 选项-Plugins Ma…

三十年一个大轮回!日股突破“泡沫时期”历史高点

2月22日周四&#xff0c;英伟达四季报业绩超预期&#xff0c;而且本季度业绩指引非常乐观&#xff0c;提振美股股指期货并成为芯片股和AI概念股情绪的重要催化剂。今日亚洲芯片股和AI股起飞&#xff0c;日本在芯片股的带动下突破1989年泡沫时期以来的历史最高收盘价。 美股方面…

(十三)【Jmeter】线程(Threads(Users))之tearDown 线程组

简述 操作路径如下: 作用:在正式测试结束后执行清理操作,如关闭连接、释放资源等。配置:设置清理操作的采样器、执行顺序等参数。使用场景:确保在测试结束后应用程序恢复到正常状态,避免资源泄漏或对其他测试的影响。优点:提供清理操作,确保测试环境的整洁和可重复性…

租用海外服务器,自己部署ChatGPT-Next-Web,实现ChatGPT聊天自由,还可以分享给朋友用

前言 如果有好几个人需要使用ChatGPT&#xff0c;又没有魔法上网环境&#xff0c;最好就是自己搭建一个海外的服务器环境&#xff0c;然后很多人就可以同时直接用了。 大概是情况是要花80元租一个一年的海外服务器&#xff0c;花15元租一个一年的域名&#xff0c;然后openai 的…

一 些有代表性的相位解包裹算法

Itoh首先给出了传统解包裹算法的数学描述!。传统的相位解包裹操作是通过对空间相邻点相位值的比较来完成的。根据抽样定理&#xff0c;如果相邻采样点的相位差不超过z&#xff0c;则对应的相位解包裹处理是非常简单的&#xff0c;理论上以某点为起始点沿某一路径对包裹相位的差…

中科院计算所:什么情况下,大模型才需要检索增强?

ChatGPT等大型语言模型在自然语言处理领域表现出色。但有时候会表现得过于自信&#xff0c;对于无法回答的事实问题&#xff0c;也能编出一个像样的答案来。 这类胡说乱说的答案对于医疗等安全关键的领域来说&#xff0c;是致命的。 为了弥补这一缺陷&#xff0c;研究者们提出…