用Vue.js在浏览器中实现裁剪图像功能


Posted in Javascript onJune 18, 2019

用Vue.js在浏览器中实现裁剪图像功能

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

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

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

我们将用名为 Cropper.js 【 https://fengyuanchen.github.io/cropperjs/ 】的库完成繁重的工作。

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

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

【 https://fengyuanchen.github.io/cropperjs/ 】。

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

vue create cropper-project

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

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

npm install cropperjs --save

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

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

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

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
     <title>image-cropping</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but image-cropping doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

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

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

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

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

<template>
   <div>
     <div class="img-container">
       <img ref="image" :src="src" crossorigin>
     </div>
     <img :src="destination" class="img-preview">
   </div>
 </template>

<script>
  import Cropper from "cropperjs";
  export default {
    name: "ImageCropper",
    data() {
      return {
        cropper: {},
        destination: {},
        image: {}
      }
    },
    props: {
      src: String
    },
    mounted() { }
  }
</script>

<style scoped>
  .img-container {
    width: 640px;
    height: 480px;
    float: left;
  }
  .img-preview {
    width: 200px;
    height: 200px;
    float: left;
    margin-left: 10px;
  }
</style>

对于这个例子, <style> 标签的信息并不重要,它只是清理了页面,并没有从库中获得任何实际效果。

记下 <template> 块中出现的 src 和 destination 变量。这些变量表示用户通过 props 对象定义的源图像,以及已经被操作的目标图像。我们将能够通过 ref 变量直接访问源图像,这类似于在 DOM 对象上使用 querySelector 。

虽然我们已经为裁剪图像做好了准备,但实际上并没有对它们做任何事情。我们将在 mounted 方法中配置 cropping 处理和事件,该方法将在视图初始化后触发。

mounted 方法看起来像这样:

mounted() {
   this.image = this.$refs.image;
   this.cropper = new Cropper(this.image, {
     zoomable: false,
     scalable: false,
     aspectRatio: 1,
     crop: () => {
       const canvas = this.cropper.getCroppedCanvas();
       this.destination = canvas.toDataURL("image/png");
    }
  });
}

调用该方法时,我们获得了对 <template> 块中的图像的引用。然后在初始化裁剪工具时使用图像,同时定义一些配置,这些配置并不是强制性的。

crop 方法是发生奇迹的地方。每当我们处理图像时,都会调用这个 crop 方法。当执行 crop 方法时,我们应该能够获取裁剪、缩放等信息,并从中创建新图像 —— 即目标图像。

这时我们已经创建了组件但尚未使用它。

打开项目的 src/App.vue 文件并包含以下内容:

<template>
   <div id="app">
     <ImageCropper src="/logo.png" />
  </div>
 </template>
 <script>
   import ImageCropper from "./components/ImageCropper.vue"
   export default {
    name: "app",
    components: {
      ImageCropper
    }
  }
</script>
<style></style>

请注意,我们已经导入了 ImageCropper 组件,并在 <template> 块中使用它。请记住, src 属性是 JavaScript 中的 props 之一。在我的示例中,有一个 public/logo.png 文件,你可以根据需要随意修改它。在真实的场景中,你会使用用户将要上传的图像。

如果你想了解如何上传文件(如裁剪图像),可以查看我之前的教程“通过 Vue.js 将文件上传到远程Web服务”

【 https://www.thepolyglotdeveloper.com/2017/12/upload-files-remote-web-service-vuejs-web-application/ 】。

结论

本文讲解了如何使用 Vue.js Web 程序中的 Cropper.js 库来操作图像。如果你需要接受来自用户的图像,并将其用作个人资料或类似内容的一部分,这非常有用,因为你需要将这些图片调整为一致的大小,这样你的主题才不会被破坏。

使用图像裁剪库与使用原生 JavaScript 的方式没什么不同,但是有一些事情需要用 Vue.js 与 HTML 组件进行交互。

用Vue.js在浏览器中实现裁剪图像功能

以上所述是小编给大家介绍的用Vue.js在浏览器中裁剪图像功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
html下载本地
Jun 19 Javascript
js 文件引入实现代码
Apr 23 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
Vue.js用法详解
Nov 13 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
8个JS的reduce使用实例和reduce操作方式
Oct 05 Javascript
JS删除String里某个字符的方法
Jan 06 #Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 #Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 #Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 #Javascript
js/jQuery实现全选效果
Jun 17 #jQuery
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 #Javascript
通过说明与示例了解js五种设计模式
Jun 17 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue中template的三种写法示例
2020/10/21 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python函数学习笔记
2008/10/07 Python
python 实现插入排序算法
2012/06/05 Python
Python中多线程及程序锁浅析
2015/01/21 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python基于template实现字符串替换
2020/11/27 Python
ASP.NET Core中的配置详解
2021/02/05 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
房产授权委托书范本
2014/09/22 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
老人节主持词
2015/07/04 职场文书
Java 死锁解决方案
2022/05/11 Java/Android