如何使用 jCrop 插件处理 html5 画布对象？
Posted
技术标签:
【中文标题】如何使用 jCrop 插件处理 html5 画布对象？【英文标题】：How to handle html5 canvas object with jCrop plugin? 【发布时间】：2012-04-16 17:53:25 【问题描述】：我正在寻找很长时间的解决方案，但我找不到任何地方。如果我有这个 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°</a>
</p>
</html>
我想用一些 javascript 旋转功能旋转图像，然后我需要用 jCrop 插件裁剪它们。有没有办法用 jCrop 插件处理画布对象。我试着这样做，但没有工作：
jQuery(function($)
$('#rotate').Jcrop(
bgColor: 'black',
bgOpacity: .8,
setSelect: [ 10, 10, 200, 300 ],
aspectRatio: 2 / 3
);
);
有人可以帮帮我吗？
【问题讨论】：
【参考方案1】：所以我在很长一段时间后使用 imgareaSelect、pixastic 和 jQuery 库解决了这个问题。现在的问题是脚本运行有点慢，所以我必须做一些优化。你可以看到工作脚本here。
我们可以对远程图片进行任意方向的旋转和翻转，并对本地图片进行更多的图像处理。
【讨论】：
以上是关于如何使用 jCrop 插件处理 html5 画布对象？的主要内容，如果未能解决你的问题，请参考以下文章