用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 相关文章推荐
Javascript基础教程之switch语句
Jan 18 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
详解jenkins自动化部署vue
May 14 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
js实现翻牌小游戏
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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php 生成饼图 三维饼图
2009/09/28 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php获取远程文件大小
2015/10/20 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python中的并发编程实例
2014/07/07 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
运动会通讯稿300字
2014/02/02 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
团代会宣传工作方案
2014/05/08 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
会议开幕词
2015/01/28 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
法律意见书范文
2015/06/04 职场文书
债务追讨律师函
2015/06/24 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery