js 图像裁剪_使用smartcrop.js进行重点图像裁剪

痛定思痛。 2023-02-22 03:38 44阅读 0赞

js 图像裁剪

Images tend to make any page more engaging, especially when done right.  The problem is that automating image creation and sizing can be a very difficult task, especially when the image is uploaded by a user -- who knows what format, size, and resolution the image will be.  Hell, who knows if they're actually sending you an image for that matter (though validating that they've uploaded an image isn't too difficult).

图片往往会使任何页面更具吸引力，尤其是正确处理时。 问题在于，自动创建图像并调整其大小可能是一项非常困难的任务，尤其是当图像由用户上传时，该用户知道图像的格式，大小和分辨率。 地狱，谁知道他们是否真的向您发送了图片(尽管验证他们是否已上传图片并不太困难)。

I recently found out about [smartcrop.js][], a brilliant JavaScript utility which analyzes the contents of an image and finds the focal point (a face, for example) of any image.  It's easy to use and does an outstanding job picking up on the important part of an image.

我最近发现了[smartcrop.js][] ，这是一个出色JavaScript实用程序，可以分析图像的内容并找到任何图像的焦点(例如，人脸)。 它易于使用，并且在处理图像的重要部分方面做得非常出色。

Check out a few images I put through the [smartcrop.js testbed][smartcrop.js_testbed]:

看看我通过[smartcrop.js测试床][smartcrop.js_testbed]放置的一些图像：

![format_png][]

![format_png 1][]

![format_png 2][]

![format_png 3][]

I wont bother showing the super simple code sample -- you can view that on the [smartcrop.js repo][smartcrop.js].  And be sure to play around on the [testbed][smartcrop.js_testbed].  I love recognizing developers for their feats and this is some incredible work by Jonas Wagner!

我不会花时间显示超级简单的代码示例-您可以在[smartcrop.js存储库中][smartcrop.js]查看它。 并确保在[测试平台][smartcrop.js_testbed]上玩耍。 我喜欢承认开发人员的壮举，这是乔纳斯·瓦格纳(Jonas Wagner)所做的令人难以置信的工作！

> 翻译自: [https://davidwalsh.name/smart-crop][https_davidwalsh.name_smart-crop]

js 图像裁剪

[smartcrop.js]: https://github.com/jwagner/smartcrop.js/
[smartcrop.js_testbed]: http://29a.ch/sandbox/2014/smartcrop/examples/testbed.html
[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9iYWNrZ3JvdW5kLXNpemUtMi5qcGc?x-oss-process=image/format,png
[format_png 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9iYWNrZ3JvdW5kLXNpemUtMi1zbWFydGNyb3AucG5n?x-oss-process=image/format,png
[format_png 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9iYWNrZ3JvdW5kLXNpemUtMy5qcGc?x-oss-process=image/format,png
[format_png 3]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9iYWNrZ3JvdW5kLXNpemUtMy1zbWFydGNyb3AucG5n?x-oss-process=image/format,png
[https_davidwalsh.name_smart-crop]: https://davidwalsh.name/smart-crop