用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结:
在使用之前,先引入:
在项目里,运行:
npm安装cropperjs保存
在模板里:
& lt; div id=把菔尽北?
& lt; !——遮罩层——比;
& lt; div类="容器" v-show=懊姘濉北?
& lt; div>
& lt; img id=巴枷瘛?src=" https://www.yisu.com/zixun/url " alt=巴计北?
& lt;/div>
& lt;按钮类型="按钮" id="按钮" @click=白魑铩弊４侨范? lt;/button>
& lt;/div>
& lt; div比;
& lt; div类="显示"比;
& lt; div类=罢掌?在
& lt;/div>
& lt;/div>
& lt; div比;
& lt;输入类型="文件" id=案谋洹苯邮?巴枷瘛盄change=案谋洹北?
& lt;标签=案谋洹弊４? lt;/label>
& lt;/div>
& lt;/div>
& lt;/div>之前
js代码:
从“cropperjs”进口收割机
出口默认{
组件:{
},
数据(){
返回{
headerImage:”,
picValue:”,
收割机:”,
croppable:假的,
面板:假的,
url:“
}
},
安装(){//初始化这个裁剪框
var自我=;
var图像=. getelementbyid('图像');
这一点。收割机=new收割机(形象,{
aspectRatio: 1、
viewMode: 1、
背景:假的,
缩放:假的,
准备:函数(){
自我。croppable=true;
}
});
},
方法:{
getObjectURL(文件){
var url=零;
如果(window.createObjectURL !=未定义){//基本
url=window.createObjectURL(文件);
}else if (window.URL !=未定义){//火狐(firefox)
url=window.URL.createObjectURL(文件);
}else if (window.webkitURL !=未定义){//webkit或铬
url=window.webkitURL.createObjectURL(文件);
}
返回的url;
},
改变(e) {
让文件=e。target。文件| | e.dataTransfer.files;
如果(! files.length)返回;
这一点。面板=true;
这一点。picValue=https://www.yisu.com/zixun/files [0];
这一点。url=this.getObjectURL (this.picValue);//每次替换图片要重新得到新的url
如果(this.cropper) {
this.cropper.replace (this.url);
}
这一点。面板=true;
},
作物(){
这一点。面板=false;
var croppedCanvas;
var roundedCanvas;
如果(! this.croppable) {
返回;
}//作物
croppedCanvas=this.cropper.getCroppedCanvas ();
console.log (this.cropper)//轮
roundedCanvas=this.getRoundedCanvas (croppedCanvas);
这一点。headerImage=roundedCanvas.toDataURL ();
this.postImg ()
},
getRoundedCanvas (sourceCanvas) {
画布var=document.createElement(“画布”);
var=canvas.getContext上下文(2 d);
var宽度=sourceCanvas.width;
var高度=sourceCanvas.height;
画布。宽度=宽度;
画布。身高=身高;
上下文。imageSmoothingEnabled=true;
上下文。drawImage (sourceCanvas 0 0、宽度、高度);
上下文。globalCompositeOperation=澳康牡亍?
context.beginPath ();
上下文。弧(宽/2,高/2,数学。分钟(宽度、高度)/2,0,2 *数学。π,真实);
context.fill ();
返回帆布;
},
postImg () {//这边写图片的上传
}
}
}
css代码(比较长,本来想不贴上了,但是为了一下童鞋可以直接运行演示,还是贴上了,篇幅过长,望见谅):
* {
保证金:0;
填充:0;
}
#演示#按钮{
位置:绝对的;
右:10 px;
上图:10 px;
宽度:80 px;
高度:40像素;
边界:没有;
border - radius: 5 px;
背景:白色;
}
#演示,告诉{
宽度:100 px;
身高:100 px;
溢出:隐藏;
位置:相对;
这个特性:50%;
边界:1 px固体# d5d5d5;
}
#演示.picture {
宽度:100%;
高度:100%;
溢出:隐藏;
背景位置:中心中心;
平铺方式:不再重演;
background-size:封面;
}
#演示.container {
z - index: 99;
位置:固定;
padding-top: 60 px;
左:0;
上图:0;
右:0;
底部:0;
背景:rgba (0, 0, 0, 1);
}
#演示#{形象
max-width: 100%;
}
.cropper-view-box。cropper-face {
这个特性:50%;
}/* !
*收割机。js v1.0.0-rc
* https://github.com/fengyuanchen/cropperjs
*
*版权(c) 2017 Fengyuan陈
*在MIT许可下发布
*
*日期:2017 - 03 - 25 - t12:02:21.062z
*/.cropper-container {
字体大小:0;
行高:0;
位置:相对;
-webkit-user-select:没有;
-moz-user-select:没有;
-ms-user-select:没有;
用户选择:没有;
方向:ltr;
-ms-touch-action:没有;
touch-action:没有
}
.cropper-container img {/*避免利润率最高问题(出现alt=" vue中使用cropperjs的方法">
