[問題] 關於jcrop的問題

看板Ajax作者kheric (原來我一直在逞強)時間14年前 (2011/03/31 00:07)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串1/1

以下是小弟參照網路上範例寫的小弟需要做一個上傳圖片後再讓使用者用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