用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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php读取msn上的用户信息类
2008/12/05 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
Python三元运算实现方法
2015/01/12 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python登录注册验证功能实现
2018/06/18 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
selenium+python环境配置教程详解
2019/05/28 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
社团活动策划书范文
2014/01/09 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
决心书格式范文
2015/09/23 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android