2012-04-16 9 views
2

私は長年の解決策を探しており、どこにも見つけることができません。私はexempleのために、このhtmlコードがある場合:html5 canvasオブジェクトをjCropプラグインで処理するには?

<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/jquery.Jcrop.js" type="text/javascript"></script> 
</head> 
<table> 
<img src="picture.jpg" id="picture" style="display:none"/> 
<tr> 
<td> 
<canvas id="rotate"></canvas> 
</td> 
</tr> 
</table> 
<p> 
    <strong>Rotate Image: </strong> 
    <a href="javascript:;" id="resetImage">Reset Image</a> 
    <a href="javascript:;" id="rotate90">90&deg;</a> 
</p> 
</html> 

を、私はいくつかのJavaScriptを使用して画像を回転させたい機能を回転させ、その後、私はjCropプラグインとそれらをトリミングする必要があります。 jCropプラグインでキャンバスオブジェクトを処理する方法はありますか?私はこれをそうするためにtryied、しかし働いていません:

jQuery(function($) { 
    $('#rotate').Jcrop({ 
    bgColor: 'black', 
bgOpacity: .8, 
setSelect: [ 10, 10, 200, 300 ], 
    aspectRatio: 2/3 
    }); 
}); 

誰かが私を助けてくれますか?

答えて

0

私はimgareaSelect、pixastic、jQueryライブラリを使って長年のうちに解決しました。問題は今、スクリプトが少しゆっくりと動いているので、私はいくつかの最適化をしなければならないということです。作業スクリプトhereが表示されます。

リモートピクチャを任意の方向に回転させて反転させることができ、ローカルピクチャでさらに画像処理を行うことができます。