cropper js基于vue的图片裁剪上传功能的实现代码

前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：http://www.jb51.net/article/135719.htm

首先下载引入cropper js，

npm install cropper js --save

在需要的页面引入：import Cropper from "cropper js"

html的代码如下：

<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="commit">确定</button>
 <button type="button"id="cancel" @click="cancel">取消</button>
 </div>
 <div style="padding:20px;">
 <div class="show">
  <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
  </div>
 </div>
 <div style="margin-top:20px;text-align: left;">
  <input type="file" id="change" accept="image" @change="change">
  <label for="change"></label>
 </div>
 </div>
 </div>
</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("上传成功");
 //这边写图片的上传
 }
 } 

css样式代码就不贴出来了，可以到GitHub上下载https://github.com/leileibrother/cropper-js-vue-。

总结

以上所述是小编给大家介绍的cropper js基于vue的图片裁剪上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

• 使用cropper.js裁剪头像的实例代码
• Cropper.js 实现裁剪图片并上传(PC端)
• jquery 图片截取工具jquery.imagecropper.js
• 基于Vue的移动端图片裁剪组件功能
• vue实现移动端图片裁剪上传功能
• vue移动端裁剪图片结合插件Cropper的使用实例代码
• Vue.js 2.0 移动端拍照压缩图片预览及上传实例
• Vue.js 2.0 移动端拍照压缩图片上传预览功能