没有画布可以进行Javascript图像裁剪吗？答案

【问题标题】：Javascript image crop possible without canvas?没有画布可以进行Javascript图像裁剪吗？
【发布时间】：2024-05-16 18:25:01
【问题描述】：

网络上有很多用于 Javascript 图像裁剪/调整大小的脚本和插件。 Some 使用 HTML5 画布裁剪某个区域并通过 DataUrl 将图像存储回客户端。但是没有画布我测试了jrac jquery 插件，但它最后只提供了裁剪坐标（x、y、宽度、高度）。图像上从未调用过实际的裁剪功能。

如何在 Javascript 图像对象上实际使用这些裁剪坐标？我可以只使用 CSS 来显示像被裁剪的图像，还是我可以实际从该图像中裁剪数据到 Javascript 中的新图像中？

在我看来，所有图像裁剪插件都只提供一个方便的 UI 来获取裁剪坐标，但实际的裁剪/调整大小必须在服务器端完成，图像被发送到 php 脚本，对吗？

我的问题和这个one一样，还没有回答。

【问题讨论】：

【解决方案1】：

在 javascript 中一切皆有可能（几乎一切）

要裁剪图像，您需要绕过 DOM 并内置图像处理 API 并自己解码图像。涉及很多额外的工作，但那里有一些帮助。在 github 上快速搜索找到了 jpg 和 png 格式的解码器/编码器Image decoders（我相信还有更多相关内容），因此只需做一些工作，您应该能够修改它们以进行一些裁剪。

【讨论】：

【解决方案2】：

你可以试试下面的，但是它使用Canvas进行渲染，

到目前为止，没有画布就没有好的库，因为很难捕获您选择的点并在没有图形卡的情况下处理成千上万的像素，

Canvas 只有使用显卡的功能

intel 和 firefox 正在为此做一些概念，以在 javascript 中引入并行处理

【讨论】：

【解决方案3】：

您需要的是一个库，用于将图像数据读取到二维像素数组（或在画布的情况下为一维像素数组），裁剪像素，然后将其写回压缩图像数据。

很抱歉，这个库就是画布。当然，您可以使用 css 来伪造它，但所有图像数据仍然存在，您只是选择只显示其中的一部分。

【讨论】：

如果您有任何服务器杠杆作用，您可以将图像和裁剪参数发送到服务器并让它发回裁剪的图像数据。
嗯，我明白了。所以我的假设是正确的，像 Jcrop、Jrac 等插件只为裁剪操作提供 UI，但没有能力在服务器端没有 php 的情况下对图像数据进行裁剪？
没错。除非它确实使用画布。但听起来你在这个项目中无法使用 Canvas？
我可以在我的项目中使用画布，但我只是想了解图像裁剪/调整大小的约束和概念。
很公平。我会尝试先使用客户端（画布）进行这种处理。不仅网络上的流量更少，而且画布也得到了硬件加速。使用 PHP，您将找不到任何硬件加速方法来裁剪图像，因此 CPU（而不是 GPU）将需要进行此计算，这将对您的服务器造成负担。祝你好运！