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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
人族 TERRAN 概述
2020/03/14 星际争霸
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python编程求质数实例代码
2018/01/31 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
中学生操行评语大全
2014/04/24 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
人事任命书范文
2014/06/04 职场文书
村创先争优活动总结
2014/08/28 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
总经理检讨书范文
2015/02/16 职场文书