canvas前端压缩图片

参考网上的用法，下面是利用canvas进行的图片压缩

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>slip</title>
    <style>
        *{padding: 0;margin: 0;}

    </style>

</head>

<body>
<div class="input">
    <input type="file" id="file" accept="image/*">
</div>

</body>

<script type="text/javascript">

    var img=new Image();
    var reader=new FileReader();
    // 选择的文件对象
    var file = null;
    var eleFlile=document.querySelector('#file');
    var canvas=document.createElement('canvas');
    var context=canvas.getContext('2d');
    img.onload=function () {
        //图片原始大小
        var originWidth = this.width;
        var originHeight = this.height;
        //限制图片大小
        var maxWidth = 400;
        var maxHeight = 400;

        var targetWidth = originWidth, targetHeight = originHeight;
        if (originHeight > maxHeight || originWidth > maxWidth) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
                //更宽
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
                //更高
                targetHeight = maxHeight;
                targetWidth = Math.round(targetHeight * (originWidth / originHeight))
            }
        }
        //图片缩放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        //清除画布
        context.clearRect(0, 0, targetWidth, targetHeight);
        //图片压缩
        context.drawImage(img, 0, 0, targetWidth, targetHeight);
        //转换上传toBlob
        canvas.toBlob(function (blob) {
            //图片ajax上传
            var xhr=new XMLHttpRequest();
            //文件上传成功
            xhr.onreadystatechange=function () {
                if(xhr.status==200){
                    alert("上传成功")
                }
            };
            xhr.open("POST","upload.php",true);
            xhr.send(bolb);
        } ,file.type || 'image/png');
            var newImg = document.createElement("img"),
                url = URL.createObjectURL(blob);

            newImg.onload = function () {
                // no longer need to read the blob so it's revoked
                URL.revokeObjectURL(url);
            };

            newImg.src = url;
            document.body.appendChild(newImg);

//        })
        //图片上传toDataURL
        var url=canvas.toDataURL();
        var newImg = document.createElement("img")
        newImg.src = url;
        document.body.appendChild(newImg);
    }
    //文件base64化
    reader.onload=function (e) {
        img.src=e.target.result;
    };
    eleFlile.addEventListener("change",function (event) {

        file=event.target.files[0];
        if(file.type.indexOf("image")==0){
            reader.readAsDataURL(file);
        }else {
            alert("请传图片")
        }
    })
</script>

</html>
canvas前端压缩图片

参考网上的用法，下面是利用canvas进行的图片压缩

推荐阅读
