使用自定义矩形 JQuery 裁剪画布内的图像
我有一个包含图像内部的 Canvas 元素（画布具有与图像相同的尺寸），我想使用选择矩形裁剪此图像！对于我的项目，我使用 javascript 的框架 JQuery，并且我正在搜索一个在画布上实现自定义选择矩形的插件！ 有人知道一个插件可以做到这一点（我创建了很多实现此功能但仅在元素上的插件）？ 如果不是，在 Canvas 元素上实现自定义矩形的方法是什么？
我希望得到您的答复！
I have a Canvas element with inside an image ( the canvas has the same dimension of the image), i want to crop this image using a selection rectangle! For my project i use the javascript's framework JQuery and i'm searching a plugin that implementing a custom selection rectangle on canvas!
Anyone know one plugin that do this (I founded a lot of plugin that implements this functionality but only on elements)?
If no, what is the way to implement a custom rectangle on Canvas elements?
I hope in yours answers!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您是否尝试过使用
Fabric.js生成矩形帆布 ？did you tried using
Fabric.jsto generate rectangle on Canvas ?通常，绘制到画布上的所有内容都会自动更改画布内容。如果你想用鼠标绘制一个矩形而不破坏底层画布，通常的方法是在原始画布上添加一个额外的（临时的）画布。新画布具有透明背景，因此底层画布完全可见。
现在，您在临时画布上绘制矩形（其尺寸与原始画布相同）并存储选择的坐标以在原始画布上应用裁剪过程。
请在此处查看我的示例：http://jsbin.com/apitak/4
Usually, everything that is drawn onto a canvas will automatically change the canvas content. If you want to draw a rectangle with the mouse without destroying the underlying canvas, the usual way is to add an additional (temporary) canvas on top of the original canvas. The new canvas has a transparent background, so the underlying canvas is fully visible.
Now you draw the rectangle on the temporary canvas (which has the same dimensions as the origianl) and store the coordinates of the selection to apply the crop process on the original.
Please see my example here: http://jsbin.com/apitak/4