html5用canvas对图片压缩

https://www.cnblogs.com/goloving/p/8260206.html
https://segmentfault.com/a/1190000011463459
根据第一个链接的内容，写的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script>
(function(){function a(h,g,b,e,c){var f=h.documentElement,d="orientationchange" in window?"orientationchange":"resize";var i=function(){var j=f.clientWidth;if(j>=e&&j<=b){f.style.fontSize=c*(j/b)+"px"}else{if(j>=b){f.style.fontSize=c+"px"}else{if(j<=e){f.style.fontSize=c*(e/b)+"px"}}}};g.addEventListener(d,i,false);h.addEventListener("DOMContentLoaded",i,false)}a(document,window,640,320,34.13)})();
</script>
</head>
<body>
<img id="ceshi1" style="max-width:500px;max-height:500px;">
<input id="file_id" type="file">
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
    var eleFile = document.querySelector('#file_id');
    // 压缩图片需要的一些元素和对象
    var reader = new FileReader(), 
        img = new Image();
    var file = null;
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    eleFile.addEventListener('change', function (event) {
        file = event.target.files[0];
        // 选择的文件是图片
        if (file.type.indexOf("image") == 0) {
            reader.readAsDataURL(file);    
        }
    });
    // base64地址图片加载完毕后
    img.onload = function () {
        var originWidth = this.width;
        var originHeight = this.height;
        var maxWidth = 1920, maxHeight = 1080;
        var targetWidth = originWidth, targetHeight = originHeight;
        if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
        }
        // canvas对图片进行缩放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        // 清除画布
        context.clearRect(0, 0, targetWidth, targetHeight);
        // 图片压缩
        context.drawImage(img, 0, 0, targetWidth, targetHeight);
        var type = 'image/jpeg';
        //将canvas元素中的图像转变为DataURL
        var dataurl = canvas.toDataURL(type);
        $("#ceshi1").attr("src",dataurl);
    };
    // 文件base64化，以便获知图片原始尺寸
    reader.onload = function(e) {
        img.src = e.target.result;
    };
})
</script>
</body>
</html>
html5用canvas对图片压缩

推荐阅读
