canvas图片压缩，局部放大，像素处理

直接上代码：（具体看注释）

需要引用jquery.min.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>压缩图片</title>
</head>
<body>
    <input type="file" name="file" id="file">
    <div id="container"></div>

    <script src="../jquery-3.3.1.min.js"></script>
    <script>
    $(function(){
        $("#file").on("change",function(){
            var file = this.files[0]
            photoCompress(file, 200, $("#container")[0])
        })
    })

    /**@argument
     * file:文件（图片形式）
     * w：文件压缩后的宽度
     * objDiv：容器或者回调函数
     **/
    function photoCompress(file, w, objDiv){
        var ready = new FileReader() // 异步文件读取机制
        ready.readAsDataURL(file) // 图片预览
        ready.onload = function(){
            var re = this.result
            canvasDataURL(re, w, objDiv)
        }
    }

    function canvasDataURL(re, w, objDiv){
        var newImg = new Image()
        newImg.src = re
        var imgWidth,
            imgHeight
            offsetX = 0,
            offsetY = 0
        // img的onload事件中同步执行绘制图像的函数，就可以一边装载一边绘制了
        newImg.onload = function(){
            var img = document.createElement("img")
            img.src = newImg.src
            imgWidth = img.width
            imgHeight = img.height
            var newHeight = Math.round(imgHeight * w / imgWidth) // 按比例计算压缩后的图片高度
            var canvas = document.createElement("canvas")
            canvas.width = w
            canvas.height = newHeight
            var ctx = canvas.getContext('2d')
            // clearRect(x,y,width,height)
            // 参数说明：x、y矩形起点的横纵坐标，width、height表示矩形宽高
            ctx.clearRect(0,0,w,newHeight)
            // 重置图片宽高为压缩后的宽高
            imgWidth = w
            imgHeight = newHeight
            // drawImage(image,x,y,w,h)
            // 参数说明：image-Image对象，x、y是绘制时该图像在画布中的起始坐标。w、h表示绘制时图像的宽高
            // 该方法也可以复制图片某个区域：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
            // 参数说明：image-Image对象，sx、sy是复制源图像中被复制区域的起点横纵坐标，sw、sh时候被复制区域的宽高
            // dx、dy是表示复制后的目标图像在画布中的起始横纵坐标，dw，dh是复制后的目标图像的宽高
            ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight)

            /*******************start复制局部区域放大(需要把画布宽高都增加200) *************/
            // ctx.drawImage(img,360,390,800,400,imgWidth,0,150,100)
            /*********************************** end **********************************/

            /*******************************start像素处理 *******************************/
            // 像素处理：下面定义的imagedata其实是一个CanvasPixelArray对象，具有height、width、data等属性。
            // data属性是一个保存像素数据的数组，每四个为一组，按顺序分别表示：红色值，绿色值，蓝色值，透明度值。
            // var imgdata = ctx.getImageData(0,0,imgWidth,imgHeight)
            // var imgdataArr = imgdata.data
            // var imgdataLen = imgdataArr.length
            // console.log(imgdataArr)
            // for(var i = 0; i < imgdataLen; i += 4){
            //     imgdataArr[i] = 255 - imgdataArr[i] // red
            //     imgdataArr[i+1] = 255 - imgdataArr[i+1] // green
            //     imgdataArr[i+2] = 255 - imgdataArr[i+2] // blue
            // }
            // ctx.putImageData(imgdata,0,0) // 重置像素值后重绘图像：参数分别表示：imgdata-像素组，重绘图像的起点横纵坐标
            /*********************************** end **********************************/

            var base64 = canvas.toDataURL('img/png',0.7) // 参数表示：指定的图片类型，图片质量
            if(typeof objDiv === 'object'){
                objDiv.appendChild(canvas)
                // console.log(base64)
            } else if(typeof objDiv === 'function'){
                objDiv(base64)
            }
        }
    }
    </script>
</body>
</html>

如有问题请指出~