cropbox.js轻量级图片在线裁剪插件

来源:https://www.sucaihuo.com/js/4892.html 2019-10-31 11:51浏览(297) 收藏

cropbox.js是一款轻量级图片在线裁剪插件,很适合做头像裁剪功能,支持放大缩小图片和多次裁剪。
cropbox.js轻量级图片在线裁剪插件
分类:图片代码 > 图片插件 难易:初级
查看演示 下载资源: 11 下载资源 下载积分: 20 积分

js代码

<script src="javascript/cropbox.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var options =
        {
            imageBox: '.imageBox',
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'tx.png'
        }
        var cropper = new cropbox(options);
        document.querySelector('#file').addEventListener('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = new cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        document.querySelector('#btnCrop').addEventListener('click', function(){
            var img = cropper.getDataURL();
            document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';
        })
        document.querySelector('#btnZoomIn').addEventListener('click', function(){
            cropper.zoomIn();
        })
        document.querySelector('#btnZoomOut').addEventListener('click', function(){
            cropper.zoomOut();
        })
    };
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2