图片上传及图片处理

一.input type=file与文件上传

<input type="file">
复制代码

若是想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢

enctype="multipart/form-data"
复制代码

enctype属性规定在发送到服务器以前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，可是，对于文件，科科，就不能乱编码了，该什么就是什么，只能使用multipart/form-data做为enctype属性值。

只上传文件夹而不是文件

<input type="file" webkitdirectory directory multiple/> 
复制代码

UI自定义

<label class="ui_button ui_button_primary" for="xFile">上传文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form> 
复制代码

accept属性(用来指定浏览器接受的文件类型)

<input type="file" accept="image/*" > //只容许传图片 <input type="file" accept="image/png,image/jpeg,image/gif,image/jpg"> //只容许传图片
``` accept属性是MIME类型： 
复制代码

accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2" ``` 多个属性值使用逗号分隔：

<input accept="audio/*,video/*,image/*"> 
复制代码

二.图片上传/压缩/水印/方向问题

1.FileReader.readAsDataURL()：该方法会读取指定的 Blob 或 File 对象。读取操做完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

2.HTMLCanvasElement.toDataURL()返回一个包含图片展现的 data URI 。能够使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi

//语法：
canvas.toDataURL(type, encoderOptions); 
//type(可选):图片格式，默认为 image/png; 
//encoderOptions(可选) :在指定图片格式为 image/jpeg 或 image/webp的状况下，能够从 0 到 1 的区间内选择图片的质量。若是超出取值范围，将会使用默认值 0.92。
//返回值：包含 data URI 的DOMString。 
复制代码

2.1图片上传

//html 
<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
<form>
    <input type="file" id="uploadFile" style="position:absolute;clip:rect(0 0 0 0);">
</form> 
<img id="imgCover" src="./watermark.png" class="clip"> //水印小照片
<p id="compounded"></p> //合成后的照片 
//js 
var eleUploadFile = document.getElementById('uploadFile'); 
var compounded = document.getElementById('compounded');
eleUploadFile.addEventListener('change', function (event) { 
    var file = event.target.files[0]; //获取图片资源 
    if (!event.type.match('image.*')) {// 只选择图片文件 
        return false; 
    } 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); // 读取文件 exif(file); //旋转图片 reader.onloadend=function(e){ //文件读取结束 
        var base64 = e.target.result; 
        if (base64.length > 1024 * 50) { 
            console.error('图片尺寸请小于50K'); 
            return; 
        } 
        var compressImg = compress(base64); //压缩函数 
        var compoundImg = compoundImg(base64,function(url){ 
            var size = 180 / (window.devicePixelRatio || 1); 
            compounded.innerHTML = '<img src="'+ url +'" width="'+ size +'" height="'+ size +'">'; 
        }) 
    } 
})
复制代码

2.2图片压缩

function compress(readerResult) { //readerResult-->传入文件base64结果 
    var img = new Image(); 
    img.src = readerResult; 
    if(readerResult.length<80000) { 
        return readerResult ;//小于80K的不压缩 
    } 
    //用于压缩图片的canvas 
    let canvas = document.createElement("canvas"); 
    let ctx = canvas.getContext("2d"); 

    //画图区域 
    canvas.width = img.naturalWidth; 
    canvas.height = img.naturalHeight; 
    //铺底色 
    ctx.fillStyle = "#fff"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); 
    //进行最小压缩 
    var dataURL = canvas.toDataURL("image/jpeg",0.9); 
    return dataURL; 
}
复制代码

2.3图片水印

function compoundImg(url,callback) { //url -->合成水印较大的那张图的base64码 
    var eleImgCover = document.getElementById('imgCover'); 
    var canvas = document.createElement('canvas'); 
    var size = 180; //水印大小 
    canvas.width = size; 
    canvas.height = size; 
    var context = canvas.getContext('2d'); // 这是上传图像 
    var imgUpload = new Image(); 
    imgUpload.onload = function () { // 绘制 
        context.drawImage(imgUpload, 0, 0, size, size, 0,0, size, size); // 再次绘制（绘制上水印小照片） 
        context.drawImage(eleImgCover, 0, 0, size, size, 0,0, size, size); // 回调 callback(canvas.toDataURL('image/png'));
    }; 
    imgUpload.src = url; 
} 
复制代码

2.4 EXIF.JS 处理图片方向信息

<script src="EXIF.js"></script> //先引入EXIF.js 
function exif(file) { 
    var Orientation = ''; 
    EXIF.getData(file, function() { 
        console.log(EXIF.pretty(this)); 
        EXIF.getAllTags(this); 
        console.log(EXIF.getTag(this, 'Orientation'));
        Orientation = EXIF.getTag(this, 'Orientation'); //return; }); 
        if (navigator.userAgent.match(/iphone/i)) { //若是方向角不为1，都须要进行旋转
            if(Orientation != "" && Orientation != 1){ 
                switch(Orientation){ 
                    case 6://须要顺时针（向左）90度旋转
                        console.log('须要顺时针（向左）90度旋转');
                        break; 
                    case 8://须要逆时针（向右）90度旋转
                        console.log('须要顺时针（向右）90度旋转'); 
                        break; 
                    case 3://须要180度旋转 alert('须要180度旋转');
                        console.log('须要180度旋转'); 
                        break; 
                } 
            } 
    } 
} 
复制代码

2.5 html2canvas合成图片

function html2canvas(node) { // node为要合成图片的dom节点
    const weNeedImageUrl = ''
    const scale = window.devicePixelRatio
    // 防止在高倍屏下合成图片过于模糊
    const createCanvas = document.createElement('canvas')
    createCanvas.width = node.offsetWidth * scale
    createCanvas.height = node.offsetHeight * scale
    const ctx = createCanvas.getContext('2d')
    ctx.scale(scale, scale)
    html2canvas(node, {
        scale: scale,
        dpi: 384,
        canvas: createCanvas,
        width: node.offsetWidth,
        height: node.offsetHeight
      }).then((canvas) => {
        // 合成图片后的base64码
        let domToImgUrl = canvas.toDataURL('image/jpeg', 0.92)
        console.log('合成图片大小：', domToImgUrl.length)
        
        // 下面是将图片的base64以blob形式上传到阿里云文件服务器，获取图片地址
        let domImageArr = domToImgUrl.split(',')
        let mime = domImageArr[0].match(/:(.*?);/)[1]                 // 获取图像类型
        let decodeData = atob(domImageArr[1])                         // 解码base64
        let decodeDataLength = decodeData.length
        let uInt8array = new Uint8Array(decodeDataLength)
        //Uint8Array类型数组表示的8位无符号整数数组。内容被初始化为0
        while (decodeDataLength--) {
            uInt8array[decodeDataLength] = decodeData.charCodeAt(decodeDataLength)
        }
        let blob = new Blob([uInt8array], { type: mime })
        let formData = new FormData()
        formData.append('file', blob, 'image.png')
        // 上传该图片到阿里云
        appUploadFile(formData).then(data => {
            weNeedImageUrl = data.data[0]
            return weNeedImageUrl
        })
    })
    
}
复制代码