Vue如何实现一个支持长尾关键词搜索的图片裁剪功能？

本文共计1837个文字，预计阅读时间需要8分钟。

目录

一、准备工作

二、基本结构

三、添加功能

+ onMouseDown + onMouseMove + onMouseUp + onMouseLeave

四、总结

近期，在撰写公司项目文档时，接到一个需求：对已加载的大图中可截取部分图片用于入库或其它用途。

目录

• 一、准备工作
• 二、基本结构
• 三、添加功能
• onMouseDown
• onMouseMove
• onMouseUp
• onMouseLeave
• 四、总结

近日，在写公司项目的时候接到一个需求：对已加载的大图中可截取部分图片用来入库或者布控，说白了就是截图嘛，于是我使用了vue-cropper来完成。完成后因为前边也没自己实现过，所以就想看看是如何实现的。因此本文写的是最简易基础的实现方法用作学习，肯定有考虑不周的地方，还请大家谅解。工作中还是使用成熟的轮子为好。

一、准备工作

本文中我所使用的环境为vue2 。现在可以在随便一个vue项目中新建一个vue文件开始了。

二、基本结构

在本文中会使用到两个canvas，一个用来绘制我们要加载的图片，一个用来绘制矩形框选区域，就像下面这样，并且在两个canvas身上分别加上ref属性。