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

时间:2022-05-19 08:27:34

直接上代码:(具体看注释)

需要引用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>

 如有问题请指出~