如何使用Vue.js实现图像裁剪功能 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关如何使用Vue。js实现图像裁剪功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

你是否写了一个需要接受用户上传图片的网站应用,后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题?在网络上处理图像很容易成为一种痛苦,当然,除非你使用了正确的工具。

在本教程中,我们将探讨如何在浏览器中使用JavaScript库来操作图片,为服务器上的存储做准备,并在Web程序中使用。我们将使用Vue。js而不是原生JavaScript来完成此操作。

要了本文想要完成的任务,请查看上面的图片。左侧是原始图像,右侧是新图像预览。我们可以移动裁剪框并调整其大小,预览图像也会随之改变。用户可以根据需要下载预览图像。

我们将使用名为种植者。js的库完成繁重的工作。

使用图像裁剪依赖项创建一个新的Vue。js项目

第一步是创建一个新项目并安装必要的依赖项。假设你已安装并配置了Vue CLI。

在命令行下执行以下命令:

vue create cropper-project

出现提示时,选择默认选项。这将是一个简单的项目,所以不必要担心路由和其它一些东西。

导航到新项目并执行以下操作:

npm install cropperjs ——保存

上面的命令会将惨败。js安装到我们的项目中。可以很容易地使用CDN,但因为我们使用的是利用webpack的框架,所以npm路由最有意义。

虽然安装了我们的依赖项,但还有一件事需要去做。因为用的是npm,所以不包含CSS信息,只包含JavaScript信息。我们需要在本地或通过CDN包含CSS信息。本文使用CDN。

打开项目的<代码>公共/索引。> & lt; ! DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt; meta charset=皍tf-8"祝辞　　& lt; meta http-equiv=癤-UA-Compatible",内容=癐E=edge"比; 　　& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　& lt; link rel=癷con", href=https://www.yisu.com/zixun/" ico”位于> 　　<标题> image-cropping 　　　　头　　身体<> 　　　　

请注意,在<代码> & lt; head> cropper.min。css代码文件。同样,只要你得到这个文件,如何获得css信息并不重要。如果没有css信息,我们的图像就不会有花哨的裁剪框。

在Vue.js项目中使用JavaScript裁剪图像

现在项目应该几乎已配置好并可以在网络上裁剪图像。为了保持我们的项目整洁,我们将创建一个新的Vue。js组件来处理我们所有的图像处理。

在项目中创建<代码> src/组件/ImageCropper。vue 文件,并包含以下样板代码:

& lt; template> 　　,,,& lt; div> 　　,,,,,,,& lt; div 类=癷mg-container"比; 　　,,,,,,,,,,,& lt; img ref=癷mage", https://www.yisu.com/zixun/: src=" src " crossorigin> 　　

记下<代码>%20&%20lt;%20template>%20%20src%20和<代码>目的地>%20道具>%20%20ref>%20