2

私は長い間解決策を探していますが、どこにも見つかりません。たとえば、このhtmlコードがある場合：

<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 プラグインでキャンバス オブジェクトを処理する方法はありますか。私はこれをそのようにしようとしましたが、うまくいきませんでした:

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

誰か助けてくれませんか？

4

1 に答える 1

0

それで、imgareaSelect、pixastic、およびjQueryライブラリを使用して、長い時間をかけて解決しました。問題は、スクリプトの動作が少し遅いことです。そのため、最適化を行う必要があります。ここで実際のスクリプトを見ることができます。

リモート画像を任意の方向に回転および反転し、ローカル画像でさらに画像処理を行うことができます。

于 2012-05-01T18:50:57.943 に答える