这次给大家带来图片裁剪上传功能的实现，图片裁剪上传功能实现的注意事项有哪些，下面就是实战案例，一起来看一下。
前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：http://www.jb51.net/article/135719.htm
首先下载引入cropper js，
npm install cropper js --save
在需要的页面引入：import cropper from cropper js
html的代码如下：
<template>
<p id="demo">
<!-- 遮罩层 -->
<p class="container" v-show="panel">
<p>
<img id="image" :src="url" alt="picture">
</p>
<button type="button" id="button" @click="commit">确定</button>
<button type="button"id="cancel" @click="cancel">取消</button>
</p>
<p style="padding:20px;">
<p class="show">
<p class="picture" :style="'backgroundimage:url('+headerimage+')'">
</p>
</p>
<p style="margin-top:20px;text-align: left;">
<input type="file" id="change" accept="image" @change="change">
<label for="change"></label>
</p>
</p>
</p>
</template>
主要是js代码，如下
1，data里面定好初始变量，绑定数据，imgcropperdata是我定义的判断图片格式的。
data() {
return {
headerimage: ,
picvalue: ,
cropper: ,
croppable: false,
panel: false,
url: ,
imgcropperdata: {
accept: image/gif, image/jpeg, image/png, image/jpg
}
};
}
2，在mounted里面初始换裁剪框
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;
}
});
}
3.methods的方法比较多，包括创建url路径，input框change事件，canvas画图，确定提交上传。我还加了取消事件函数，判断上传文件的类型和大小。
methods: {
//取消上传
cancel() {
this.panel = false;
var obj = document.getelementbyid('change') ;
obj.outerhtml=obj.outerhtml;
},
//创建url路径
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;
},
//input框change事件，获取到上传的文件
change(e) {
let files = e.target.files || e.datatransfer.files;
if (!files.length) return;
let type = files[0].type; //文件的类型，判断是否是图片
let size = files[0].size; //文件的大小，判断图片的大小
if (this.imgcropperdata.accept.indexof(type) == -1) {
alert(请选择我们支持的图片格式！);
return false;
}
if (size > 5242880) {
alert(请选择5m以内的图片！);
return false;
}
this.picvalue = files[0];
this.url = this.getobjecturl(this.picvalue);
//每次替换图片要重新得到新的url
if (this.cropper) {
this.cropper.replace(this.url);
}
this.panel = true;
},
//确定提交
commit() {
this.panel = false;
var croppedcanvas;
var roundedcanvas;
if (!this.croppable) {
return;
}
// crop
croppedcanvas = this.cropper.getcroppedcanvas();
// round
roundedcanvas = this.getroundedcanvas(croppedcanvas);
this.headerimage = roundedcanvas.todataurl();
//上传图片
this.postimg();
},
//canvas画图
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() {
alert(上传成功);
//这边写图片的上传
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样实现微信web端后退强制刷新
react bootstrap框架如何使用
react native使用fetch上传图片
怎样让webpack打包后的文件压缩变小
以上就是图片裁剪上传功能的实现的详细内容。