vue에서 Cropperjs 사용하기

이번에는 Vue에서 Cropperjs를 사용하는 방법과 Vue에서 Cropperjs를 사용할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

Vue를 사용하여 프로젝트에서 이미지를 잘라야 하기 때문에 Cropperjs를 사용하면서 몇 가지 함정에 직면했습니다. 다음은 .vue 파일에서 Cropperjs에 대해 배운 사용법과 교훈을 요약한 것입니다. 을 사용하여 먼저 다음을 소개합니다.

프로젝트에서 다음을 실행합니다.

npm install cropperjs -save

템플릿에서:

<p> 
  <!-- 遮罩层 --> 
  </p><p> 
   </p><p> 
    <img  alt="vue에서 Cropperjs 사용하기" > 
   </p>
   <button>确定</button>
   
  <p> 
    </p><p> 
     </p><p> 
     </p> 
    
    <p> 
     <input> 
     <label></label> 
    </p> 
   
 

js 코드:

import Cropper from 'cropperjs' 
export default { 
 components: { 
 }, 
 data () { 
  return { 
   headerImage:'', 
   picValue:'', 
   cropper:'', 
   croppable:false, 
   panel:false, 
   url:'' 
  } 
 }, 
 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; 
   } 
  }); 
 }, 
 methods: { 
  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 ; 
  }, 
  change (e) { 
   let files = e.target.files || e.dataTransfer.files; 
   if (!files.length) return; 
   this.panel = true; 
   this.picValue = files[0]; 
   this.url = this.getObjectURL(this.picValue); 
   //每次替换图片要重新得到新的url 
   if(this.cropper){ 
    this.cropper.replace(this.url); 
   } 
   this.panel = true; 
  }, 
  crop () { 
    this.panel = false; 
    var croppedCanvas; 
    var roundedCanvas; 
    if (!this.croppable) { 
     return; 
    } 
    // Crop 
    croppedCanvas = this.cropper.getCroppedCanvas(); 
    console.log(this.cropper) 
    // Round 
    roundedCanvas = this.getRoundedCanvas(croppedCanvas); 
    this.headerImage = roundedCanvas.toDataURL(); 
    this.postImg() 
  }, 
  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 () { 
   //这边写图片的上传 
  } 
 } 
}

전체 효과:

css 코드 (꽤 길어서 원래 올리려던게 아니었는데, 아이들이 데모를 직접 실행하기 쉽도록 하고 싶어서 올리게 되었습니다. 길어지는 점 양해 부탁드립니다) :

*{ 
 margin: 0; 
 padding: 0; 
} 
#demo #button { 
 position: absolute; 
 right: 10px; 
 top: 10px; 
 width: 80px; 
 height: 40px; 
 border:none; 
 border-radius: 5px; 
 background:white; 
} 
#demo .show { 
 width: 100px; 
 height: 100px; 
 overflow: hidden; 
 position: relative; 
 border-radius: 50%; 
 border: 1px solid #d5d5d5; 
} 
#demo .picture { 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
 background-position: center center; 
 background-repeat: no-repeat; 
 background-size: cover;  
} 
#demo .container { 
  z-index: 99; 
  position: fixed; 
  padding-top: 60px; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  background:rgba(0,0,0,1); 
}
#demo #image { 
 max-width: 100%; 
}
.cropper-view-box,.cropper-face { 
 border-radius: 50%; 
} 
/*! 
 * Cropper.js v1.0.0-rc 
 * https://github.com/fengyuanchen/cropperjs 
 * 
 * Copyright (c) 2017 Fengyuan Chen 
 * Released under the MIT license 
 * 
 * Date: 2017-03-25T12:02:21.062Z 
 */
.cropper-container { 
 font-size: 0; 
 line-height: 0;
 position: relative;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 direction: ltr; 
 -ms-touch-action: none; 
 touch-action: none
} 
.cropper-container img { 
 /* Avoid margin top issue (Occur only when margin-top <p style="text-align: left;"></p> <p style="text-align: left;"></p><p style="text-align: left;"><span style="color: #ff0000"></span>이 기사를 읽고 나면 문제를 마스터하신 것 같습니다. 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요! </p><p>추천 자료: </p><p></p>WeChat 웹 측에서 백포스 새로 고침을 구현하는 방법<p><a href="http://www.php.cn/js-tutorial-388955.html" target="_blank"></a></p>js를 사용하여 html 페이지에서 이미지 주소를 빠르게 가져옵니다.<p><a href="http://www.php.cn/js-tutorial-388951.html" target="_blank"></a><br></p>쿠키 만료를 설정하여 자동으로 업데이트하고 자동으로 가져옵니다. <p><a href="http://www.php.cn/js-tutorial-388941.html" target="_blank"></a></p>

위 내용은 vue에서 Cropperjs 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!