vue中使用cropperjs的方法

2024-05-06 16:42:44

字體：大中小

來源：轉載

供稿：網友

用vue的項目里需要對圖片進行裁剪，于是使用了cropperjs，在使用的過程中也踩過一些坑，以下是在.vue文件里cropperjs的使用方法和經驗教訓總結：

在使用之前，先引入：

vue使用cropper.js,vue,cropperjs

在項目里，運行：

npm install cropperjs -save

在template里：

<div id="demo">   <!-- 遮罩層 -->   <div class="container" v-show="panel">    <div>     <img id="image" :src="url"   </div>   <button type="button" id="button" @click="crop">確定</button>  </div>   <div style="padding:20px;">     <div class="show">      <div class="picture" :style="'backgroundImage:url('+headerImage+')'">      </div>     </div>    <div style="margin-top:20px;">      <input type="file" id="change" accept="image" @change="change">      <label for="change"></label>     </div>   </div>  </div>

vue使用cropper.js,vue,cropperjs

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 () {    //這邊寫圖片的上傳   }  } }

整體效果：

vue使用cropper.js,vue,cropperjs

css代碼（比較長，本來想不貼上了，但是為了一下童鞋可以直接運行demo，還是貼上了，篇幅過長，望見諒）：

*{  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 <= -height) */  display: block;  min-width: 0 !important;  max-width: none !important;  min-height: 0 !important;  max-height: none !important;  width: 100%;  height: 100%;  image-orientation: 0deg }.cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0; }.cropper-wrap-box {  overflow: hidden; }.cropper-drag-box {  opacity: 0;  background-color: #fff; }.cropper-modal {  opacity: .5;  background-color: #000; }.cropper-view-box {  display: block;  overflow: hidden; width: 100%;  height: 100%; outline: 1px solid #39f;  outline-color: rgba(51, 153, 255, 0.75); } .cropper-dashed {  position: absolute; display: block; opacity: .5;  border: 0 dashed #eee }.cropper-dashed.dashed-h {  top: 33.33333%;  left: 0;  width: 100%;  height: 33.33333%;  border-top-width: 1px;  border-bottom-width: 1px }.cropper-dashed.dashed-v {  top: 0;  left: 33.33333%;  width: 33.33333%;  height: 100%;  border-right-width: 1px;  border-left-width: 1px }.cropper-center {  position: absolute;  top: 50%;  left: 50%; display: block; width: 0;  height: 0; opacity: .75 }.cropper-center:before,  .cropper-center:after {  position: absolute;  display: block;  content: ' ';  background-color: #eee }.cropper-center:before {  top: 0;  left: -3px;  width: 7px;  height: 1px }.cropper-center:after {  top: -3px;  left: 0;  width: 1px;  height: 7px }.cropper-face, .cropper-line, .cropper-point {  position: absolute; display: block; width: 100%;  height: 100%; opacity: .1; }.cropper-face {  top: 0;  left: 0; background-color: #fff; }.cropper-line {  background-color: #39f }.cropper-line.line-e {  top: 0;  right: -3px;  width: 5px;  cursor: e-resize }.cropper-line.line-n {  top: -3px;  left: 0;  height: 5px;  cursor: n-resize }.cropper-line.line-w {  top: 0;  left: -3px;  width: 5px;  cursor: w-resize }.cropper-line.line-s {  bottom: -3px;  left: 0;  height: 5px;  cursor: s-resize }.cropper-point {  width: 5px;  height: 5px;  opacity: .75;  background-color: #39f }.cropper-point.point-e {  top: 50%;  right: -3px;  margin-top: -3px;  cursor: e-resize }.cropper-point.point-n {  top: -3px;  left: 50%;  margin-left: -3px;  cursor: n-resize }.cropper-point.point-w {  top: 50%;  left: -3px;  margin-top: -3px;  cursor: w-resize }.cropper-point.point-s {  bottom: -3px;  left: 50%;  margin-left: -3px;  cursor: s-resize }.cropper-point.point-ne {  top: -3px;  right: -3px;  cursor: ne-resize }.cropper-point.point-nw {  top: -3px;  left: -3px;  cursor: nw-resize }.cropper-point.point-sw {  bottom: -3px;  left: -3px;  cursor: sw-resize }.cropper-point.point-se {  right: -3px;  bottom: -3px;  width: 20px;  height: 20px;  cursor: se-resize;  opacity: 1 }@media (min-width: 768px) { .cropper-point.point-se {   width: 15px;   height: 15px  } }@media (min-width: 992px) { .cropper-point.point-se {   width: 10px;   height: 10px  } }@media (min-width: 1200px) { .cropper-point.point-se {   width: 5px;   height: 5px;   opacity: .75  } }.cropper-point.point-se:before {  position: absolute;  right: -50%;  bottom: -50%;  display: block;  width: 200%;  height: 200%;  content: ' ';  opacity: 0;  background-color: #39f }.cropper-invisible {  opacity: 0; }.cropper-bg {  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); }.cropper-hide {  position: absolute; display: block; width: 0;  height: 0; }.cropper-hidden {  display: none !important; }.cropper-move {  cursor: move; }.cropper-crop {  cursor: crosshair; }.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {  cursor: not-allowed; }

整體圖：

vue使用cropper.js,vue,cropperjs