图片html5在线压缩

PROMULGATOR

天秤座的Dale菇凉

湖南省株洲市

← 交互式滑动导航+table切换

→ jQuery按钮开关效果三种滚动变化

相关代码

图片html5在线压缩

H5移动端多图片压缩上传

js压缩字符串方法

pc端图片上传

canvas像素图片

jQuery上传显示图片

jQuery上传图片并预览

Html

Css

Js

input {
			    margin: 10px 0;
			}
			textarea {
			    width: 100%;
			    height: 300px;
			    display: none;
			}

window.onload = function() {
    var input = document.getElementById("img_input");
    var result = document.getElementById("result");
    var img_area = document.getElementById("img_area");
    if (typeof(FileReader) === 'undefined') {
        result.innerHTML = "FileReader is not supported...";
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile, false);
    }
};

function readFile() {
    var file = this.files[0];
    if (!/image\/\w+/.test(file.type)) {
        alert("image only please.");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        var img = new Image,
            width = 200, //image resize
            quality = 0.8, //image quality
            canvas = document.createElement("canvas"),
            drawer = canvas.getContext("2d");
        img.src = this.result;
        img.onload = function() {
            canvas.width = width;
            canvas.height = width * (img.height / img.width);
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
            img.src = canvas.toDataURL("image/jpeg", quality);
            console.log(img.src);
            result.innerHTML = '<img src="' + img.src + '" alt=""/>';
            img_area.innerHTML = '<div class="sitetip">preview：</div><img src="' + img.src + '" alt=""/>';
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.1

立即下载

图片html5在线压缩



代码描述：图片html5在线压缩

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片html5在线压缩-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号