前端使用canvas压缩并在线预览图片

时间 2019-11-08
标签前端使用 canvas 压缩在线预览图片繁體版
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input id="file" type="file">
    <img src="" alt="" id="viewImg">
</body>
</html>
<script type="text/javascript">
    var eleFile = document.querySelector('#file');
    // 压缩图片须要的一些元素和对象
    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;
        // 图片尺寸超过800x800的限制
        if(originWidth > maxWidth || originHeight > maxHeight) {
            if(originWidth / originHeight > maxWidth / maxHeight) {
                // 更宽，按照宽度限定尺寸
                targetWidth = maxWidth; //800
                targetHeight = Math.round(maxWidth * (originHeight / originWidth)); //664
            } 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));
// 　　　　　　　　　　preview.style.backgroundImage='url(' + newUrl + ')';
       
        document.getElementById("viewImg").src=newUrl
    };

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