技术 思绪 摘录 旅行
之前文章说到利用cropperjs进行拖拽裁剪,但是计划赶不上变化,用户用了之后,说是太繁琐,不想拖拽,需要自动裁剪;那么今天这篇文章说的就是解放双手。

开源是程序员的基本美德

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自动裁剪</title>
    <link rel="stylesheet" href="css/cropper.min.css">
</head>

<body>
    <img src="" id="preview">

    <input type="file" onchange="selimg(this)">
    <div style="display: none">
        <img src="" id="sourceimg">
    </div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/cropper.min.js"></script>
    <script src="js/upload.js"></script>
    <script>
        var selimg = function (file) {
            //开始加载loading
            if (!file.files || !file.files[0]) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                var replaceSrc = evt.target.result;
                // 更换cropper的图片  
                $('#sourceimg').cropper('replace', replaceSrc, false); // 默认false,适应高度,不失真  
            }
            reader.readAsDataURL(file.files[0]);
        }
        //确认裁剪
        var Btn_Over = function () {
            var cas = $('#sourceimg').cropper('getCroppedCanvas', {
                width: 500,
                height: 500
            });
            var base64 = cas.toDataURL('image/jpeg');
            var blob = getBlobBydataURI(base64, "image/jpg");
            //上传方法
            // uploadOne($("#sourceimg"), "product", blob, function (data) {
            //     if (data.IsSuccess) {
            //         var imgs = data.Message.split(",");
            //         var domain = data.DoMain + "/";
            //         $(imgs).each(function (i, item) {
            //             console.log(domain + item);
            //             $("#preview").attr("src", domain + item);
            //             //loading 结束
            //         });
            //     }
            // });
        }
        //初始化
        $('#sourceimg').cropper({
            aspectRatio: 1 / 1,
            minContainerWidth: 800,
            minContainerHeight: 800,
            zoomOnWheel: true,
            movable: true,
            viewMode: 1,
            dragMode: 'none',
            ready: function (data) {
                Btn_Over();
            }
        });

        //base64转换
        function getBlobBydataURI(dataUrl, type) {
            var binary = atob(dataUrl.split(',')[1]);
            var array = [];
            for (var i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
            }
            return new Blob([new Uint8Array(array)], {
                type: type
            });
        }
    </script>
</body>

</html>

CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

友情打赏

请打开您的微信,扫一扫