使用Jcrop（jQuery）在运行时裁剪图像

最新推荐文章于 2021-02-26 06:48:34 发布

cuke3186

最新推荐文章于 2021-02-26 06:48:34 发布

阅读量206

点赞数

文章标签： html css js jquery javascript ViewUI

原文链接：https://www.script-tutorials.com/image-crop-plugin-using-jcrop-jquery/

版权

Today we use jcrop api. During browsing the Internet I noticed one new good plugin which we can use to work with images. This is JCrop plugin, it can help us to perform different effect with images (as example highlight some objects using animation or zooming images. But main purpose is cropping. Here are samples and downloadable package:

今天，我们使用jcrop api。在浏览Internet期间，我注意到一个新的好插件，我们可以使用它来处理图像。这是JCrop插件，它可以帮助我们对图像执行不同的效果(例如，使用动画或缩放图像突出显示某些对象。但是主要目的是裁剪)。以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code with 3 samples.

这是我们的主页代码，包含3个示例。

templates / jcrop_main.html (templates/jcrop_main.html)

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.accordion.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/jcrop_main.js"></script>
<link rel="stylesheet" href="templates/css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.ui.accordion.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jcrop_main.css" type="text/css" />
<div class="jcrop_example">
    <div id="accordion" class="accordion">
        <h3><a href="#">Jcrop - Crop Behavior</a></h3>
        <div class="sample_1">
            <div style="margin-bottom:10px;">
                <h4>Preview pane:</h4>
                <div style="overflow: hidden; width: 200px; height: 200px;">
                    <img id="preview" src="files/image.jpg"/>
                </div>
            </div>
            <img src="files/image.jpg" id="cropbox1" />
            <form action="index.php" method="post" onsubmit="return checkCoords();">
                <div style="margin:5px;">
                    <label>X1 <input type="text" name="x" id="x" size="4"/></label>
                    <label>Y1 <input type="text" name="y" id="y" size="4"/></label>
                    <label>X2 <input type="text" name="x2" id="x2" size="4"/></label>
                    <label>Y2 <input type="text" name="y2" id="y2" size="4"/></label>
                    <label>W <input type="text" name="w" id="w" size="4"/></label>
                    <label>H <input type="text" name="h" id="h" size="4"/></label>
                </div>
                <div style="margin:5px;">
                    <input type="submit" value="Crop Image" />
                </div>
            </form>
            <p>
                <b>An example of crop script.</b> I decided to show form with values (you can keep it invisible if you want).
                Current sample ties several form values together with a event handler.
                Form values are updated as the selection is changed.
                Also current sample have preview area. So we will see our crop result.
                Aspect ratio disabled.
                If you press the <i>Crop Image</i> button, the form will be submitted and a 200x200 thumbnail will be dumped to the browser. Try it!
            </p>
        </div>
        <h3><a href="#">Jcrop - Animations</a></h3>
        <div class="sample_2">
            <img src="files/image.jpg" id="cropbox2" />
            <div style="margin: 20px 0;">
                <button id="anim1">Position 1</button>
                <button id="anim2">Position 2</button>
                <button id="anim3">Position 3</button>
                <button id="anim4">Position 4</button>
                <button id="anim5">Position 5</button>
            </div>
            <p>
                <b>Animating Selections.</b> We can use Jcrop API to set selections using animation (or immediately) to them. Here are several buttons are set to control the selection. User interactivity is still available. Try it!
            </p>
        </div>
        <h3><a href="#">Jcrop - Custom styling</a></h3>
        <div class="sample_3">
            <img src="files/image.jpg" id="cropbox3" />
            <p>
                <b>So maybe you like the color blue.</b>
                This demo shows how we can styling our Jcrop sample. This is easy - we will use addClass param to override styles. Also possible to set opacity using bgOpacity param (at current sample bgOpacity = 0.5). Also I used minSize param to determinate min size of selector (value = 50).
            </p>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.accordion.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/jcrop_main.js"></script>
<link rel="stylesheet" href="templates/css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.ui.accordion.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jcrop_main.css" type="text/css" />
<div class="jcrop_example">
    <div id="accordion" class="accordion">
        <h3><a href="#">Jcrop - Crop Behavior</a></h3>
        <div class="sample_1">
            <div style="margin-bottom:10px;">
                <h4>Preview pane:</h4>
                <div style="overflow: hidden; width: 200px; height: 200px;">
                    <img id="preview" src="files/image.jpg"/>
                </div>
            </div>
            <img src="files/image.jpg" id="cropbox1" />
            <form action="index.php" method="post" onsubmit="return checkCoords();">
                <div style="margin:5px;">
                    <label>X1 <input type="text" name="x" id="x" size="4"/></label>
                    <label>Y1 <input type="text" name="y" id="y" size="4"/></label>
                    <label>X2 <input type="text" name="x2" id="x2" size="4"/></label>
                    <label>Y2 <input type="text" name="y2" id="y2" size="4"/></label>
                    <label>W <input type="text" name="w" id="w" size="4"/></label>
                    <label>H <input type="text" name="h" id="h" size="4"/></label>
                </div>
                <div style="margin:5px;">
                    <input type="submit" value="Crop Image" />
                </div>
            </form>
            <p>
                <b>An example of crop script.</b> I decided to show form with values (you can keep it invisible if you want).
                Current sample ties several form values together with a event handler.
                Form values are updated as the selection is changed.
                Also current sample have preview area. So we will see our crop result.
                Aspect ratio disabled.
                If you press the <i>Crop Image</i> button, the form will be submitted and a 200x200 thumbnail will be dumped to the browser. Try it!
            </p>
        </div>
        <h3><a href="#">Jcrop - Animations</a></h3>
        <div class="sample_2">
            <img src="files/image.jpg" id="cropbox2" />
            <div style="margin: 20px 0;">
                <button id="anim1">Position 1</button>
                <button id="anim2">Position 2</button>
                <button id="anim3">Position 3</button>
                <button id="anim4">Position 4</button>
                <button id="anim5">Position 5</button>
            </div>
            <p>
                <b>Animating Selections.</b> We can use Jcrop API to set selections using animation (or immediately) to them. Here are several buttons are set to control the selection. User interactivity is still available. Try it!
            </p>
        </div>
        <h3><a href="#">Jcrop - Custom styling</a></h3>
        <div class="sample_3">
            <img src="files/image.jpg" id="cropbox3" />
            <p>
                <b>So maybe you like the color blue.</b>
                This demo shows how we can styling our Jcrop sample. This is easy - we will use addClass param to override styles. Also possible to set opacity using bgOpacity param (at current sample bgOpacity = 0.5). Also I used minSize param to determinate min size of selector (value = 50).
            </p>
        </div>
    </div>
</div>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

模板/css/jcrop_main.css (templates/css/jcrop_main.css)

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.jcrop_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:3.5em 10% 2em;padding:1em 2em 2em}
.jcrop_example p{font-size:90%}
.accordion h3{margin:0}
.accordion form{border:1px solid;background:#E6E6E6;border-color:#C3C3C3 #8B8B8B #8B8B8B #C3C3C3;margin:.5em 0;padding:.5em}
.accordion form label{margin-right:1em;font-weight:700;color:#900;font-size:10px}
.jcrop_custom .jcrop-vline,.jcrop_custom .jcrop-hline{background:#FF0}
.jcrop_custom .jcrop-handle{background-color:#FF4B4B;-moz-border-radius:5px;-webkit-border-radius:5px;border-color:#FFF}

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.jcrop_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:3.5em 10% 2em;padding:1em 2em 2em}
.jcrop_example p{font-size:90%}
.accordion h3{margin:0}
.accordion form{border:1px solid;background:#E6E6E6;border-color:#C3C3C3 #8B8B8B #8B8B8B #C3C3C3;margin:.5em 0;padding:.5em}
.accordion form label{margin-right:1em;font-weight:700;color:#900;font-size:10px}
.jcrop_custom .jcrop-vline,.jcrop_custom .jcrop-hline{background:#FF0}
.jcrop_custom .jcrop-handle{background-color:#FF4B4B;-moz-border-radius:5px;-webkit-border-radius:5px;border-color:#FFF}

模板/css/jquery.Jcrop.css，模板/css/jquery.ui.accordion.css和模板/css/jquery.ui.theme.css (templates/css/jquery.Jcrop.css, templates/css/jquery.ui.accordion.css and templates/css/jquery.ui.theme.css)

This is common files – styles of jquery elements. No need to give full code of that file here. It always available as a download package

这是常见文件-jquery元素的样式。无需在此处提供该文件的完整代码。它始终可以作为下载包获得

步骤3. JS (Step 3. JS)

Here are necessary JS files to our project.

这是我们项目的必要JS文件。

js / jcrop_main.js (js/jcrop_main.js)

$(function(){
    // for sample 1
    $('#cropbox1').Jcrop({ // we linking Jcrop to our image with id=cropbox1
        aspectRatio: 0,
        onChange: updateCoords,
        onSelect: updateCoords
    });
    // for sample 2
    var api = $.Jcrop('#cropbox2',{ // we linking Jcrop to our image with id=cropbox1
        setSelect: [ 100, 100, 200, 200 ]
    });
    var i, ac;
    // A handler to kill the action
    function nothing(e) {
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
    // Returns event handler for animation callback
    function anim_handler(ac) {
        return function(e) {
            api.animateTo(ac);
            return nothing(e);
        };
    };
    // Setup sample coordinates for animation
    var ac = {
        anim1: [0,0,40,600],
        anim2: [115,100,210,215],
        anim3: [80,10,760,585],
        anim4: [105,215,665,575],
        anim5: [495,150,570,235]
    };
    // Attach respective event handlers
    for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));
    // for sample 3
    $('#cropbox3').Jcrop({ // we linking Jcrop to our image with id=cropbox3
        setSelect: [ 20, 130, 480, 230 ],
        addClass: 'jcrop_custom',
        bgColor: 'blue',
        bgOpacity: .5,
        sideHandles: false,
        minSize: [ 50, 50 ]
    });
});
function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    var rx = 200 / c.w; // 200 - preview box size
    var ry = 200 / c.h;
    $('#preview').css({
        width: Math.round(rx * 800) + 'px',
        height: Math.round(ry * 600) + 'px',
        marginLeft: '-' + Math.round(rx * c.x) + 'px',
        marginTop: '-' + Math.round(ry * c.y) + 'px'
    });
};
jQuery(window).load(function(){
    $("#accordion").accordion({autoHeight: false,navigation: true});
});
function checkCoords() {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};

$(function(){
    // for sample 1
    $('#cropbox1').Jcrop({ // we linking Jcrop to our image with id=cropbox1
        aspectRatio: 0,
        onChange: updateCoords,
        onSelect: updateCoords
    });
    // for sample 2
    var api = $.Jcrop('#cropbox2',{ // we linking Jcrop to our image with id=cropbox1
        setSelect: [ 100, 100, 200, 200 ]
    });
    var i, ac;
    // A handler to kill the action
    function nothing(e) {
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
    // Returns event handler for animation callback
    function anim_handler(ac) {
        return function(e) {
            api.animateTo(ac);
            return nothing(e);
        };
    };
    // Setup sample coordinates for animation
    var ac = {
        anim1: [0,0,40,600],
        anim2: [115,100,210,215],
        anim3: [80,10,760,585],
        anim4: [105,215,665,575],
        anim5: [495,150,570,235]
    };
    // Attach respective event handlers
    for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));
    // for sample 3
    $('#cropbox3').Jcrop({ // we linking Jcrop to our image with id=cropbox3
        setSelect: [ 20, 130, 480, 230 ],
        addClass: 'jcrop_custom',
        bgColor: 'blue',
        bgOpacity: .5,
        sideHandles: false,
        minSize: [ 50, 50 ]
    });
});
function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    var rx = 200 / c.w; // 200 - preview box size
    var ry = 200 / c.h;
    $('#preview').css({
        width: Math.round(rx * 800) + 'px',
        height: Math.round(ry * 600) + 'px',
        marginLeft: '-' + Math.round(rx * c.x) + 'px',
        marginTop: '-' + Math.round(ry * c.y) + 'px'
    });
};
jQuery(window).load(function(){
    $("#accordion").accordion({autoHeight: false,navigation: true});
});
function checkCoords() {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};

js / jquery.Jcrop.min.js，js / jquery.min.js，js / jquery.ui.accordion.js和js / jquery.ui.widget.js (js/jquery.Jcrop.min.js, js/jquery.min.js, js/jquery.ui.accordion.js and js/jquery.ui.widget.js)

This is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package

这是常见文件–带有插件的jQuery库。无需在此处提供该文件的完整代码。它始终可以作为下载包获得

步骤4. PHP (Step 4. PHP)

Ok, here are all used PHP file:

好的，这都是用过PHP文件：

index.php (index.php)

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $targ_w = $targ_h = 200;
    $jpeg_quality = 90;
    $src = 'files/image.jpg';
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);
    header('Content-type: image/jpeg');
    imagejpeg($dst_r,null,$jpeg_quality);
    exit;
}
require_once('templates/jcrop_main.html');
?>

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $targ_w = $targ_h = 200;
    $jpeg_quality = 90;
    $src = 'files/image.jpg';
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);
    header('Content-type: image/jpeg');
    imagejpeg($dst_r,null,$jpeg_quality);
    exit;
}
require_once('templates/jcrop_main.html');
?>

步骤5.图片 (Step 5. Images)

Also we need source image for our project:

另外，我们需要项目的源图像：

现场演示

结论 (Conclusion)

Today we discussed about new interesting jquery plugin – Jcrop. Sure, that you will be happy to play with it. You can use this material to create your own scripts for your startups. Good luck!

今天，我们讨论了一个新的有趣的jquery插件– Jcrop。当然，您会很乐意使用它。您可以使用此材料为创业公司创建自己的脚本。祝好运！

翻译自: https://www.script-tutorials.com/image-crop-plugin-using-jcrop-jquery/

cuke3186

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Jcrop（jQuery）在运行时裁剪图像

Today we use jcrop api. During browsing the Internet I noticed one new good plugin which we can use to work with images. This is JCrop plugin, it can help us to perform different effect with images (a...
复制链接

扫一扫