vue移动端裁剪图片结合插件Cropper的使用实例代码


Posted in Javascript onJuly 10, 2017

之前写了一个上传头像的功能模块,以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。

当然,使用就安装 npm install cropperjs

接着再引入 import Cropper from 'cropperjs'

下面是源码

<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> 
</template> 
 
<script> 
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 () { 
  //这边写图片的上传 
 } 
 } 
} 
</script> 
 
<style> 
*{ 
 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; 
} 
 
 
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript学习笔记记录我的旅程
May 23 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 #Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 #Javascript
vue实现表格数据的增删改查
Jul 10 #Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 #Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 #Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
Underscore之Array_动力节点Java学院整理
Jul 10 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
我的论坛源代码(九)
2006/10/09 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
服务器web工具 php环境下
2010/12/29 PHP
php实现图片添加水印功能
2014/02/13 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
python处理excel绘制雷达图
2019/10/18 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
英国网上超市:Ocado
2020/03/05 全球购物
MySQL数据管理操作示例讲解
2022/12/24 MySQL