标签：canvas 预览 cvs file var inputObj 上传 图片

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

公众号

我们的主页

本文转载于:猿2048利用canvas实现本地上传图片并预览

标签：canvas,预览,cvs,file,var,inputObj,上传,图片
来源： https://www.cnblogs.com/homehtml/p/12592738.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。