模拟点击input
为了能使点击的按钮可定制，所以我们采用模拟点击input的方法来触发input
input里面有个类型是file的可以上传文件，
function doInput(id){
var inputObj = document.createElement('input');
inputObj.addEventListener('change',readFile,false);
inputObj.type = 'file';
inputObj.accept = 'image/*';
inputObj.id = id;
inputObj.click();
}
读取图片
上面函数中点击input，然后监听change，选择图片之后会执行readFile函数来读取文件信息
function readFile(){
var file = this.files[0];//获取input输入的图片
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}//判断是否图片，在移动端由于浏览器对调用file类型处理不同，虽然加了accept = 'image/*'，但是还要再次判断
var reader = new FileReader();
reader.readAsDataURL(file);//转化成base64数据类型
reader.onload = function(e){
drawToCanvas(this.result);
}
}
}
canvas预览图片
用了一个drawToCanvas函数来将转化后的base64数据写到canvas，虽然可以直接用img标签直接显示，但是总是感觉显示会很慢
function drawToCanvas(imgData){
var cvs = document.querySelector('#cvs');
cvs.width=300;
cvs.height=400;
var ctx = cvs.getContext('2d');
var img = new Image;
img.src = imgData;
img.onload = function(){//必须onload之后再画
ctx.drawImage(img,0,0,300,400);
strDataURI = cvs.toDataURL();//获取canvas base64数据
}
}
用canvas呈现更加灵活，如果后面要对图片进行位置，大小的变换，这样比较方便
上传服务器
以上已经获取到了图片的base64，由于图片的base64字符串很长不能用get方式，通过post去传给后台
注意
这里说一点每次给canvas重新width和height时画布会重新绘制，也就是init了，还有用css给canvas高宽和字标签设置是不一样的，可以自行百度
公众号
