java canvas添加图片上传_利用canvas实现本地上传图片并预览

模拟点击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高宽和字标签设置是不一样的，可以自行百度

公众号