图片渲染（等比例缩小）并上传

完整示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id="file_btn">
<canvas id="canvas" style="border:1px solid #c3c3c3;"></canvas>
<script>
    let file_btn = document.getElementById('file_btn');
    let canvas = document.getElementById('canvas');
    // 给定canvas在页面的占位，图片大于则宽高等比例缩小
    canvas.width = 540;
    canvas.height = 420;
    // 1.监听文件上传按钮的选择文件的事件
    file_btn.addEventListener("change", function () {
     
     
        let data_url = file_btn.files[0];
        console.log(data_url);
        // 2.使用FileReader类来读取文件内容
        let reader = new FileReader();
        reader.readAsDataURL(data_url);
        // 3.监听FileReader读取器读取完成事件（此事件后才可以获取到文件内容，进行图片渲染或上传）
        reader.onload = function () {
     
     
            // 3.1 异步渲染(canvas)
            let cxt = canvas.getContext('2d');
            let img = new Image();
            img.src = this.result;
            // 3.11 Image对象数据准备完成事件
            img.onload = function () {
     
     
                cxt.clearRect(0,0,canvas.width,canvas.height);// 清空上一次的图片
                // 绘画
                let width = img.width;
                let height = img.height;
                let result = geometric_scaling(width,height,canvas.width,canvas.height);
                if (result['scale_by']==='none'){
     
     
                    cxt.drawImage(img, (canvas.width-result['width'])/2, (canvas.height-result['height'])/2,result['width'],result['height'])
                }
                if (result['scale_by']==='width'){
     
     
                    cxt.drawImage(img, 0, (canvas.height-result['height'])/2,result['width'],result['height'])
                }
                if (result['scale_by']==='height'){
     
     
                    cxt.drawImage(img, (canvas.width-result['width'])/2, 0,result['width'],result['height'])
                }

            }
            // 3.2.异步上传(ajax) param = {"img":this.result}(数据格式为base64)
        }
    });
    // 封装等比缩小的方法
    function geometric_scaling(image_width, image_height, canvas_width, canvas_height) {
     
     
        let width = image_width;
        let height = image_height;
        let scale = 1;
        let scale_by = 'none';
        let return_data = {
     
     width,height,scale,scale_by};
        if (image_height < canvas_height && image_width < canvas_width){
     
     
            return return_data
        }
        else if (image_height > canvas_height && image_width > canvas_width){
     
     
            // 都大
            let scale_height = canvas_height / image_height;
            let scale_width = canvas_width / image_width;
            if (scale_height<scale_width){
     
     
                scale = scale_height;
                scale_by = 'height';
            }
            else {
     
     
                scale = scale_width;
                scale_by = 'width';
            }
        }
        // 不是都小也不是都大的剩下两种情况
        else if (image_height > canvas_height) {
     
     
            scale = canvas_height / image_height;
            scale_by = 'height';
        }
        else{
     
     
            scale = canvas_width / image_width;
            scale_by = 'width';
        }
        return_data['width'] = image_width * scale;
        return_data['height'] = image_height * scale;
        return_data['scale'] = scale;
        return_data['scale_by'] = scale_by;
        return return_data
    }
</script>
</body>
</html>
图片渲染（等比例缩小）并上传

相关技术文档

完整示例代码如下

猜你喜欢
