利用canvas实现本地上传图片并预览

模拟点击input

为了能使点击的按钮可定制，因此咱们采用模拟点击input的方法来触发input
input里面有个类型是file的能够上传文件，<input type="file" accept="image/*"/>

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高宽和字标签设置是不同的，能够自行百度

公众号

咱们的主页