vue中使用cropperjs的方法


Posted in Javascript onMarch 01, 2018

用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>

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中使用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中使用cropperjs的方法

把以上这些代码放入你的项目,或者单独建个.vue放进项目,就可以实现这样的效果:

vue中使用cropperjs的方法

总结

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

Javascript 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
jQuery实现简单全选框
Sep 13 jQuery
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 #Javascript
Vuex中mutations与actions的区别详解
Mar 01 #Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 #Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 #Javascript
详解Immutable及 React 中实践
Mar 01 #Javascript
解决VUEX兼容IE上的报错问题
Mar 01 #Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
python django事务transaction源码分析详解
2017/03/17 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
类的返射机制中的包及核心类
2016/09/12 面试题
2015年校医个人工作总结
2015/07/24 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript