先来看看简单Demo效果图

Jcrop介绍

Jcrop是一个jQuery插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。
特点：
1、对所有图片均unobtrusively（无侵入的，保持DOM简洁）
2、支持宽高比例锁定
3、支持 minSize / maxSize设置
4、支持改变选区或移 动选区时的回调（Callback）
5、支持用键盘微调选 区
6、通过API创建互 动，比如动画效果
7、支持CSS样式

详细请自行百度jcrop

Demo介绍

这个Demo选择整合了jcrop的截取图片插件，
上传图片还是使用file表单提交，php后台处理截图保存。

模块目录如下：
├─controller （控制器）
├─uppict （上传图片暂存位置）
├─userpic （截图保存位置）
└─views （视图）

视图代码croppic.php如下：

<code class=" hljs xml"><span class="php"><span class="hljs-preprocessor"><?php</span><span class="hljs-comment">/*** 20150520 11:50* 作者：Ro* 修改时间 20150522 13:50* 修改内容 合并上传和截取图片功能*<a style="color:transparent">来@源gao*daima.com搞@代#码网</a><strong>搞gaodaima代码</strong>/</span><span class="hljs-comment">//上传文件类型列表</span><span class="hljs-variable">$uptypes</span>=<span class="hljs-keyword">array</span>(    <span class="hljs-string">'image/jpg'</span>,    <span class="hljs-string">'image/jpeg'</span>,    <span class="hljs-string">'image/png'</span>    );<span class="hljs-preprocessor">?></span></span><span class="hljs-tag"><<span class="hljs-title">html</span>></span><span class="hljs-tag"><<span class="hljs-title">head</span>></span>    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=utf-8"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/main.css"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/demos.css"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/jquery.Jcrop.css"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/uppic.css"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>头像上传<span class="hljs-tag"></<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">head</span>></span><span class="hljs-tag"><<span class="hljs-title">body</span>></span>    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container"</span>></span>        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>            <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"span12"</span>></span>                <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"jc-demo-box"</span>></span>                    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clear_float"</span>></span>                        <span class="php"><span class="hljs-preprocessor"><?php</span>                         <span class="hljs-keyword">if</span>(<span class="hljs-keyword">isset</span>(<span class="hljs-variable">$_GET</span>[<span class="hljs-string">'name'</span>]))                        {                            <span class="hljs-keyword">echo</span><span class="hljs-string">'                            .<span>$_GET</span>[<span>'name'</span>].<span>'"%20%20id="target"%20class="float"/>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.<span>$_GET</span>[<span>'name'</span>].<span>'"%20%20id="real_img"%20style="display:none;"/>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.<span>$_GET</span>[<span>'name'</span>].<span>'"%20class="jcrop-preview%20float"%20alt="Preview"%20/>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'</span>;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<span>else</span>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<span>echo</span><span>'%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20                                                        <div id="preview-pane">                                <div class="preview-container">                                                                    </div>                            </div>                            '</span>;                        }                        <span class="hljs-preprocessor">?></span></span>                    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>                    <span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">action</span>=<span class="hljs-value">"http://<?php echo $_SERVER['HTTP_HOST'];?>/uppic/controller/croppic.php?mothed=up"</span> <span class="hljs-attribute">enctype</span>=<span class="hljs-value">"multipart/form-data"</span> <span class="hljs-attribute">method</span>=<span class="hljs-value">"post"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"upform"</span>></span>                        上传文件:                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"upfile"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"file"</span>></span>                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"上传图片"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-large btn-inverse"</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>></span>                        允许上传的文件类型为:<span class="php"><span class="hljs-preprocessor"><?</span>=implode(<span class="hljs-string">', '</span>,<span class="hljs-variable">$uptypes</span>)<span class="hljs-preprocessor">?></span></span>                    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>                    <span class="php"><span class="hljs-preprocessor"><?php</span>                     <span class="hljs-keyword">if</span>(<span class="hljs-keyword">isset</span>(<span class="hljs-variable">$_GET</span>[<span class="hljs-string">'name'</span>]))                    {                        <span class="hljs-keyword">echo</span> <span class="hljs-string">'                        <form action="http://'</span>.<span class="hljs-variable">$_SERVER</span>[<span class="hljs-string">'HTTP_HOST'</span>].<span class="hljs-string">'/uppic/controller/croppic.php?mothed=crop&name='</span>.<span class="hljs-variable">$_GET</span>[<span class="hljs-string">'name'</span>].<span class="hljs-string">'" method="post" onsubmit="return checkCoords();">                        '</span>;                    }                    <span class="hljs-keyword">else</span>                    {                        <span class="hljs-keyword">echo</span> <span class="hljs-string">'                        <form action="http://'</span>.<span class="hljs-variable">$_SERVER</span>[<span class="hljs-string">'HTTP_HOST'</span>].<span class="hljs-string">'/uppic/controller/croppic.php?mothed=crop&name=default.jpg" method="post" onsubmit="return checkCoords();">                        '</span>;                    }                    <span class="hljs-preprocessor">?></span></span>                        <span class="hljs-comment"><!---ecms -ecms  记录截图坐标和宽高 --></span>                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"hidden"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"x"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"x"</span> /></span>                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"hidden"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"y"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"y"</span> /></span>                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"hidden"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"w"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"w"</span> /></span>                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"hidden"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"h"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"h"</span> /></span>                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"保存"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-large btn-inverse"</span>/></span>                    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>                <span class="hljs-tag"></<span class="hljs-title">div</span>></span>            <span class="hljs-tag"></<span class="hljs-title">div</span>></span>        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>    <span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery.Jcrop.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/crop.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"></<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">html</span>></span></code>

喜欢 (0)赏

[搞代码]

分享 (0)