VUE3 시작하기 예: 간단한 이미지 자르기 도구 만들기

Vue.js는 인기 있는 JavaScript 프런트 엔드 프레임워크입니다. 최신 버전인 Vue3이 출시되어 성능, 크기 및 개발 환경이 향상되었으며 점점 더 많은 개발자의 환영을 받고 있습니다. 이 기사에서는 Vue3를 사용하여 간단한 이미지 자르기 도구를 만드는 방법을 소개합니다.

먼저 Vue 프로젝트를 생성하고 필요한 플러그인을 설치해야 합니다. Vue CLI를 사용하여 프로젝트를 생성하거나 수동으로 빌드할 수 있습니다. 여기서는 Vue CLI를 예로 들어 보겠습니다.

# 安装Vue CLI
npm install -g @vue/cli

# 创建Vue项目
vue create image-cropper

# 进入项目文件夹
cd image-cropper

# 安装所需插件
npm install vue-cropperjs --save
npm install cropperjs --save

Vue-Cropperjs는 이미지 자르기를 위한 플러그인이고, Cropperjs는 Vue-Cropperjs의 핵심 라이브러리이므로 함께 설치해야 합니다.

다음으로 Vue 프로젝트에 Vue-Cropperjs 플러그인을 도입해야 합니다. src/main.js 파일을 다음과 같이 수정합니다. src/main.js文件如下：

import Vue from 'vue'
import App from './App.vue'
import VueCropper from 'vue-cropperjs'

import 'cropperjs/dist/cropper.css'

Vue.use(VueCropper)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

上述代码中，我们引入了Vue-Cropperjs插件，并在Vue中调用Vue.use()方法进行注册。需要注意的是，这里我们还引入了Cropperjs的样式文件，以保证图片裁剪器的正常运行。

接下来，我们需要在Vue中创建一个图片裁剪器组件。在src/views目录下新建CropImage.vue文件，添加以下代码：

<template>
  <div>
    <div ref="wrapper">
      <img ref="img" :src="src" style="max-width: 100%;" />
    </div>
    <div>
      <input type="file" @change="onUpload" />
    </div>
    <div>
      <vue-cropper ref="cropper" :src="src" :auto-crop-area="0.5" :guides="false" :view-mode="1" :drag-mode="dragMode" :crop-box-movable="false" :crop-box-resizable="false" :crop-box-border-radius="50"></vue-cropper>
    </div>
    <div>
      <button @click="onCrop">裁剪</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CropImage',
  data() {
    return {
      src: '',
      cropper: null,
      dragMode: 'move'
    }
  },
  methods: {
    onUpload(e) {
      const file = e.target.files[0]
      if (file.type.match(/image.*/)) {
        const reader = new FileReader()
        reader.onload = (event) => {
          this.src = event.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    onCrop() {
      const canvas = this.$refs.cropper.getCroppedCanvas({ width: 100, height: 100 })
      const dataUrl = canvas.toDataURL()
      console.log(dataUrl)
    }
  }
}
</script>

上述代码中，我们创建了一个名为CropImage的Vue组件，该组件包含了三个主要元素：

• 图片容器
• 图片上传按钮
• 图片裁剪器

通过img标签和一个div标签，我们创建了一个最初的图片容器。用户可以点击“上传”按钮选择一张图片进行裁剪。当用户选择图片后，我们使用FileReader将图片转换为base64编码，并将其赋值给src属性，以实现图片的预览。

图片裁剪器使用了Vue-Cropperjs插件中提供的vue-cropper标签，它支持多种属性来控制裁剪器的表现，例如：auto-crop-area控制自动裁剪的区域比例、guides控制是否显示裁剪框辅助线、view-mode控制裁剪器的模式等等。此外，我们还将裁剪框的移动模式设置为“移动”，确保用户能够更好地操作裁剪框。

裁剪按钮被绑定到了onCrop方法，该方法将图片裁剪后的base64编码输出到控制台，开发者可根据实际需求改写此方法。

最后我们需要在App.vue文件中引入CropImage.vue组件。修改src/App.vue文件如下：

<template>
  <div id="app">
    <CropImage />
  </div>
</template>

<script>
import CropImage from './views/CropImage.vue'

export default {
  name: 'App',
  components: {
    CropImage
  }
}
</script>

<style>
  #app {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
  }
</style>

上述代码中，我们将CropImage组件引入到App.vue文件中，并在组件标签中通过propsrrreee

위 코드에서는 Vue-Cropperjs 플러그인을 도입하고 Vue에서 Vue.use() 메서드를 호출하여 등록했습니다. 여기에서는 이미지 자르기 도구의 정상적인 작동을 보장하기 위해 Cropperjs의 스타일 파일도 소개한다는 점에 유의해야 합니다.

다음으로 Vue에서 이미지 자르기 구성 요소를 만들어야 합니다. src/views 디렉터리에 새 CropImage.vue 파일을 만들고 다음 코드를 추가합니다. 🎜rrreee🎜위 코드에서는 CropImage라는 파일을 만들었습니다. 세 가지 주요 요소를 포함하는 Vue 구성 요소: 🎜

• 이미지 컨테이너
• 이미지 업로드 버튼
• 이미지 자르기

🎜 img 태그와 div 태그를 사용하여 초기 이미지 컨테이너를 만듭니다. 사용자는 "업로드" 버튼을 클릭하여 잘라낼 이미지를 선택할 수 있습니다. 사용자가 이미지를 선택하면 FileReader를 사용하여 이미지를 base64 인코딩으로 변환하고 이를 src 속성에 할당하여 이미지를 미리 봅니다. 🎜🎜이미지 자르기 도구는 Vue-Cropperjs 플러그인에 제공되는 vue-cropper 태그를 사용합니다. 이 태그는 자르기 도구의 성능을 제어하기 위해 다음과 같은 여러 속성을 지원합니다. Areacode>는 자동 자르기 영역의 비율을 제어하고, guides는 자르기 프레임 보조선을 표시할지 여부를 제어하고, view-mode는 자르기 모드를 제어합니다. 등. 또한, 사용자가 자르기 상자를 더 잘 조작할 수 있도록 자르기 상자의 이동 모드를 "이동"으로 설정했습니다. 🎜🎜자르기 버튼은 잘린 이미지의 base64 인코딩을 콘솔에 출력하는 onCrop 메서드에 바인딩되어 있습니다. 개발자는 실제 필요에 따라 이 메서드를 다시 작성할 수 있습니다. 🎜🎜마지막으로 App.vue 파일에 CropImage.vue 구성 요소를 도입해야 합니다. src/App.vue 파일을 다음과 같이 수정합니다: 🎜rrreee🎜위 코드에서는 CropImage 구성 요소를 App.vue에 도입합니다. 파일을 구성요소 태그의 props를 통해 매개변수를 전달하여 이미지 자르기 도구를 초기화합니다. 🎜🎜이 시점에서 정상적으로 실행되고 크롭 작업을 수행할 수 있는 간단한 사진 크롭퍼의 제작이 완료되었습니다. 물론 이것은 단지 입문적인 예일 뿐입니다. 초보자는 코드를 수정하고 확장하여 Vue3의 사용 및 개발 기술을 더 깊이 이해할 수 있습니다. 🎜

위 내용은 VUE3 시작하기 예: 간단한 이미지 자르기 도구 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!