JS裁剪并上传图片到OSS服务器

一.说明

1. Demo功能说明

前端基于js的选取图片，裁剪，预览，上传，可用于头像上传，或者其他地方的上传图片；

（1）高亮显示区为裁剪去，可拖动

（2）IOS竖向拍摄图片宽高数据相反的问题修复

（3）确认裁剪后预览，取消后需重新上传

（4）预览小图可删除，上有按钮

（5）点击上传可上传多张图片，返回图片链接

2.Demo地址

阿里云Demo地址：前端签名直传

我的Demo图片裁剪上传github地址：图片剪切上传至oss服务器

二.代码分析

1.上传模块

因为是基于阿里oss的demo,所以是引入的相应的js,然后初始化实例

var uploader = new plupload.Uploader({
	runtimes: 'html5,flash,silverlight,html4',
	browse_button: 'selectfiles',
	//runtimes : 'flash',
	container: document.getElementById('container'),
	flash_swf_url: 'lib/plupload-2.1.2/js/Moxie.swf',
	silverlight_xap_url: 'lib/plupload-2.1.2/js/Moxie.xap',
	url: host,
	// multi_selection:false,//是否可以多文件上传
	multipart_params: {
		// 'Filename': '${filename}',
		'key': 'qph_test/activity_image/' + path,
		'policy': policyBase64,
		'OSSAccessKeyId': accessid,
		'success_action_status': '200', //让服务端返回200,不然，默认会返回204
		'signature': signature,
	},
	unique_names: true,
	init: {
		PostInit: function(e) {
			document.getElementById('postfiles').onclick = function() {
				set_upload_param(uploader, '');
				// uploader.start();
				return false;
			};
		},
		BeforeUpload: function(up, file) {
			set_upload_param(up, file.name)
			console.log(file)
		},
		//添加文件后
		FilesAdded: function(up, files) {			
			plupload.each(files, function(file) {
				path = new Date().getTime() + random_string(10) + get_suffix(file.name);
			})
		},

		//上传文件过程
		UploadProgress: function(up, file) {
			/*file.process为上传进度*/
		},

		//文件传输结束
		FileUploaded: function(up, file, info) {
			if(info.status >= 200 || info.status < 200) {
				
			}
		},
		Error: function(up, err) {
			
		}
	}
});
//初始化
uploader.init();

其他的可以不管，我们如果要操作图片，那么就在FilesAdded这个函数里面，它返回了两个参数，我们用到的是那个 files,files是一个数组格式的数 据， 因为我们要操作图片，所以每次只允许操作一张，所以在这个函数刚进入就开始判断 files.length,大于1就返回false,重新选择。我们可以通过这个 files用 reader获取图片

var reader = new FileReader();
reader.readAsDataURL(files[0].getNative());
reader.onload = (function(e) {
				
	//console.log(e.target.exif)
	var image = new Image();
	image.src = e.target.result;
	image.id = "big";
	//image.setAttribute("data-id",files[0].id); // 设置  
	image.onload = function() {//已经获取到了图片
	}
}）