首页 > web前端 > js教程 > 在cropper中js通过vue的图片裁剪上传功能如何实现

在cropper中js通过vue的图片裁剪上传功能如何实现

亚连
发布: 2018-06-02 11:21:16
原创
2139 人浏览过

这篇文章主要介绍了cropper js基于vue的图片裁剪上传功能的相关资料,需要的朋友可以参考下

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

首先下载引入cropper js,

1

npm install cropper js --save

登录后复制

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

html的代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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="&#39;backgroundImage:url(&#39;+headerImage+&#39;)&#39;">

  </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是我定义的判断图片格式的。

1

2

3

4

5

6

7

8

9

10

11

12

13

data() {

 return {

 headerImage: "",

 picValue: "",

 cropper: "",

 croppable: false,

 panel: false,

 url: "",

 imgCropperData: {

 accept: "image/gif, image/jpeg, image/png, image/jpg"

 }

 };

 }

登录后复制

2,在mounted里面初始换裁剪框

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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画图,确定提交上传。我还加了取消事件函数,判断上传文件的类型和大小。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

methods: {

 //取消上传

 cancel() {

 this.panel = false;

 var obj = document.getElementById(&#39;change&#39;) ;

 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("上传成功");

 //这边写图片的上传

 }

 }

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

如何在vue2中设置全局变量?(详细教程)

如何在JS中实现字符串拼接的功能(扩展String.prototype.format)

利用ES6通过WeakMap解决内存泄漏问题(详细教程)

以上是在cropper中js通过vue的图片裁剪上传功能如何实现的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板