作者kheric (原来我一直在逞强)
看板Ajax
标题[问题] 关於jcrop的问题
时间Thu Mar 31 00:07:00 2011
以下是小弟 参照网路上范例 写的
小弟需要做一个 上传图片後 再让使用者用jcrop选取自己想要的范围 送出
但是因此 图片长宽比例会不固定 (有时图片位置会跑掉 或比例跑掉)
小弟研究了一下，关键点可能在 下面黄色处
但是 小弟对其运算法 不是很了解~
因此想请问板上大大，若图形 长宽比例不固定，
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px'
这部份要怎麽设定才好 ? 感谢
<html>
<head>
<script src="
http://i-wander.appspot.com/f/libs/jCrop/js/jquery.min.js"></script
>
<script src="
http://i-wander.appspot.com/f/libs/jCrop/js/jquery.Jcrop.js"></scri
pt>
<link rel="stylesheet" href="
http://i-wander.appspot.com/f/libs/jCrop/css/jquery
.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
$('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
minSize:[110,74]
});
var $preview = $('#preview');
function showPreview(coords)
{
if (parseInt(coords.w) > 0)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$preview.css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
};
});
</script>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="
http://i-wander.appspot.com/f/blog/imgs/jCrop/lazyMilu.jpg" id="cropbo
x" />
</td>
<td>
<div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
<img id="preview" src="
http://i-wander.appspot.com/f/blog/imgs/jCrop/lazyMilu.jp
g"/>
</div>
</td>
</tr>
</table>
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 111.240.158.120
1F：推 a517981:500和370要改成你的图片的长宽 或用js去抓 04/04 03:48