快给你的Vue项目添加一个编辑图片组件吧

一款功能极其强大的图片编辑插件 tui.image-editor

快速体验

  • 首选在你的前端项目中安装：
npm i tui-image-editor
// or
yarn add tui-image-editor
  • 现在你就去新建一个.vue文件，复制进去下面这段代码：
<template><div id="tui-image-editor"></div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
export default {data() {return {instance: null,}},mounted() {this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),{includeUI: {loadImage: {path: "https://uploadbeta.com/api/pictures/random/",name: "image"},initMenu: "draw",menuBarPosition: "bottom"},});}
}
</script>

默认效果：

默认效果图

国际化：

工具中的描述默认都是英文的我们先把这部分汉化一下：

// 将原有的代码改为这样
<template><div id="tui-image-editor"></div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
const locale_zh = {// override default English locale to your customCrop: "裁剪",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: "混合色"// etc...
};
export default {data() {return {instance: null,}},mounted() {this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),{includeUI: {loadImage: {path: "https://uploadbeta.com/api/pictures/random/",name: "image"},initMenu: "draw",menuBarPosition: "bottom",locale: locale_zh // 本地化语言为中文},});}
}
</script>

汉化后

汉化后
这时候你会发现你可能不需要右上角的Load和Download和左上角这个默认的logo，我们可以通过自定义主题将这部分改掉：
修改上面的代码为：

<template><div id="tui-image-editor"></div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
const locale_zh = {// override default English locale to your customCrop: "裁剪",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: "混合色"// etc...
};
const customTheme = {// image 坐上角度图片"common.bi.image": "", // 在这里换上你喜欢的logo图片"common.bisize.width": "0px","common.bisize.height": "0px","common.backgroundImage": "none","common.backgroundColor": "#f3f4f6","common.border": "1px solid #444",// 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": "#434343","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"
};
export default {data() {return {instance: null,}},mounted() {this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),{includeUI: {loadImage: {path: "https://uploadbeta.com/api/pictures/random/",name: "image"},initMenu: "draw",menuBarPosition: "bottom",locale: locale_zh,theme: customTheme, // 自定义主题},});}
}
</script>

自定义样式效果

自定义样式效果
我们将上面的默认图片,Load和Download按钮去掉了，但是会发现上面存在了一条白色的，这就浪费了我们编辑图片的空间，我们继续优化：

// 通过在主题中改变样式隐藏掉我们不需要的header
const customTheme = {// image 坐上角度图片"common.bi.image": "", // 在这里换上你喜欢的logo图片"common.bisize.width": "0px","common.bisize.height": "0px","common.backgroundImage": "none","common.backgroundColor": "#f3f4f6","common.border": "1px solid #444",// header"header.backgroundImage": "none","header.backgroundColor": "#f3f4f6","header.border": "0px","header.display": "none", // 隐藏我们的header// 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": "#434343","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"
};
但是发现还是没有隐藏掉,需要我们对样式进行修改
// ...
document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;

下一步我们要拿到编辑后的图片了：

这个插件提供了一个toDataURL的方法,可以将我们编辑后的图片转为base64,然后我们可以通过转为form表单上传到我们的服务器，或者转为图片，这里提供一份上传到后台的逻辑：

// ...
methods: {uploadImg() {const base64String = this.instance.toDataURL();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 blob = new Blob([ia], { type: "image/png" });const fd = new FormData();fd.append("image", blob);// upload fd}
}

最后，放上一段完整的代码：

<template><div class="container"><div id="tui-image-editor"></div><button @click="uploadImg">完成并上传</button></div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
const locale_zh = {// override default English locale to your customCrop: "裁剪",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: "混合色",// etc...
};
const customTheme = {// image 坐上角度图片"common.bi.image": "https://uploadbeta.com/api/pictures/random/", // 在这里换上你喜欢的logo图片"common.bisize.width": "0px","common.bisize.height": "0px","common.backgroundImage": "none","common.backgroundColor": "#f3f4f6","common.border": "1px solid #444",// header"header.backgroundImage": "none","header.backgroundColor": "#f3f4f6","header.border": "0px","header.display": "none",// 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": "#434343","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",
};
export default {data() {return {instance: null,};},mounted() {this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),{includeUI: {loadImage: {path: "https://uploadbeta.com/api/pictures/random/",name: "image",},initMenu: "draw",menuBarPosition: "bottom",locale: locale_zh,theme: customTheme,},});document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;},methods: {uploadImg() {const base64String = this.instance.toDataURL();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 blob = new Blob([ia], { type: "image/png" });const fd = new FormData();fd.append("image", blob);// upload fd},},
};
</script><style lang="css" scoped>
.container {height: 95vh;text-align: center;
}
</style>

最终效果，战歌起！

最终效果

最后

如果有什么疑问或者使用中的其他问题可以在评论中讨论一下。

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

QTableWidget表格控件的用法（非常详细）

QTableWidget表格控件的用法（非常详细）

QTableWidget表格控件的用法&#xff08;非常详细&#xff09; [1] QTableWidget表格控件的用法&#xff08;非常详细&#xff09;[2] QTableWidget详解1.常用API设置自动调整行高和列宽设置表格内容是否可编辑设置行表头、列表头是否显示 2.添加子项3.右键弹出菜单4.设置风格5…
阅读更多...
如果你觉得自己对 CSS 变量不熟悉，那么可以补充这个！

如果你觉得自己对 CSS 变量不熟悉，那么可以补充这个！

作者&#xff1a; Ahmad Shadeed 译者&#xff1a;前端小智 来源&#xff1a;ishadeed 点赞再看&#xff0c;养成习惯 本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录&#xff0c;更多往期高赞文章的分类&#xff0c;也整理了很多我的文档&#xff0c;和教程资…
阅读更多...
VMware中配置NAT方式上网 by.zyw

VMware中配置NAT方式上网 by.zyw

VMware中配置NAT方式上网 by.zyw 看了本站上众大神的VMware配置NAT方式上网的文章后&#xff0c;发现在本人电脑上并不能完全设置成功&#xff0c;在自己摸索后&#xff0c;虚拟机配置NAT方式上网成功&#xff0c;下列个人实际操作经验&#xff1a; NAT模式介绍&#xff1a; …
阅读更多...
在线文档 - Google 文档的数据协议设计

在线文档 - Google 文档的数据协议设计

在线文档 - Google 文档的数据协议设计 Google 文档作为 G Suite 重要的产品套件之一&#xff0c;作为优秀的在线协作文档而经常被开发者所讨论&#xff0c;在 Google 文档背后&#xff0c;有着一整套优秀的相关架构设计支撑&#xff0c;数据协议设计就是其中之一&#xff0c;非…
阅读更多...
数仓--------简单了解

数仓--------简单了解

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…
阅读更多...
分类预测 | MATLAB实现SSA-CNN-SVM基于麻雀算法优化卷积支持向量机分类预测

分类预测 | MATLAB实现SSA-CNN-SVM基于麻雀算法优化卷积支持向量机分类预测

分类预测 | MATLAB实现SSA-CNN-SVM基于麻雀算法优化卷积支持向量机分类预测 目录 分类预测 | MATLAB实现SSA-CNN-SVM基于麻雀算法优化卷积支持向量机分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SSA-CNN-SVM基于麻雀算法优化卷积支持向量机分类预测…
阅读更多...
Prima Cartoonizer v3.1.4一键生成专属动漫头像，

Prima Cartoonizer v3.1.4一键生成专属动漫头像，

不少小伙伴都想获取一个自己的专属动漫头像&#xff0c;但是要请画师帮忙画一张又不便宜。 今天小编就带来一款可以将图像一键转动漫效果的软件&#xff0c;内含了近40种不同的动漫模板&#xff0c;还有各种卡通眼睛、眼镜及漫画常用的贴图工具 满足你的各种漫画头像制作需求…
阅读更多...
高中信息技术教资考试模拟卷（22下）

高中信息技术教资考试模拟卷（22下）

2022 年下半年全国教师资格考试模考卷一 &#xff08;高中信息技术&#xff09; 一、单项选择题&#xff08;本大题共 15 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09; 1.2006 年 10 月 25 日&#xff0c;深圳警方成功解救出一名被网络骗子孙某…
阅读更多...
RHCE——八、DNS域名解析服务器

RHCE——八、DNS域名解析服务器

RHCE 一、概述1、产生原因2、作用3、连接方式4、因特网的域名结构4.1 拓扑4.2 分类4.3 域名服务器类型划分 二、DNS域名解析过程1、分类2、解析图&#xff1a;2.1 图&#xff1a;2.2 过程分析 三、搭建DNS域名解析服务器1、概述2、安装软件3、/bind服务中三个关键文件4、配置文…
阅读更多...
string类中的一些问题

string类中的一些问题

前言&#xff1a;C中的string类是继承C语言的字符数组的字符串来实现的&#xff0c;其中包含许多C的字符串的相关知识的同时&#xff0c;也蕴含很多的类与对象的相关知识&#xff0c;在面试中&#xff0c;面试官总喜欢让学生自己来模拟实现string类&#xff0c;最主要是实现str…
阅读更多...
select语句详细解释

select语句详细解释

SELECT 语句的基本格式为&#xff1a; SELECT 要查询的列名 FROM 表名字 WHERE 限制条件; SELECT 语句常常会有 WHERE 限制条件&#xff0c;用于达到更加精确的查询。WHERE 限制条件可以有数学符号 ( < > > <) select name,age from employee where salary>3500…
阅读更多...
go中select语句

go中select语句

在golang语言中&#xff0c;select语句 就是用来监听和channel有关的IO操作&#xff0c;当IO操作发生时&#xff0c;触发相应的case动作。有了 select语句&#xff0c;可以实现 main主线程 与 goroutine线程 之间的互动。 select {case <-ch1 : // 检测有没有数据可读//…
阅读更多...
SQL SELECT语句

SQL SELECT语句

SQL语句是由简单地英语单词构成的。这些单词称为关键字&#xff0c;每个SQL语句都是由一个或多个关键字构成的。最经常使用的SQL语句大概就是SELECT语句了&#xff0c;它的用途是从一个或多个表中检索信息 SELECT 语句用于从数据中选取数据。 结果被存储在一个结果表中&#…
阅读更多...
权限提升-手工-系统权限提升

权限提升-手工-系统权限提升

权限提升基础信息 1、具体有哪些权限需要我们了解掌握的&#xff1f; 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 2、以上常见权限获取方法简要归类说明&#xff1f; 后台权限&#xff1a;SQL注入,数…
阅读更多...
5 群起集群

5 群起集群

1.在启动集群之前&#xff0c;先配置workers,有几个节点就配置几个 [atguiguhadoop102 hadoop]$ vim /opt/module/hadoop-3.1.3/etc/hadoop/workers在该文件中增加如下内容&#xff1a; hadoop102 hadoop103 hadoop104 注意&#xff1a;该文件中添加的内容结尾不允许有空格&a…
阅读更多...
K车模长得啥样？

K车模长得啥样？

根据 第十六届全国大学智能汽车竞赛竞速比赛规则-讨论稿 中的“单车拉力组”要求&#xff0c;车模使用K型车模&#xff0c;这是一个前后轮的电单车。那么究竟它长的啥样呢&#xff1f; 下面是由车模生产厂商提供的Solidwork车模3D模型截图。 ▲ 左上方的视图 ▲ 后上方的视图 …
阅读更多...
K-Mean聚类算法

K-Mean聚类算法

文章目录 0.前置基础0.1聚类简介 [3] [5]0.2 聚类与分类的区别[4] 1.K-Means算法思想2.K-Means算法原理及步骤2.1k-means聚类原理[3]【机器学习】全面解析Kmeans聚类算法&#xff08;Python&#xff09;_人工智能_032.2 k-means计算步骤[1]2.3 k-means术语[5]2.4 k-means开发流…
阅读更多...
Top K问题【转载】

Top K问题【转载】

面试中&#xff0c;TopK&#xff0c;是问得比较多的几个问题之一&#xff0c;到底有几种方法&#xff0c;这些方案里蕴含的优化思路究竟是怎么样的&#xff0c;今天和大家聊一聊。 画外音&#xff1a;除非校招&#xff0c;我在面试过程中从不问TopK这个问题&#xff0c;默认大…
阅读更多...
寻找第k元

寻找第k元

要求&#xff1a;给定一个数组array[n],寻找大小排在第k的元素 思路一&#xff1a;最直接的思路就是先排序&#xff0c;这样可以直接通过数组下标找到第k大的元素&#xff0c;最好的快速排序时间复杂度为O(nlogn)。 思路二&#xff1a;我们可以在快速排序的基础上进行改进&am…
阅读更多...
如何确定K-means算法中的k值？

如何确定K-means算法中的k值？

1. K-means算法 k-means算法是机器学习中常用的聚类算法&#xff0c;原理简单实现容易&#xff0c;内存占用量也比较小。但使用这个方法时&#xff0c;需要事先指定将要聚合成的簇数。 在先验知识缺乏的情况下&#xff0c;想要确定是非常困难的。目前常用的用来确定的方法主要…
阅读更多...
最新文章

Copyright @ 2022~2023