indent

H5海报生成器的那些坑

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

FileReader API

H5用FileReader调用本地图片

1
2
3
4
5
<!-- 部分手机某些相册文件夹里的图片 不可选 -->
<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" />
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
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属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;

849890769@qq.com

Proudly published with Hexo