精选文章 使用Jcrop(jQuery)在运行时裁剪图像

使用Jcrop(jQuery)在运行时裁剪图像

作者:cuken7684698822 时间: 2020-08-06 03:21:33
cuken7684698822 2020-08-06 03:21:33

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)










Jcrop - Crop Behavior

Preview pane:

使用Jcrop(jQuery)在运行时裁剪图像1
使用Jcrop(jQuery)在运行时裁剪图像2

An example of crop script. 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 Crop Image button, the form will be submitted and a 200x200 thumbnail will be dumped to the browser. Try it!

Jcrop - Animations

使用Jcrop(jQuery)在运行时裁剪图像3

Animating Selections. 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!

Jcrop - Custom styling

使用Jcrop(jQuery)在运行时裁剪图像4

So maybe you like the color blue. 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).










Jcrop - Crop Behavior

Preview pane:

使用Jcrop(jQuery)在运行时裁剪图像5
使用Jcrop(jQuery)在运行时裁剪图像6

An example of crop script. 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 Crop Image button, the form will be submitted and a 200x200 thumbnail will be dumped to the browser. Try it!

Jcrop - Animations

使用Jcrop(jQuery)在运行时裁剪图像7

Animating Selections. 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!

Jcrop - Custom styling

使用Jcrop(jQuery)在运行时裁剪图像8

So maybe you like the color blue. 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).

步骤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)




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

Also we need source image for our project:

另外,我们需要项目的源图像:

使用Jcrop(jQuery)在运行时裁剪图像9
使用Jcrop(jQuery)在运行时裁剪图像10
现场演示

结论 (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/

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:内容组织上的票数

下一篇:使用Juicebox创建平面设计的相册

您可能感兴趣

  • 论文盘点:人脸表情识别解析

    ©PaperWeekly 原创 · 作者|孙裕道 学校|北京邮电大学博士生 研究方向|GAN图像生成、情绪对抗样本生成 引言 面部表情是人类表达情感状态和意图的最有力、最自然、最普遍的信号之一。由于其在机器人、医疗、驾驶员疲劳监测和许多其他人机交互系统中的实际重要性,人们对自动面部表情分析进行了大量的研究。在计算机视觉和机器学习领域,各种各样的面部表情识别系统已经被用来编码来自面部表情的表情...

  • Spark 3.0 新特性 之 自适应查询与分区动态裁剪

    Spark憋了一年半的大招后,发布了3.0版本,新特性主要与Spark SQL和Python相关。这也恰恰说明了大数据方向的两大核心:BI与AI。下面是本次发布的主要特性,包括性能、API、生态升级、数据源、SQL兼容、监控和调试等方面的升级。 本次主要整理了性能方面的优化,包括了自适应查询与动态分区裁剪。 1 自适应查询 AQE,Adaptive Query Execution,说的简单点...

  • 音视频技术开发周刊 | 154

    每周一期,纵览音视频技术领域的干货。 新闻投稿:contribute@livevideostack.com。 内容推荐 5G时代探索互动立体视频信息承载的新可能 5G时代对于视频行业的发展和业务形态将是一个重要的助推,但5G时代带来的改变不只是带宽提升和延迟降低这两个最直接的因素。本次LiveVideoStackCon 2020线上峰会我们邀请到了阿里巴巴高级算法专家盛骁杰,他将介绍在5G时...

  • [转]秒杀全网!研发、运营必备实用工具网站

    目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 12、音乐 13、神辅助工具 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不...

  • V4L2&&Gstreamer媒体控制工具(五)

    媒体控制器 现代的片上系统(SoC)设备以内部硬件模块的方式支持广泛的功能,这导致采用多种方式互连SoC中的功能,从而改变了V4L设备的内容。 媒体控制器内核API旨在将有关媒体设备和捕获设备的详细信息公开给用户空间,以使它们可以在运行时以动态和复杂的方式互连。 媒体控制器设备将实体公开给媒体控制器框架。每个实体具有一个或多个源极焊盘和一个或多个汇聚焊盘。您可以使用媒体控制器内核API(即通...

  • 介绍 5 款免费在线图像工具

    在追求轻量化的时代,「轻装上阵」成为许多人的生活态度和行事选择,日常工作中遇到的任务和难题除了可以通过专业软件和应用应对,互联网实际上也提供了另外一种解决方式:借助各式各样的网页工具,工作生活中遇到的许多难题其实也可以更加快速有效地得到解决。 1、图片压缩工具:TinyPNG 下载地址:https://tinypng.com 作为最知名的在线图片压缩工具,TinyPNG 通过使用智能有损压缩...

  • 太牛了!98 年后浪科学家,首次挑战图片翻转不变性假设,一作拿下 CVPR 最佳论文提名​...

    出品 | AI科技大本营(ID:rgznai100) 刚刚结束的CVPR大会,总共收到6424篇论文中,仅有26篇获得最佳论文提名,占0.4%的比例。 其中,康奈尔大学大四学生林之秋,以第一作者身份提交的“Visual Chirality”(视觉手性)一文获得最佳论文提名,成为唯一一个还在本科阶段,年龄最小的第一作者获奖者。 论文中,林之秋等人首次挑战了常规神经网络训练中图片”翻转不变性“(...

  • .Net Core有哪些不错的开源项目?

    作者:布莱恩特 链接:https://www.zhihu.com/question/295227280/answer/1333085582 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 卧槽,必须得推荐这几个.Net Core开源项目! 持续更新,如果你有好的.NET Core开源项目,也可以评论指出! 0.Masuit.Tools 包含一些常用的操作类,...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。