记下 <template>
块中出现的 src
和 destination
变量。这些变量表示用户通过 props
对象定义的源图像,以及已经被操作的目标图像。我们将能够通过 ref
变量直接访问源图像,这类似于在 DOM 对象上使用 querySelector
。
虽然我们已经为裁剪图像做好了准备,但实际上并没有对它们做任何事情。我们将在 mounted
方法中配置 cropping 处理和事件,该方法将在视图初始化后触发。
mounted
方法看起来像这样:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
调用该方法时,我们获得了对 <template>
块中的图像的引用。然后在初始化裁剪工具时使用图像,同时定义一些配置,这些配置并不是强制性的。
crop
方法是发生奇迹的地方。每当我们处理图像时,都会调用这个 crop
方法。当执行 crop
方法时,我们应该能够获取裁剪、缩放等信息,并从中创建新图像 ―― 即目标图像。
这时我们已经创建了组件但尚未使用它。
打开项目的 src/App.vue
文件并包含以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
请注意,我们已经导入了 ImageCropper
组件,并在 <template>
块中使用它。请记住,src
属性是 JavaScript 中的 props
之一。在我的示例中,有一个 public/logo.png
文件,你可以根据需要随意修改它。在真实的场景中,你会使用用户将要上传的图像。
如果你想了解如何上传文件(如裁剪图像),可以查看我之前的教程“使用 Vue.js 将文件上传到远程 Web 服务器”。
结论
本文讲解了如何使用 Vue.js Web 程序中的 Cropper.js 库来操作图像。如果你需要接受来自用户的图像,并将其用作个人资料或类似内容的一部分,这非常有用,因为你需要将这些图片调整为一致的大小,这样你的主题才不会被破坏。
使用图像裁剪库与使用原生 JavaScript 的方式没什么不同,但是有一些事情需要用 Vue.js 与 HTML 组件进行交互。
英文原文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
相关推荐:
2020年前端vue面试题大汇总(附答案)
vue教程推荐:2020最新的5个vue.js视频教程精选
更多编程相关知识,请访问:编程入门!!
以上就是使用Vue.js实现图像裁剪功能的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《vue.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者