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


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查看所有js插件

网友评论0

程序员在线工具箱