vue中使用cropperjs的方法

更新时间：2018年03月01日 11:17:19 作者：小禾子_Jane

这篇文章给大家总结了在.vue文件里cropperjs的使用方法和经验教训，感兴趣的朋友跟随脚本之家小编学习吧

用vue的项目里需要对图片进行裁剪，于是使用了cropperjs，在使用的过程中也踩过一些坑，以下是在.vue文件里cropperjs的使用方法和经验教训总结：

在使用之前，先引入：

这里写图片描述

在项目里，运行：

npm install cropperjs -save

在template里：

<div id="demo"> 
  <!-- 遮罩层 --> 
  <div class="container" v-show="panel"> 
   <div> 
    <img id="image" :src="url" alt="Picture"> 
   </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>

这里写图片描述

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代码（比较长，本来想不贴上了，但是为了一下童鞋可以直接运行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放进项目，就可以实现这样的效果：

这里写图片描述

总结

以上所述是小编给大家介绍的vue中使用cropperjs的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

js如何编写简单的ajax方法库
这篇文章主要为大家详细介绍了js如何编写简单的ajax方法库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
JS中的回调函数(callback)讲解
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码,这篇文章主要介绍了JS中的回调函数（callback）,需要的朋友可以参考下
2022-12-12
微信小程序如何引入外部字体库iconfont的图标
这篇文章主要为大家详细介绍了微信小程序引入外部字体库iconfont图标的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
JavaScript数据结构与算法之队列原理与用法实例详解
这篇文章主要介绍了JavaScript数据结构与算法之队列原理与用法,较为详细的说明了队列的概念、原理,并结合实例形式分析了javascript实现与使用队列的相关操作技巧与注意事项,需要的朋友可以参考下
2017-11-11
JavaScript事件处理程序详解
这篇文章主要为大家详细介绍了JavaScript事件处理程序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
前端的框架TDesign小程序组件库体验
TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,下面这篇文章主要给大家介绍了关于前端的框架TDesign小程序组件库体验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-11-11
JavaScript前端实现页面白屏检测与解决
白屏通常指的是页面打开后,浏览器上面的地址栏已经显示完整的 URL,但是页面内容无法渲染,只有白色的空白页面,下面我们就来看看白屏出现的具体原因与解决方法吧
2025-03-03
JS实现仿百度输入框自动匹配功能的示例代码
本篇文章主要是对JS实现仿百度输入框自动匹配功能的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
微信小程序基于canvas渐变实现的彩虹效果示例
这篇文章主要介绍了微信小程序基于canvas渐变实现的彩虹效果,结合实例形式分析了微信小程序线性渐变及圆形渐变的相关实现技巧,需要的朋友可以参考下
2019-05-05
js实现上传图片并显示图片名称
这篇文章主要为大家详细介绍了js实现上传图片并显示图片名称，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12

vue中使用cropperjs的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具