jquery 图片上传裁剪插件

发表于 2020-07-17 11:50:06   |   下载附件   |   字体:
图片裁剪Jquery图片裁剪图片裁剪上传图片本地上传裁剪上传裁剪

使用案例代码,请在上方下载


js代码


jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
    boundx,
    boundy,
    // Grab some information about the preview pane
    $preview = $('.preview-pane'),
    $pcnt = $('.preview-pane .preview-container'),
    $pimg = $('.preview-pane .preview-container img'),
    xsize = $pcnt.width(),                  // 目标裁剪区宽
    ysize = $pcnt.height();                 // 目标裁剪区高
    console.log('init',[xsize,ysize]);

// 创建裁剪对象
$('#target').Jcrop({
    allowSelect: true,                  // 允许重新选择裁剪区
    allowMove: true,                    // 允许移动选择裁剪区
    allowResize: true,                  // 允许重新选择
    // minSize: [ 80, 80 ],             // 最小选择区
    // maxSize: [ 200, 200 ],           // 最大选择区
    aspectRatio: xsize / ysize,         // 缩放比例 4/3 或 0 自定义
    onChange: updatePreview,
    onSelect: updatePreview
},function(){
    // Use the API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];
    // Store the API in the jcrop_api variable
    jcrop_api = this;

    // 创建初始裁剪区
    jcrop_api.animateTo([50,50,250,250]);

    // Move the preview into the jcrop container for css positioning
    $preview.appendTo(jcrop_api.ui.holder);
});

// 移动处理函数
function updatePreview(c){
    if (parseInt(c.w) > 0){
        var rx = xsize / c.w;
        var ry = ysize / c.h;
        console.info({
            width: Math.round(rx * boundx) + 'px',              // 目标图片宽
            height: Math.round(ry * boundy) + 'px',             // 目标图片高
            marginLeft: '-' + Math.round(rx * c.x) + 'px',      // 裁剪位置 X点
            marginTop: '-' + Math.round(ry * c.y) + 'px'        // 裁剪位置 Y点
        })
        $pimg.css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
    }
};

// 清空裁剪对象
$('#unhook').click(function(e) {
    // Destroy Jcrop widget, restore original state
    jcrop_api.destroy();
    return false;
});


HTML


<!-- 原始图片承载区 -->
<div class="original-area">
    <img src="demos/demo.jpg" id="target" alt="[Jcrop Example]"/>
</div>
<!-- 目标图片裁剪区 -->
<div class="preview-pane">
    <div class="preview-container">
        <img src="demos/demo.jpg" class="jcrop-preview" alt="Preview"/>
    </div>
</div>
<!-- 清空裁剪对象 -->
<div class="unhook" id="unhook">清空裁剪对象</div>