用Vue.js在浏览器中裁剪图像

时间: 2019-06-19阅读: 538标签: 浏览器

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

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


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

我们将使用名为 Cropper.js 的库完成繁重的工作。


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

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

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

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">
        <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://blog.logrocket.com/cropping-images-in-the-browser-with-vue-js/  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3778

关闭

js监听浏览器后退事件

如果在浏览器执行了回退操作,则会触发页面弹出“不可回退”弹框,当然这里可以进行你所需要的不同的处理; 代码如下:

如何编写同时用于 Node 和浏览器的 JavaScript 包

我多次看到大家在这个问题上产生困惑,甚至经验丰富的 JavaScript 开发者都可能错过它的一些微妙之处。所以我认为应该写这么一个简短的教程。假设有一个 JavaScript 模块想发布在 npm 中,它既能在 Node 中运行,又能在浏览器中运行

「译」无处不在的微浏览器

你已经在各个地方见到了它 —— Tweet 里提及到的网站的小型缩略预览图,Slack 频道或者 Whatsapp 群聊里详细的网站描述。这些链接的预览图对大多数人来说司空见惯,因此我们很少留意网站设计对生成的预览的影响。然而

IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

IE6不支持min-height,解决办法使用css hack,ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:

js禁止浏览器保存用户密码

在HTML中,除了要用的密码框以外,额外添加一个密码框,设置为隐藏,注意:添加的用来干扰的密码框,必须在有用的密码框的上面,上面任何地方都行,就是不要在下面。

浏览器工作原理学习笔记

DOM:渲染引擎解析 HTML 文档,构建 DOM Tree,Computed Style:解析对应的 CSS 样式信息,生成 document.styleSheets,计算 DOM 样式,布局(reflow/layout):计算布局信息,生成布局树 LayoutTree

解决v-lazy-image在qq浏览器x5内核下无效

在安卓qq浏览器中,v-lazy-image始终无法显示。经调试,发现qq浏览器中IntersectionObserver缺少一个isIntersecting字段,而v-lazy-image插件是根据isIntersecting来显示图片的

火狐浏览器 访问所有HTTPS网站显示连接不安全解决办法

当 Firefox 连接到一个安全的网站时(网址最开始为“https://”),它必须确认该网站出具的证书有效且使用足够高的加密强度。如果证书无法通过验证,或加密强度过低,Firefox 会中止连接到这个网站,并显示“连接不安全”的错误信息页面。

浏览器执行js原理

是不是大都数前端开发者都会有这样的疑惑,确实,我自己在开发的过程中每次碰到promise,setTimeout,requestAnimationFrame都会去想,在这个执行的过程中到底发生了什么?

浏览器禁用了javascript,各种浏览器如何开启javascript的方法总汇

您的浏览器禁用了JS脚本运行,请启用该功能。怎么解除浏览器禁用js?这篇文章将总结整理各个浏览器如何开启、禁用javascript的方法总汇。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广