집 > 기사 > 웹 프론트엔드 > 자르기 도구의 vue를 통해 js의 이미지 자르기 및 업로드 기능을 구현하는 방법

자르기 도구의 vue를 통해 js의 이미지 자르기 및 업로드 기능을 구현하는 방법

亚连원래의: 2018-06-02 11:21:162036검색

이 글은 주로 Vue 기반의 크롭퍼 JS의 이미지 크롭 및 업로드 기능에 대한 관련 정보를 소개하고 있으니 필요하신 분들은 참고하시면 됩니다

저는 며칠 전에 아바타 크롭 및 업로드가 필요한 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="&#39;backgroundImage:url(&#39;+headerImage+&#39;)&#39;"> 
  </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(&#39;change&#39;) ; 
 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("上传成功"); 
 //这边写图片的上传 
 } 
 }

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

자르기 도구의 vue를 통해 js의 이미지 자르기 및 업로드 기능을 구현하는 방법

관련 기사