网站建设资讯

NEWS

网站建设资讯

怎么用Vue.js在浏览器中实现裁剪图像功能-创新互联

这篇文章将为大家详细讲解有关怎么用Vue.js在浏览器中实现裁剪图像功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是一家集网站建设,定陶企业网站建设,定陶品牌网站建设,网站定制,定陶网站建设报价,网络营销,网络优化,定陶网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

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

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

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

vue create cropper-project

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

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

npm install cropperjs --save

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

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

打开项目的 public/index.html 并包含以下 HTML 标记:


 
   
     
     
     
     favicon.ico" rel="external nofollow" >
     image-cropping
     
  
  
    
    
       

请注意,在 标记中,我们包含了 cropper.min.css 文件。同样,只要你得到这个文件,如何获得CSS信息并不重要。如果没有 CSS 信息,我们的图像就不会有花哨的裁剪框。

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

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

在项目中创建 src/components/ImageCropper.vue 文件,并包含以下样板代码:






  .img-container {
    width: 640px;
    height: 480px;
    float: left;
  }
  .img-preview {
    width: 200px;
    height: 200px;
    float: left;
    margin-left: 10px;
  }

对于这个例子,

请注意,我们已经导入了 ImageCropper 组件,并在