2024-01-01 11:49
js中用canvas生成固定长宽的图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>原图：</div>
    <input type="file" id="file1" onchange="showImg(this,'img1')" />
    <img id="img1" />
    <button type="button" onclick="genpic()">生成400x300大小的图片</button>
    <hr />
    <img id="img2" />
    <script>
        var srcSize; //原图大小
        //上传图片后立即预览 file对象,图片容器id不h
        function showImg(fileObj, imgId) { 
            var file = fileObj.files[0];
            var r = new FileReader();
            r.onload = function () {
                var fileContent = r.result;
                srcSize = (fileContent.length / 1024).toFixed(2);
                console.log(srcSize+'kb', '原图大小',fileContent.length+"字节")
                document.getElementById(imgId).src = fileContent;
            }
            r.readAsDataURL(file);

        }

        //生成400x300大小的图片
        function genpic() {
            const img = document.getElementById('img1');

            //生成固定长宽的图片
            const canvas = document.createElement('canvas');
            canvas.width = 400;
            canvas.height = 300;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            const dataUrl = canvas.toDataURL('image/jpeg');
            document.getElementById('img2').src = dataUrl;

            alert("原图大小：" + srcSize + "KB，生成的图片大小：" + (dataUrl.length / 1024).toFixed(2) + "KB")
        }
    </script>
</body>

</html>
预想是用在h5上传图片的时候判断图片太大的话用canvas生成规定大小的图片后再上传的。。