用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实现移动端图片裁剪上传功能
本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下 1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template> <div class="v-simple-cropper"> <slot> <button @click="upload">上传图片</button> </slot>
-
cropper js基于vue的图片裁剪上传功能的实现代码
前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下.原文:http://www.jb51.net/article/135719.htm 首先下载引入cropper js, npm install cropper js --save 在需要的页面引入:import Cropper from "cropper js" html的代码如下: <template> <div id="demo&quo
-
vue.js 实现图片本地预览 裁剪 压缩 上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &
-
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富. 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧. 第一步:准备开发环境 cropper.js是基于jquery的,所以要先安装jquery 执行命令: npm install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置,添加标红的一行 第二步:新建图片裁剪组件 ind
-
vue移动端裁剪图片结合插件Cropper的使用实例代码
之前写了一个上传头像的功能模块,以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用. 当然,使用就安装 npm install cropperjs 接着再引入 import Cropper from 'cropperjs' 下面是源码 <template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel">
-
Vue-cropper 图片裁剪的基本原理及思路讲解
一:裁剪的思路: 1-1,裁剪区域:需要进行裁剪首先需要形成裁剪区域,裁剪区域的大小和我们的鼠标移动的距离相关联,鼠标移动有多远,裁剪区域就有多大.如下图: 1-2 裁剪区域的宽和高的计算: 如上图,鼠标的横向移动距离和纵向移动距离就形成了裁剪区域的宽和高.那么裁剪区域的宽和高的计算是:当我们点下鼠标时,就能够通过event事件 对象获取鼠标点击位置,e.clientX 和 e.clientY; 当鼠标进行移动的时候,也能通过event获取鼠标的位置,通过两次鼠标位置的改变,就能够获得 鼠标移动
-
用Vue.js在浏览器中实现裁剪图像功能
你是否写了一个需要接受用户上传图片的 Web 应用,后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题?在网络上处理图像很容易成为一种痛苦 -- 当然,除非你使用了正确的工具. 在本教程中,我们将探讨如何在浏览器中使用 JavaScript 库来操作图片,为服务器上的存储做准备,并在 Web 程序中使用.我们将使用 Vue.js 而不是原生 JavaScript来完成此操作. 要了本文想要完成的任务,请查看上面的图片.左侧是原始图像,右侧是新图像预览.我们可以移动裁剪框并调整其大小,
-
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别. select单选实例: <select v-model="fruit"> <option selected valu
-
使用JS在浏览器中判断当前网络连接状态的几种方法
使用JS在浏览器中判断当前网络状态的几种方法如下: 1. navigator.onLine 2. ajax请求 3. 获取网络资源 4. bind() 1. navigator.onLine 通过navigator.onLine判断当前网络状态: if(navigator.onLine){ ... }else{ ... } 非常简单,但是并不准确-根据MDN的描述: navigator.onLine只会在机器未连接到局域网或路由器时返回false,其他情况下均返回true. 也就是说,机器连接上
-
JS在浏览器中解析Base64编码图像
上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝.下载而不用担心信息会缺失.这项技术也在email邮件中被广泛使用. 浏览器对Base64的支持 图像是最经常被使用的一种二进制文件.而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持.因此图形信息可以以下面的形式呈现在页面中. Java代码 <img src="data:im
-
vue.js element-ui validate中代码不执行问题解决方法
先说结论 在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到 因为要验证数字,参考了官网参考代码如下,发现有如下图bug,当输入为以数字开头包含字符串的内容时,验证不会报错,因为业务逻辑也不相符,随改写代码 <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm2.age"></el-
-
vue.js 获取select中的value实例
如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./vue.js"></script> </head> <
-
Vue.js在数组中插入重复数据的实现代码
1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index"的数组插入,数组不支持重复数据的插入 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type=&q
-
Vue.js 利用v-for中的index值实现隔行变色
首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果. 以下为完整代码,很简单,但也是个技巧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&
-
vue.js使用Element-ui中实现导航菜单
本文实例为大家分享了vue.js使用Element-ui中实现导航菜单的具体代码,供大家参考,具体内容如下 写这个的原因是因为当时写这个功能时候element只有效果,但是功能没有实现,当时一头雾水 先放图吧 大体实现思路我先讲一下不然下面代码片段会看懵, 圈出来的左右两部分,左边是element复制就可实现, 右边是跳转的子组件. 首先创建导航菜单的vue文件,但这个文件里面只是引入组件,里面使用Container布局容器实现左右两部分,左边el-aside标签中放入导航菜单的组件,右边el-
-
js在浏览器中的event loop事件队列示例详解
目录 前言 认识一个栈两个队列 执行过程 简单例子 难一点的例子 总结 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过程 js就是