웹 프론트엔드 JS 튜토리얼 이미지 자르기 및 업로드 기능 구현

이미지 자르기 및 업로드 기능 구현

Mar 17, 2018 pm 01:14 PM
업로드 기능 성취하다

이번에는 이미지 자르기 및 업로드 기능 구현에 대해 알려드리겠습니다. 이미지 자르기 및 업로드 기능 구현 시 Notes란 무엇인가요? 실제 사례를 살펴보겠습니다.

몇일 전 아바타 자르기 및 업로드 기능이 필요한 vue 프로젝트에 대한 작업을 진행했는데, 이 기능을 완성하기 위해 기사를 읽고 이를 기반으로 수정했습니다. 원문 : http://www.jb51.net/article/135719.htm

먼저 크롭퍼 js를 다운받아 소개해주세요,

npm install cropper js --save
로그인 후 복사

필수 페이지에 소개해주세요 : import Cropper from "cropper js"

html 코드는 다음과 같습니다

<template> 
 <p id="demo"> 
 <!-- 遮罩层 --> 
 <p class="container" v-show="panel"> 
 <p> 
  <img id="image" :src="url" alt="Picture"> 
 </p> 
 <button type="button" id="button" @click="commit">确定</button> 
 <button type="button"id="cancel" @click="cancel">取消</button> 
 </p> 
 <p style="padding:20px;"> 
 <p class="show"> 
  <p class="picture" :style="'backgroundImage:url('+headerImage+')'"> 
  </p> 
 </p> 
 <p style="margin-top:20px;text-align: left;"> 
  <input type="file" id="change" accept="image" @change="change"> 
  <label for="change"></label> 
 </p> 
 </p> 
 </p> 
</template>
로그인 후 복사

주로 js 코드는 아래와 같이

1 데이터에 초기 변수를 설정하고 데이터를 바인딩합니다. imgCropperData는 이미지 형식을 결정하기 위해 정의한 것입니다.

data() { 
 return { 
 headerImage: "", 
 picValue: "", 
 cropper: "", 
 croppable: false, 
 panel: false, 
 url: "", 
 imgCropperData: { 
 accept: "image/gif, image/jpeg, image/png, image/jpg" 
 } 
 }; 
 }
로그인 후 복사

2. 마운트된

mounted() { 
 //初始化这个裁剪框 
 var self = this; 
 var image = document.getElementById("image"); 
 this.cropper = new Cropper(image, { 
 aspectRatio: 1, 
 viewMode: 1, 
 background: false, 
 zoomable: false, 
 ready: function() { 
 self.croppable = true; 
 } 
 }); 
 }
로그인 후 복사

3에서 처음으로 자르기 프레임을 변경합니다. URL 경로 생성, 입력 상자 변경 이벤트, 캔버스 그리기, 업로드 제출 확인 등 다양한 방법이 있습니다. 업로드된 파일의 종류와 크기를 판단할 수 있는 취소 이벤트 기능도 추가했습니다.

methods: { 
 //取消上传 
 cancel() { 
 this.panel = false; 
 var obj = document.getElementById('change') ; 
 obj.outerHTML=obj.outerHTML; 
 }, 
 //创建url路径 
 getObjectURL(file) { 
 var url = null; 
 if (window.createObjectURL != undefined) { 
 // basic 
 url = window.createObjectURL(file); 
 } else if (window.URL != undefined) { 
 // mozilla(firefox) 
 url = window.URL.createObjectURL(file); 
 } else if (window.webkitURL != undefined) { 
 // webkit or chrome 
 url = window.webkitURL.createObjectURL(file); 
 } 
 return url; 
 }, 
 //input框change事件,获取到上传的文件 
 change(e) { 
 let files = e.target.files || e.dataTransfer.files; 
 if (!files.length) return; 
 let type = files[0].type; //文件的类型,判断是否是图片 
 let size = files[0].size; //文件的大小,判断图片的大小 
 if (this.imgCropperData.accept.indexOf(type) == -1) { 
 alert("请选择我们支持的图片格式!"); 
 return false; 
 } 
 if (size > 5242880) { 
 alert("请选择5M以内的图片!"); 
 return false; 
 } 
 this.picValue = files[0]; 
 this.url = this.getObjectURL(this.picValue); 
 //每次替换图片要重新得到新的url 
 if (this.cropper) { 
 this.cropper.replace(this.url); 
 } 
 this.panel = true; 
 }, 
 //确定提交 
 commit() { 
 this.panel = false; 
 var croppedCanvas; 
 var roundedCanvas; 
 if (!this.croppable) { 
 return; 
 } 
 // Crop 
 croppedCanvas = this.cropper.getCroppedCanvas(); 
 // Round 
 roundedCanvas = this.getRoundedCanvas(croppedCanvas); 
 this.headerImage = roundedCanvas.toDataURL(); 
 //上传图片 
 this.postImg(); 
 }, 
 //canvas画图 
 getRoundedCanvas(sourceCanvas) { 
 var canvas = document.createElement("canvas"); 
 var context = canvas.getContext("2d"); 
 var width = sourceCanvas.width; 
 var height = sourceCanvas.height; 
 canvas.width = width; 
 canvas.height = height; 
 context.imageSmoothingEnabled = true; 
 context.drawImage(sourceCanvas, 0, 0, width, height); 
 context.globalCompositeOperation = "destination-in"; 
 context.beginPath(); 
 context.arc( 
 width / 2, 
 height / 2, 
 Math.min(width, height) / 2, 
 0, 
 2 * Math.PI, 
 true 
 ); 
 context.fill(); 
 return canvas; 
 }, 
 //提交上传函数 
 postImg() { 
 alert("上传成功"); 
 //这边写图片的上传 
 } 
 }
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 웹 측에서 백포스 새로 고침을 구현하는 방법

React BootStrap 프레임워크를 사용하는 방법

react 네이티브는 가져오기를 사용하여 이미지를 업로드합니다

압축하는 방법 webpack으로 패키징된 파일이 작아집니다

위 내용은 이미지 자르기 및 업로드 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vivox100s와 x100의 차이점: 성능 비교 및 ​​기능 분석 vivox100s와 x100의 차이점: 성능 비교 및 ​​기능 분석 Mar 23, 2024 pm 10:27 PM

vivox100s와 x100의 차이점: 성능 비교 및 ​​기능 분석

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Mar 24, 2024 am 11:27 AM

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까?

셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까? 셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까? Mar 21, 2024 pm 08:21 PM

셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까?

Kugou에 자신의 음악을 업로드하는 간단한 단계 Kugou에 자신의 음악을 업로드하는 간단한 단계 Mar 25, 2024 pm 10:56 PM

Kugou에 자신의 음악을 업로드하는 간단한 단계

PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현 PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현 Mar 09, 2024 am 08:21 AM

PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 Mar 24, 2024 pm 06:03 PM

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법

Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까? Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까? Mar 21, 2024 pm 04:16 PM

Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까?

PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법 PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법 Mar 20, 2024 pm 04:54 PM

PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법

See all articles