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

2024-03-05 20:02:25

模拟点击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呈现更加灵活，如果后面要对图片进行位置，大小的变换，这样比较方便