ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript スマート画像カット スクリプトを理解する

JavaScript スマート画像カット スクリプトを理解する

coldplay.xixi
coldplay.xixi転載
2020-06-17 16:05:391857ブラウズ

JavaScript スマート画像カット スクリプトを理解する

写真は、特に適切に扱えばページをより魅力的にすることができますが、問題は、写真の加工が面倒で、その作成やトリミングが一般の人には難しいことです。特に、アバター写真やロゴ写真など、さまざまな画像形式やサイズの画像をアップロードするユーザーにとって、これは難しい作業であると言われています。

私は最近、画像をインテリジェントに処理するための興味深いブラウザサイド JavaScript スクリプト、smartcrop.js を発見しました。このスクリプトは、画像のコンテンツをインテリジェントに分析し、画像の主なコンテンツやポートレートや顔などを識別できます。写真を簡単に適切なサイズに切り抜くことができ、人物、顔、被写体などの重要な部分を際立たせたり、不要な部分を切り取ったりすることができます。

次は、Lady GaGa の 2 枚の写真を使用したサンプルです。smartcrop.js を使用して処理した後、2 枚の写真はアバター写真に非常に適しています。写真内のアバター真ん中に置きます。

#デモを見る

SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});
// {topCrop: {x: 300, y: 200, height: 200, width: 200}}

詳細な紹介については、公式ドキュメントを参照するか、ソース コードをダウンロードして動作原理を理解することができます。

推奨チュートリアル: 「

JavaScript 基本チュートリアル

以上がJavaScript スマート画像カット スクリプトを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はwebhek.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。