前端实现上传的图片压缩

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>哈哈</title>
  </head>
  <style>
    #preview {
        display: inline-block;
        width: 2.56rem;
        height: 2.56rem;
        position: relative;
        /* background-image: url(img/iconfont-tianjia.png); */
        background-repeat: no-repeat;
        background-size:cover ;
    }          

    </style>
    <body>
        <div id="preview"></div>
        <input id="file" type="file">
    </body>

<script type="text/javascript">
var eleFile = document.querySelector('#file');
var elepreviewFile = document.querySelector('#preview');

// 压缩图片需要的一些元素和对象
var reader = new FileReader(),
//创建一个img对象
    img = new Image();

// 选择的文件对象
var file = null;

// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// base64地址图片加载完毕后
img.onload = function() {
    // 图片原始尺寸
    var originWidth = this.width;
    var originHeight = this.height;
    // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
    var maxWidth = 800,
        maxHeight = 800;
    // 目标尺寸
    var targetWidth = originWidth,
        targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    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);
    /*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
    //压缩后的图片base64 url
    /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
        * qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
    var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
    //console.log(canvas.toDataURL('image/jpeg', 0.92));
    elepreviewFile.style.backgroundImage='url(' + newUrl + ')';
};

// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
    img.src = e.target.result;
};
eleFile.addEventListener('change', function(event) {
    file = event.target.files[0];
    // 选择的文件是图片
    if(file.type.indexOf("image") == 0) {
        reader.readAsDataURL(file);
    }
});
</script>
</html>
canvas的图片压缩

前端实现上传的图片压缩

猜你喜欢
