Vue.js를 사용하여 이미지 자르기 기능 구현
- 青灯夜游앞으로
- 2020-10-19 17:45:492675검색
사용자가 업로드한 이미지를 허용하는 웹 애플리케이션을 작성했지만 나중에 사용자가 웹 사이트 테마를 망치는 모든 모양과 크기의 이미지를 계속 제공한다는 사실을 깨달은 적이 있습니까? 물론 올바른 도구를 사용하지 않는 한 웹에서 이미지 작업은 쉽게 어려울 수 있습니다.
이 튜토리얼에서는 JavaScript 라이브러리를 사용하여 브라우저에서 이미지를 조작하고, 서버에 저장할 수 있도록 준비하고, 웹 프로그램에서 사용하는 방법을 살펴보겠습니다. 이를 위해 기본 JavaScript 대신 Vue.js를 사용하겠습니다.
이 기사가 무엇을 달성하려고 하는지 이해하려면 위 그림을 살펴보시기 바랍니다. 원본 이미지는 왼쪽에 있고 새 이미지 미리보기는 오른쪽에 있습니다. 자르기 상자를 이동하고 크기를 조정할 수 있으며 이에 따라 미리보기 이미지가 변경됩니다. 사용자는 필요에 따라 미리보기 이미지를 다운로드할 수 있습니다.
우리는 Cropper.js라는 라이브러리를 사용하여 무거운 작업을 수행할 것입니다.
이미지 자르기 종속성을 사용하여 새 Vue.js 프로젝트 만들기
첫 번째 단계는 새 프로젝트를 만들고 필요한 종속성을 설치하는 것입니다. Vue CLI를 설치하고 구성했다고 가정합니다.
명령줄에서 다음 명령을 실행하세요:
vue create cropper-project
메시지가 표시되면 기본 옵션을 선택하세요. 이것은 간단한 프로젝트이므로 라우팅이나 기타 사항에 대해 걱정하지 마십시오.
새 프로젝트로 이동하여 다음을 수행합니다.
npm install cropperjs --save
위 명령은 Cropper.js를 프로젝트에 설치합니다. CDN을 사용하는 것은 쉽지만 웹팩을 활용하는 프레임워크를 사용하고 있으므로 npm 경로가 가장 적합합니다.
의존성을 설치하는 동안 수행해야 할 작업이 한 가지 더 있습니다. 저는 npm을 사용하고 있기 때문에 CSS 정보는 포함하지 않고 JavaScript 정보만 포함합니다. CSS 정보를 로컬로 포함하거나 CDN을 통해 포함해야 합니다. 이 문서에서는 CDN을 사용합니다.
프로젝트의 public/index.html을 열고 다음 HTML 태그를 포함합니다. public/index.html 并包含以下 HTML 标记：
<!DOCTYPE html>
<html>
<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>请注意，在 93f0f5c25f18dab9d176bd4f6de5d30e 标记中，我们包含了 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>对于这个例子，c9ccee2e6ea535a969eb3f532ad9fe89 标签的信息并不重要，它只是清理了页面，并没有从库中获得任何实际效果。
记下 d477f9ce7bf77f53fbcf36bec1b69b7a 块中出现的 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");
}
});
}调用该方法时，我们获得了对 d477f9ce7bf77f53fbcf36bec1b69b7a 块中的图像的引用。然后在初始化裁剪工具时使用图像，同时定义一些配置，这些配置并不是强制性的。
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 组件，并在 d477f9ce7bf77f53fbcf36bec1b69b7a 块中使用它。请记住，src 属性是 JavaScript 中的 props 之一。在我的示例中，有一个 public/logo.pngrrreee
93f0f5c25f18dab9d176bd4f6de5d30e 태그에 자르기 도구가 포함되어 있습니다. .min.css 파일. 다시 말하지만, 파일을 얻는 한 CSS 정보를 어떻게 얻는지는 중요하지 않습니다. CSS 정보가 없으면 이미지에 멋진 자르기 상자가 표시되지 않습니다. 🎜Vue.js 프로젝트에서 JavaScript를 사용하여 이미지 자르기 🎜🎜이제 프로젝트가 거의 구성되었으며 웹에서 이미지를 자를 준비가 되었습니다. 프로젝트를 깔끔하게 유지하기 위해 모든 이미지 처리를 처리하는 새로운 Vue.js 구성 요소를 만듭니다. 🎜🎜프로젝트에 src/comComponents/ImageCropper.vue 파일을 생성하고 다음 상용구 코드를 포함합니다. 🎜rrreee🎜이 예에서는 c9ccee2e6ea535a969eb3f532ad9fe89에 대한 정보 > 태그는 중요하지 않습니다. 페이지를 정리할 뿐 라이브러리에서 실제 효과를 얻지 못합니다. 🎜🎜 d477f9ce7bf77f53fbcf36bec1b69b7a 블록에 나타나는 src 및 destination 변수에 유의하세요. 이 변수들은 사용자가 props 객체를 통해 정의한 소스 이미지와 조작된 대상 이미지를 나타냅니다. DOM 개체에서 querySelector를 사용하는 것과 유사하게 ref 변수를 통해 소스 이미지에 직접 액세스할 수 있습니다. 🎜🎜자르기 위한 이미지를 준비하는 동안 실제로는 아무 작업도 수행하지 않았습니다. 뷰가 초기화된 후 트리거되는 mounted 메서드에서 자르기 처리 및 이벤트를 구성합니다. 🎜🎜mounted 메소드는 다음과 같습니다: 🎜rrreee🎜 이 메소드를 호출하면 d477f9ce7bf77f53fbcf36bec1b69b7a 블록 내부의 이미지에 대한 참조를 얻습니다. 그런 다음 자르기 도구를 초기화할 때 이미지를 사용하고 필수가 아닌 일부 구성을 정의합니다. 🎜🎜crop 방법을 사용하면 마법이 일어납니다. 이 crop 메소드는 이미지를 처리할 때마다 호출됩니다. crop 메소드가 실행되면 자르기, 크기 조정 등의 정보를 가져와서 여기에서 새 이미지, 즉 대상 이미지를 생성할 수 있어야 합니다. 🎜🎜이 시점에서 구성 요소를 만들었지만 아직 사용하지는 않았습니다. 🎜🎜프로젝트의 src/App.vue 파일을 열고 다음 콘텐츠를 포함합니다. 🎜rrreee🎜ImageCropper 구성 요소를 가져와 src 속성은 JavaScript의 props 중 하나라는 점을 기억하세요. 내 예에는 public/logo.png 파일이 있으므로 필요에 따라 자유롭게 수정하세요. 실제 시나리오에서는 사용자가 업로드하는 이미지를 사용합니다. 🎜
파일 업로드 방법(예: 이미지 자르기)을 배우려면 이전 튜토리얼 "Vue.js를 사용하여 원격 웹 서버에 파일 업로드"을 확인하세요.
결론
이 글에서는 Vue.js 웹 프로그램에서 Cropper.js 라이브러리를 사용하여 이미지를 조작하는 방법을 설명합니다. 테마가 손상되지 않도록 해당 이미지의 크기를 일관된 크기로 조정해야 하기 때문에 사용자로부터 이미지를 수락하고 프로필의 일부로 사용해야 하는 경우 유용합니다.
이미지 자르기 라이브러리를 사용하는 것은 기본 JavaScript를 사용하는 것과 다르지 않지만 Vue.js를 사용하여 HTML 구성 요소와 상호 작용하려면 몇 가지 사항이 필요합니다.
영어 원본 주소: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
관련 추천:
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 Vue.js를 사용하여 이미지 자르기 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!