jcrop实现上传截图
时间:2021-09-30 16:14:55 +0800 CST 浏览:534

Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:go)可以快速的实现图片裁剪的功能。

实现代码

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

<head>
    <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.Jcrop.js"></script>
    <script type="text/javascript">
        var xsize = 436,
            ysize = 322,
            jcrop_api;
        jQuery(function ($) {


            $('#target').Jcrop({
                bgFade: true,
                bgOpacity: .2,
                setSelect: [0, 0, 436, 322],
                //   onChange: select,
                //   onSelect: select,
                aspectRatio: xsize / ysize
            }, function () {
                jcrop_api = this;
            });

            $('#uploadImg').change(function () {
                // var fileName = this.files[0].name;
                // var suffix = fileName.split('.').slice(-1).toString();
                // console.log(suffix);
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#target').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);

            })
        });
    </script>
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
</head>

<body>
    <img id="target" alt="[Jcrop Example]" />
    <input type="file" id="uploadImg">
</body>

</html>

下载地址

http://deepliquid.com/content/Jcrop.html



如果这篇文章对你有所帮助,可以通过下边的“打赏”功能进行小额的打赏。

本网站部分内容来源于互联网,如有侵犯版权请来信告知,我们将立即处理。


来说两句吧