compressphoto.js图片压缩插件，可设置压缩比及阈值

第一步引入bfwone

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFWONE.JS DEMO PAGE</title>
    <script id="bfwone" data="dep=jquery.17" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script>
        bready(function() {
            use(["compressphoto"], function() {
                document.querySelector("#input").onchange = function() {

                    compressphoto({
                        elem: this, //必传，上传图片的input元素
                        ratio: 0.6, //默认为0.1   压缩比
                        maxsize: 1, //默认为1024,单位为kb    大于此值则做压缩操作
                        success: (e) => {
                            //必传，成功后的回调函数，返回的参数是图片信息（对象）
                            console.log(e);
                            document.querySelector(".m").innerHTML = `<a href="${e.data}"  download><img id="img" src="${e.data}" width="200px"/></a>`
                        }
                    });
                }

            });
        });
    </script>
</head>
<body>
    <div class="m">
        <input type="file" id="input" />
        <canvas id="canvas"></canvas>
    </div>
</body>
</html>

compressphoto.js 图片压缩插件设置压缩比阈值

立即下载compressphoto.js 查看所有js插件

网友评论0