H5海报生成器的那些坑

H5海报生成器大概流程：从本地相册调用一张图作为背景，然后放到canvas中，和其他元素一起导出一张海报图片。

FileReader API

H5用FileReader调用本地图片

<!-- 部分手机某些相册文件夹里的图片 不可选 -->
<input class="abso upimg" id="upimg" accept="image/gif, image/jpeg, image/jpg, image/png" type="file" />

<!-- 相册文件夹里的图片都可选 但是有些机型 打开相册时间较慢 -->
<input class="abso upimg" id="upimg" accept="image/*" type="file" />

JSeasy.initUpImg = function(btnEle,endCallback){
	btnEle.addEventListener('change', function () {

		var file = this.files[0]; //获取file对象
		//判断file的类型是不是图片类型。
		if(!/image\/\w+/.test(file.type)){ 
			alert("文件必须为图片！"); 
			return false; 
		} 

		var reader = new FileReader(); //声明一个FileReader实例

		//最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片
		reader.onload = function(e){ 
			//alert(reader.readyState)
			if(endCallback)endCallback(this)

		} 
		reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件

	});	
};



JSeasy.initUpImg(document.querySelector('#upimg'),function(reader){
	console.log(reader)
	$ele.attr('src',reader.result);
})

上面的方法可以得到本地图片的数据。

当我们把图片绘制到canvas，再通过var picData = document.getElementById('canEle').toDataURL('image/png');来导出画布图像的时候，部分手机（ip6）会提示有跨域问题。

此时可以通过设置img.crossOrigin = 'Anonymous';来解决ip6的问题。

但是设置crossOrigin后,ip7原本可以正常生成海报的，现在却出现了相册内的图片无法绘制到canvas中的问题。随意ip7不能设置crossOrigin属性。

var img = new Image(); 
img.onload = bjInit;  

img.onerror = function() {  
	var img = new Image();
	img.onload = bjInit;
	img.src = self.bj;
}  

function bjInit(){
	//将图片绘制到canvas
}

img.crossOrigin = 'Anonymous';//解决跨域问题，需在服务器端运行，也可为 anonymous   
img.src = reader.result;