jQuery头像裁剪工具jcrop用法实例攻略

什么是jQuery头像裁剪工具jcrop?

jQuery头像裁剪工具jcrop是一款基于jQuery的简单易用的图片裁剪插件，可以通过该插件对图片进行任意比例的裁剪或固定比例裁剪。该插件支持的图片格式有jpg、png、gif等。

如何使用jcrop?

第一步：导入jcrop所需的 js 和 css

在网页中导入jcrop所需的的jquery.min.js、jquery.Jcrop.min.css和jquery.Jcrop.min.js三个文件。

<head>
    <meta charset="UTF-8">
    <title>jcrop实例</title>
    <link rel="stylesheet" href="jquery.Jcrop.min.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.Jcrop.min.js"></script>
</head>

第二步：添加图片和裁剪区域

在网页中添加需要裁剪的图片和裁剪区域。

<body>
    <img src="img/demo.jpg" id="target" />

    <div id="preview-pane">
        <div class="preview-container">
            <img src="img/demo.jpg" class="jcrop-preview" />
        </div>
    </div>

    <script>
        $(function() {
            $('#target').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords,
                setSelect: [100, 100, 300, 300]
            });
        });

        function updateCoords(c) {
            $('.jcrop-preview').css({
                width: Math.round(100 / c.w * $('#target').width()) + 'px',
                height: Math.round(100 / c.h * $('#target').height()) + 'px',
                marginLeft: '-' + Math.round(100 / c.w * c.x) + 'px',
                marginTop: '-' + Math.round(100 / c.h * c.y) + 'px'
            });
        };
    </script>
</body>

第三步：设置裁剪选项

在网页中设置jcrop的裁剪选项，如裁剪比例、裁剪后的图片大小等。

$('#target').Jcrop({
    aspectRatio: 1,
    onSelect: updateCoords,
    setSelect: [100, 100, 300, 300]
});

aspectRatio：裁剪比例，如1表示宽高比为1:1，2/3表示宽高比为2:3。

onSelect：裁剪完成后的回调函数，可获取裁剪后的四个角的坐标。

setSelect：设置裁剪区域的初始值，格式为[x1,y1,x2,y2]。

第四步：刷新预览区域

在裁剪完成后，需要刷新预览区域的图片显示。

function updateCoords(c) {
    $('.jcrop-preview').css({
        width: Math.round(100 / c.w * $('#target').width()) + 'px',
        height: Math.round(100 / c.h * $('#target').height()) + 'px',
        marginLeft: '-' + Math.round(100 / c.w * c.x) + 'px',
        marginTop: '-' + Math.round(100 / c.h * c.y) + 'px'
    });
};

示例说明

示例一：基本裁剪

在裁剪前需要加载一个图片，通过设置aspectRatio来自由选择裁剪区域，完成裁剪后可以获得裁剪后的图片坐标和裁剪后的宽高尺寸。

<body>
    <img src="img/demo.jpg" id="target" />

    <script>
        $(function() {
            $('#target').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords
            });
        });

        function updateCoords(c) {
            console.log(c); // 裁剪后的图片坐标
            console.log(c.w + 'x' + c.h); // 裁剪后的宽高尺寸
        };
    </script>
</body>

示例二：固定比例裁剪

在裁剪前需要加载一个图片，通过设置aspectRatio为图片的宽高比例来实现固定比例裁剪。

<body>
    <img src="img/demo.jpg" id="target" />

    <script>
        $(function() {
            $('#target').Jcrop({
                aspectRatio: 2 / 3, // 设置固定比例为2:3
                onSelect: updateCoords
            });
        });

        function updateCoords(c) {
            console.log(c); // 裁剪后的图片坐标
            console.log(c.w + 'x' + c.h); // 裁剪后的宽高尺寸
        };
    </script>
</body>

结语

通过以上的步骤，我们可以很方便的使用jQuery头像裁剪工具jcrop，实现自己想要的头像裁剪效果，希望本篇文章可以为大家提供一些帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载) - Python技术站

jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)