uniapp h5 裁剪图片 插件_uniapp h5实现拍照并裁剪

html

<view @click="chooseImage">
	<image :src="cover" /></image>
</view>

<kps-image-cutter @ok="onok" @cancel="oncancle" :url="editImgUrl" :fixed="true" :width="350" :height="220"></kps-image-cutter>
1
2
3
4
5

插件下载 提取码：j097

script

import kpsImageCutter from '../../../components/ksp-image-cutter/ksp-image-cutter.vue';
export default {
	components: {
		kpsImageCutter
	},
	data() {
		return {
			cover:'',
			editImgUrl:'',
			uploadfilesCover:''
		}
	},
	methods:function(){
		chooseImage: function() {
			let _this = this;
			uni.chooseImage({
				success: function(e) {
					_this.editImgUrl = e.tempFilePaths[0];
				},
			})
		},
		//裁剪图片
		onok(ev) {
			this.editImgUrl = '';
			this.cover = ev.path; //裁剪后的地址
			this.uploadfilesCover = new File([this.cover], "video_image.png", {
				type: "image/png",
				lastModified: Date.now()
			}) //blob转file
			console.log(this.uploadfilesCover)
			console.log(this.cover); 
		},
		oncancle() {
			this.editImgUrl = '';
			this.cover = "";
		},
	}
			
}
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