使用JS压缩用户上传的图片并输出为base64数据 - 踏得网

使用HTML5的FileReader和Canvas.toDataURL接口实现。兼容IE10+,Firefox,Chrome,Safari

canvas, js, image, compress

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 19162
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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 = 640, //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=""/>';
        }
    }
}

编译

CSS

HTML