全局安装    npm install cropperjs

如果想本项目安装,方便移植:   import Cropper from 'cropperjs'   --save    这样的话,本地 package.json  文件中 dependencies 就会引入  移植后npm install安装就会带入

接着再引入   import Cropper from 'cropperjs'

<template>
<div id="cropper">
<!-- 遮罩层 -->
<div class="container" v-show="panel">
<div><img id="image" :src="url"></div>
<button type="button" id="button" @click="crop">确定</button>
</div>
<!-- 遮罩层 --> <div>
<div class="show">
<div class="picture" :style="'backgroundImage:url('+headerImage+')'">
</div>
</div>
<div>
<input type="file" accept="image" @change="change">
</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: ,
viewMode: ,
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[]; 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, , , width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / , height / , Math.min(width, height) / , , * Math.PI, true);
context.fill(); return canvas;
},
postImg () {
//这边写图片的上传
}
}
}
</script> <style>
*{
margin: ;
padding: ;
}
#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: %;
border: 1px solid #d5d5d5;
}
#demo .picture {
width: %;
height: %;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#demo .container {
z-index: ;
position: fixed;
padding-top: 60px;
left: ;
top: ;
right: ;
bottom: ;
background:rgba(,,,);
} #demo #image {
max-width: %;
} .cropper-view-box,.cropper-face {
border-radius: %;
}
/*!
* 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: ;
line-height: ; 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: !important;
max-width: none !important;
min-height: !important;
max-height: none !important;
width: %;
height: %;
image-orientation: 0deg
} .cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
position: absolute;
top: ;
right: ;
bottom: ;
left: ;
} .cropper-wrap-box {
overflow: hidden;
} .cropper-drag-box {
opacity: ;
background-color: #fff;
} .cropper-modal {
opacity: .;
background-color: #;
} .cropper-view-box {
display: block;
overflow: hidden; width: %;
height: %; outline: 1px solid #39f;
outline-color: rgba(, , , 0.75);
} .cropper-dashed {
position: absolute; display: block; opacity: .;
border: dashed #eee
} .cropper-dashed.dashed-h {
top: 33.33333%;
left: ;
width: %;
height: 33.33333%;
border-top-width: 1px;
border-bottom-width: 1px
} .cropper-dashed.dashed-v {
top: ;
left: 33.33333%;
width: 33.33333%;
height: %;
border-right-width: 1px;
border-left-width: 1px
} .cropper-center {
position: absolute;
top: %;
left: %; display: block; width: ;
height: ; opacity: .
} .cropper-center:before,
.cropper-center:after {
position: absolute;
display: block;
content: ' ';
background-color: #eee
} .cropper-center:before {
top: ;
left: -3px;
width: 7px;
height: 1px
} .cropper-center:after {
top: -3px;
left: ;
width: 1px;
height: 7px
} .cropper-face,
.cropper-line,
.cropper-point {
position: absolute; display: block; width: %;
height: %; opacity: .;
} .cropper-face {
top: ;
left: ; background-color: #fff;
} .cropper-line {
background-color: #39f
} .cropper-line.line-e {
top: ;
right: -3px;
width: 5px;
cursor: e-resize
} .cropper-line.line-n {
top: -3px;
left: ;
height: 5px;
cursor: n-resize
} .cropper-line.line-w {
top: ;
left: -3px;
width: 5px;
cursor: w-resize
} .cropper-line.line-s {
bottom: -3px;
left: ;
height: 5px;
cursor: s-resize
} .cropper-point {
width: 5px;
height: 5px; opacity: .;
background-color: #39f
} .cropper-point.point-e {
top: %;
right: -3px;
margin-top: -3px;
cursor: e-resize
} .cropper-point.point-n {
top: -3px;
left: %;
margin-left: -3px;
cursor: n-resize
} .cropper-point.point-w {
top: %;
left: -3px;
margin-top: -3px;
cursor: w-resize
} .cropper-point.point-s {
bottom: -3px;
left: %;
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:
} @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: .
}
} .cropper-point.point-se:before {
position: absolute;
right: -%;
bottom: -%;
display: block;
width: %;
height: %;
content: ' ';
opacity: ;
background-color: #39f
} .cropper-invisible {
opacity: ;
} .cropper-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
} .cropper-hide {
position: absolute; display: block; width: ;
height: ;
} .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>

参考 :http://blog.csdn.net/xiaogezl/article/details/70227025

vue 裁剪图片,插件Cropper的使用的更多相关文章

  1. jquery裁剪图片插件cropit示例

    重装农药第16天!! jquery裁剪图片插件cropit示例 背景:做的手机网页项目,用html file控件上传图片,有些手机拍照后图片会很大,20M以上的,用之前的H5 formdata上传的话 ...

  2. cropper(裁剪图片)插件使用(案例)

    公司发布微信H5前端阵子刚刚弄好的H5端的图片上传插件,现在有需要裁剪图片.前端找了一个插件---cropper 本人对这插件不怎么熟悉,这个案例最好用在一个页面只有一个上传图片的功能上而且只适合单个 ...

  3. 支持移动端裁剪图片插件Jcrop(结合WebUploader上传)

    (此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...

  4. 图片剪裁上传插件 - cropper

    图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...

  5. cropper实现基本的裁剪图片并上传

    使用cropper之前需要先引用 cropper.css 和 cropper.js cropper 官网:https://fengyuanchen.github.io/cropper/ cropper ...

  6. jquery.cropper 裁剪图片上传

    https://github.com/fengyuanchen/cropper 1.必要的文件引用: <script src="/path/to/jquery.js"> ...

  7. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  8. cropper.js裁剪图片的使用

    这两天难得有时间可以整理一下最近学习的东西,这两天项目中用到了头像上传裁剪的功能,这里只介绍头像的裁剪吧. 单独实现图片剪裁的功能还是挺容易的,入门级别的.看一遍官方给的文档,基本上就明白了.大家如果 ...

  9. Android第三方开源图片裁剪截取:cropper

     Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...

随机推荐

  1. SQLSERVER 备份数据库的注意事项

    1. SQLSERVER 有一个压缩备份集的功能,能够实现大概15%的压缩比(跟数据类型不同而不同) 之前竟然没发现...浪费了好多磁盘资源.. 多学习多思考..

  2. CentOS7 安装 Jenkins

    1. 安装java环境, 自己的虚拟机里面前期已经安装好了 检查一下: [root@centos74 ~]# java -versionopenjdk version "1.8.0_131& ...

  3. C++的内存分区

    C++的内存划分为栈区.堆区.全局区/静态区.字符串常量和代码区. 栈区 由系统进行内存的管理. 主要存放函数的参数以及局部变量.在函数完成执行,系统自行释放栈区内存,不需要用户管理.整个程序的栈区的 ...

  4. static方法

    http://www.cnblogs.com/dolphin0520/p/3799052.html 方便在没有创建对象的情况下来进行调用(方法/变量). 虽然在静态方法中不能访问非静态成员方法和非静态 ...

  5. Angular $cookieStore简单应用

    angular.module('cookieStoreExample', ['ngCookies']) .controller('ExampleController', ['$cookieStore' ...

  6. 深入浅出——float

    FLOAT  参考张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]的CSS float浮动的深入研究.详解及拓展 1.FLOAT的特性 float属性的初衷只是为了实现文字 ...

  7. Delphi中统一显示表格字段名的高效方法

    问题描述:在开发数据库程序时,我们经常要使用很多的表格显示组件DBGrid.当DBGrid显示某表格的数据时,其字段标题默认的就是后台数据库中的表格的字段名称.而为了数据库开发方便,后台数据库中的表格 ...

  8. sorted 返回字典的所有键

  9. 监控(3)进程通用shell

    #! /bin/bash proc_name="beam.smp" #进程名 proc_num() #查询进程数{ num=`ps -ef | grep $proc_name | ...

  10. 【bzoj3064】 CPU监控

    http://www.lydsy.com/JudgeOnline/problem.php?id=3064 (题目链接) 题意 给出一个长度为$n$的数列$A$,同时定义一个辅助数组$B$,$B$开始与 ...