js 上传图片并对图片处理

上传图片    accept 对上传的文件做出限制 只允许上传图片

   <input @change="upload" id="load_img" type="file" value='修改头像' accept="image/*" />

获取图片文件 监听inout值变化事件 

export default {  // vue  js代码
        name: "edit",
        data() {
            return {
                imgPreview: ""
            }
        },
        methods: {
            upload() {
                // 获取文件对象  传入两个参数    event 值变化实践  imgCallback 回调函数
                var blob = this.PIC.imgPro(event, this.imgCallback);

            },
            imgCallback(blob) {  //  blob  图片的二进制对象  window.URL.createObjectURL(blob)获取图片的url 
                this.imgPreview = window.URL.createObjectURL(blob);
            }

        },
    }

pic.js图片处理    
let PIC = {
    imgPro : function(event,fn){
        var reader = new FileReader();//    文件读取流对象
        var imgObj = new Image(); // 创建img 对象    用来存储上传的图片
        reader.readAsDataURL(event.target.files[0]) // 将文件读取为DataURL  
        
        reader.onload = function(e){  // 读取完成 后将图片的base64地址信息赋值给imgObj.src 
            // e.target.result就是图片的base64地址信息
            imgObj.src = e.target.result;
        };
        imgObj.onload  = function(){ // 当加载完成 计算在裁剪尺寸
            // 图片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
          var newWidth = 0, newHeight = 0;
            var maxWidth = 400,maxHeight = 400; // 限制的尺寸
            if( originWidth>maxWidth || originHeight > maxHeight ){
                if (originWidth / originHeight > maxWidth / maxHeight) {
                    newWidth = maxWidth; // 更宽，按照宽度限定尺寸
                    newHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    newHeight = maxHeight;
                    newWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }
            PIC.canvasSet(newWidth,newHeight,imgObj,fn); // 裁剪
            
        }
    },
    canvasSet(targetWidth,targetHeight,imgObj,fn){
        // 缩放图片需要的canvas
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
         // canvas对图片进行缩放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        // 清除画布
        context.clearRect(0, 0, targetWidth, targetHeight);
        // 图片压缩
        context.drawImage(imgObj, 0, 0, targetWidth, targetHeight);
         var type = 'image/jpeg';
        //将canvas元素中的图像转变为DataURL
        var dataurl = canvas.toDataURL(type);
        // $("#ceshi1").attr("src",dataurl);
        //抽取DataURL中的数据部分，从Base64格式转换为二进制格式
        var bin = atob(dataurl.split(',')[1]);
        //创建空的Uint8Array
        var buffer = new Uint8Array(bin.length);
        //将图像数据逐字节放入Uint8Array中
        for (var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }
        //利用Uint8Array创建Blob对象
        var blob = new Blob([buffer.buffer], {type: type});
        fn(blob) ;
    },
};
export { PIC }
 因为是在vue中搭建的项目 所以在方法调用上会不同