- 浏览: 13634551 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
jcrop + asido
index.php
<?php $targ_w = 90; // thumb width size $targ_h = 89; // thumb height size $filename = $_GET['file']; if($filename) { $abs = '/home/www'; $fullsrc = '/public/images/'.$filename; // absolute path of original image uploaded $thumbsrc = '/public/images/thumb-'.$filename; // absolute path of thumb image you want $fullroot = $abs.$fullsrc; $thumbroot = $abs.$thumbsrc; if ($_SERVER['REQUEST_METHOD'] == 'POST') { include('asido/class.asido.php'); asido::driver('gd'); $i1 = asido::image($fullroot, $thumbroot); Asido::Crop($i1, $_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']); $i1->save(ASIDO_OVERWRITE_ENABLED); // if you want to make resize via scale automatically, or you can remove it $i1 = asido::image($thumbroot, $thumbroot); Asido::resize($i1, $targ_w, $targ_h, ASIDO_RESIZE_STRETCH); $i1->save(ASIDO_OVERWRITE_ENABLED); exit('<img src="'.$thumbsrc.'" /><br><a href="?file='.$filename.'&sv='.time().'">Create Thumbnail Again</a>'); } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Add a New WithStars</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="description" content="GLS PHP Framework"> <meta name="author" content="GLS"> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /> <meta http-equiv="expires" content="Thu, 01 Jan 1970 00:00:01 GMT" /> <meta http-equiv="expires" content="0" /> <script type="text/javascript" src="js/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="js/jcrop.js"></script> <script> jQuery(function($){ // Create variables (in this scope) to hold the API and image size var jcrop_api, boundx, boundy; $('#cropbox').Jcrop({ onChange: updatePreview, onSelect: updatePreview, aspectRatio: 1 },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; }); function updatePreview(c) { if (parseInt(c.w) > 0) { $('#x').val(c.x); $('#y').val(c.y); var rx = <?=$targ_w?> / c.w; var ry = <?=$targ_h?> / c.h; $('#w').val(c.w); $('#h').val(c.h); // if you don't want to preview, you can remove it $('#preview').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' }); } }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; }); </script> <link href="css/jcrop.css" rel="stylesheet" type="text/css" /> <body> <form method="post" onsubmit="return checkCoords();"> <table> <tr> <td><img src="<?=$fullsrc?>" id="cropbox" /></td> <td> <h4>Preview pane:</h4> <div style="overflow: hidden; width: <?=$targ_w?>px; height: <?=$targ_h?>px;border:#ccc 1px solid;padding:3px;"><img id="preview" src="<?=$fullsrc?>"/></div> <div style="margin:5px;"><input type="submit" name="crop" value="Crop Image" /></div> </td> </tr> </table> <div style="margin:5px;"> <input type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" /> <input type="hidden" id="w" name="w" /> <input type="hidden" id="h" name="h" /> </div> </form> </body> </html> <?php }?>
jcrop.css
.jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline { font-size: 0; position: absolute; background: white url('jcrop.gif') top left repeat; } .jcrop-vline { height: 100%; width: 1px !important; } .jcrop-hline { width: 100%; height: 1px !important; } .jcrop-handle { font-size: 1px; width: 7px !important; height: 7px !important; border: 1px #eee solid; background-color: #333; *width: 9px; *height: 9px; } .jcrop-tracker { width: 100%; height: 100%; } .custom .jcrop-vline, .custom .jcrop-hline { background: yellow; } .custom .jcrop-handle { border-color: black; background-color: #C7BB00; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
参考来源:
http://asido.info/about/features/
http://sourceforge.net/projects/asido/
http://deepliquid.com/content/Jcrop.html
http://code.google.com/p/jcrop/
转帖注明:justcoding http://justcoding.iteye.com/blog/1430913
- Asido_0.0.0.1a.zip (2 MB)
- 下载次数: 24
- tapmodo-Jcrop-5e58bc9.zip (218.1 KB)
- 下载次数: 21
发表评论
-
PHP: 在类(class)中加载动态函数, 变量函数或半变量函数 variable function/method
2016-09-03 07:54 7099最终实例在下方 以前 ... -
MySQL入门 (七) : 储存引擎与资料型态
2016-09-03 07:49 45021 表格与储存引擎 表格(table)是资料库中用来储存 ... -
MySQL入门 (六) : 字元集与资料库
2016-09-03 07:47 45051 Character Set与Collation 任何 ... -
MySQL入门 (五) : CRUD 与资料维护
2016-09-03 07:46 54191 取得表格资讯 1.1 DESCRIBE指令 「 ... -
MySQL入门 (四) : JOIN 与UNION 查询
2016-09-03 07:42 44411 使用多个表格 在「world」资料库的「countr ... -
PHP: 关键字global 和 超全局变量$GLOBALS的用法、解释、区别
2016-08-31 12:07 4980$GLOBALS 是一个关联数组,每一个变量为一个 ... -
MySQL入门 (三) : 运算式与函式
2016-08-31 12:01 4327运算式(expressions)已经 ... -
MySQL入门 (二) : SELECT 基础查询
2016-08-31 11:56 46331 查询资料前的基本概念 1.1 表格、纪录 ... -
MySQL入门 (一) : 资料库概论与MySQL的安装
2016-08-31 11:51 43951. 储存与管理资料 储存与管理资料一直是资讯应用上最基本 ... -
MySQL入门 (九) : 子查询 Subquery
2016-08-30 02:26 43961 一个叙述中的查询叙述 子查询(subquery)是一 ... -
PHP: 用readonly取代disabled来获取input值 submit a disabled input in a form could not ge
2016-08-30 02:21 2648The form is like below; <f ... -
PHP7革新与性能优化
2016-08-30 02:20 2096有幸参与2015年的PHP技 ... -
Mysql: 图解 inner join、left join、right join、full outer join、union、union all的区别
2016-08-18 06:03 3067对于SQL的Join,在学习起来可能是比较乱的。我们知道, ... -
Comet 反Ajax: 基于jQuery与PHP实现Ajax长轮询(LongPoll)
2016-08-18 06:00 1326传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上 ... -
PHP:ServerPush (Comet推送) 技术的探讨
2016-08-18 05:58 989PHP中Push(推送)技术的探讨 [http://vi ... -
PHP: 手把手编写自己的 MVC 框架实例教程
2016-08-16 05:33 17611 什么是MVC MVC模式(Model-View-Con ... -
PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD)
2016-07-29 12:55 1700原文: PHP5: mysqli 插入, 查询, 更新 ... -
MongoDB 教程索引 (附有视频)
2016-07-27 10:54 694MongoDB 教程索引 MongoDB 教程一: ... -
Node.js 模块之Nimble流程控制
2016-07-18 12:59 1038NodeJS异步的特性有时候 ... -
Node.js web应用模块之Supervisor
2016-07-18 12:56 2282在开发或调试Node.js应 ...
相关推荐
载波裁剪 CarrierWave扩展程序可使用带有预览功能的Jcrop插件裁剪上传的图像。安装安装最新的稳定版本: $[sudo] gem install carrierwave-crop在Rails中,将其添加到您的Gemfile中: gem 'carrierwave-crop'然后...
裁剪纸 Paperclip的一个简单扩展,可以使用jCrop裁剪上载的图像。... has_attached_file :avatar, :styles => {:thumb => '50x50', :medium => '100x100'} crop_attached_file :avatar 默认情况下,
python image_stitching.py --images images/scottsdale --output output.png --crop 1 其中images/scottsdale为待拼接图像所在文件夹,output.png为处理拼接保存后的图像;这里使用了相对路径,因为在工程根目录下...
crop!../assets/sprite.png?x=0&y=0&w=144&h=256' ) , ground : require ( 'file!crop!../assets/sprite.png?x=146&y=0&w=154&h=56' ) , score : require ( 'file!crop!../assets/sprite.png?x=146&y=58&w=113&h=...
python image_stitching.py --images images/scottsdale --output output.png --crop 1 其中images/scottsdale为待拼接图像所在文件夹,output.png为处理拼接保存后的图像;这里使用了相对路径,因为在工程根目录下...
【使用方法】python image_stitching.py --images images/scottsdale --output output.png --crop 1其中images/scottsdale为待拼接图像所在文件夹,output.png为处理拼接保存后的图像;这里使用了相对路径,因为在...
都是前端的代码,下载即可访问,请打开文件"crop.html" 详细描述见:http://ask.csdn.net/questions/253809
GBS-SNP-CROP最新版本v.4.1(2019年10月6日)介绍在GBS SNPÇ阿灵- [R eferenceöptional P ipeline(GBS-SNP-CROP)经由的顺序的顺序执行集成了定制解析和过滤用公知的,核实生物信息学工具程序,给用户完全访问...
import ImageCrop from "@/components/image-crop/" const app = createApp(App) app.use(ImageCrop); app.mount('#app ') 在对应的页面使用 <ImageCrop :aspectRatio="裁切比例,不用此参数自由裁切" :src="原图...
kitti mini data object crop 数据是mini 版KITTI激光雷达数据集保留图像视野内的点云,已经将图片视野范围外点云加以剔除,含20个训练点云文件和5个测试点云文件。crop点云裁剪过程请参考:...
Crop Type Classification by Simultaneous Use of Satellite Images of Different Resolutions
react-native-image-crop-picker iOS / Android图像选择器,支持相机,视频,可配置的压缩,多张图像和裁剪结果重要说明如果您使用的是react-native react-native-image-crop-picker iOS / Android支持摄像机,视频...
安装npm i react-image-crop --save用法包括主要的js模块: import ReactCrop from 'react-image-crop' ; 包括dist/ReactCrop.css或ReactCrop.scss 。 import 'react-image-crop/dist/ReactCrop.css' ;// or scss:...
一个基于和的本地图片裁剪插件。 ####License: ###为什么需要这玩意 目前很多的图片上传、裁剪都是基于服务器端的。比如Jcrop,在选择好图片后仅仅是做了一个裁剪的UI,然后... previewW: 400, // 预览宽度(高度自
crop_images_clf
var imgURL = NSURL(string: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Steve_Jobs_Headshot_2010-CROP.jpg/220px-Steve_Jobs_Headshot_2010-CROP.jpg") 步骤 2. 通过“NSURLRequest”创建 URL ...
[图片动画]PHP+jQuery上传图片并裁切_jquery_php_crop.zip
jquery crop+java 裁剪上传图片,对图片缩放、移动、旋转、裁剪 上传到服务器。
crop_your_image 一个flutter插件,提供用于裁剪图像的“ Crop小部件”。 crop_your_image仅提供用于确定图像内部裁剪区域的最小UI。 每个应用程序开发人员都需要准备其他UI部分,例如“裁剪”按钮或“更改长宽比...