cropperjs基于vue的图片裁剪上传功能的实现代码
前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：https://www.jb51.net/article/135719.htm
为阜康等地区用户提供了全套网页设计制作服务，及阜康网站建设行业解决方案。主营业务为做网站、网站设计、阜康网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
首先下载引入cropper js，
npm install cropper js --save
在需要的页面引入：import Cropper from "cropper js"
html的代码如下：
主要是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("上传成功");
//这边写图片的上传
}
} css样式代码就不贴出来了，可以到GitHub上下载https://github.com/leileibrother/cropper-js-vue-。
总结
以上所述是小编给大家介绍的cropper js基于vue的图片裁剪上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
当前文章：cropperjs基于vue的图片裁剪上传功能的实现代码
本文地址：http://scyanting.com/article/ggcjci.html
