游客

标题:jQuery头像裁剪 Image Cropper 生成图片
正文:






SyntaxHighlighter.config.clipboardSwf = ’/Js/Syntax/clipboard.swf’;
SyntaxHighlighter.all();

left top width height
实现原理：
这是一个基于jQuery UI的图像裁剪前端脚本。
利用Draggable和Resizable两个插件让虚线框可移动可缩放，并且设置相关参数移动界限、初始大小和位置、等比缩放、事件。

给大图加CSS透明度，于是它就灰了。虚线框内清晰图其实就是CSS背景background。以大图左上角为原点，计算出虚线框左上角的坐标offset（就叫坐标吧- -|）。虚线框的坐标值跟背景图position值刚好相反。当移动或缩放时计算一下，然后改变背景图的位置position，这样效果就出来了。

再说下预览图，首先预览图跟实际图是不一样大的，它们之间存在一个比率n（所设预览图大小除实际图大小）。前面已经计算过虚线框的坐标了，预览图的scrollTop和scrollLeft乘比率n刚好跟这个坐标值相等，当移动或缩放时计算一下，然后改变预览图的位置scrollTop和scrollLeft，OK了。

当移动完或缩放完时顺便将虚线框的坐标和宽高记录到隐藏域传给后台程序，剩下工作归后台技术。


一些碎片：
html如下：<form id="setFace" name="setFace" method="post" action="">
<div id="imgBox"><img id="faceImg&q
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页