解决h5+项目中头像上传时的跨域问题

图片上传时出现跨域问题的原因及解决方案

我们的项目和本地相册中的图片不在同一个域下，浏览器为了用户数据的安全会严格控制跨域加载数据，所以将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。
解决的方案：如果跨域访问失败那么我就先读取文件数据封装成一个本地对象，然后在对这个对象中的文件数据进行加载和操作即可。
需要用到的plus的方法api如下：

代码实现如下：重点在于pick到指定文件后的回调函数中，我们根据这个path解析文件并封装成entry对象，然后利用filereader以url数据编码格式读取entry中的file文件数据的内容，然后把读取到的内容放进img标签中，此时img标签内的内容就不是跨域的了。

var $image = $('#image');
//通过plus.gallery唤醒我们的本地相册窗口，然后选择好的图片地址会赋给path变量
//path是我们选择的图片的本地地址
plus.gallery.pick(function(path) {
						//console.log(path);
						//先创建一个本地文件读取器
						var filereader = new plus.io.FileReader();
						//读取本地相册中的文件
						plus.io.resolveLocalFileSystemURL(path,
							function(entry) {
							//读取的结果封装进entry
								entry.file(
								//file为读取到的文件数据对象
									function(file) {
									//读取文件数据
										filereader.readAsDataURL(file);
									//读取完毕后，本地设置src路径
										filereader.onloadend = function(e) {
										//所有文件或目录操作事件回调函数中都创建该对象的实例。 该对象从DOMEvent继承而来，可通过该其target属性获取事件触发的文件或目录操作对象。
											$image.attr('src', e.target.result);
											//调用cropper.js的裁剪框方法
											faceCutter();
										}
									},
									function(e) {
										console.log(e.message)
									}
								);
							},
							function(e) {
								console.log(e.message)
							});
					}, function(e) {
						// mui.openWindow("../../pages/my_info.html", "return_index");
						mui.back();
					}, {
						filter: "image"
					});
					
					//激活裁剪框
					function faceCutter() {
						plus.nativeUI.showWaiting("请稍等...");
						//				var $image = $('#image');
						var options = {
							aspectRatio: 1 / 1,
							crop: function(e) {}
						};
						// Cropper
						$image.cropper(options);
						plus.nativeUI.closeWaiting();
					}
					
					//图片上传
					$("#cutter").on('tap', function() {
						plus.nativeUI.showWaiting("上传中...");
						//获取裁剪后的结果
						var canvas = $image.cropper("getCroppedCanvas");
						//将其转化成bese64格式待上传
						base64Url = canvas.toDataURL();
						alert(base64Url);
						...ajax上传方法...
					}