アップロードする前に

この3分のチュートリアルでは、我々は、既存のファイルアップロードコードに変更を加えることなく私たちのサーバーにアップロードしている前に、画像をトリミングするCropGuide、JavaScriptイメージのクロッパーを使用します.
ファイルアップロードフィールドを持つフォームがすでに設定されていると仮定します.
我々の目標は、既存のコードを変更することなく、このフィールドに画像編集を追加することです.

なぜユーザーの作物の画像を助ける？

画像のアップロードをスピードアップする.より低いイメージサイズは、より速いアップロード、改善されたアップロード安定性とより少ないディスク使用に終わります;

より良いユーザー生成コンテンツを受信します.いくつかのガイダンスユーザーと画像の重要な部分をトリミングすることができます

イメージアップロード摩擦を低下させる.エンドユーザーはデザイナーではありません.イメージが我々の望ましいアスペクト比でないか、最大のファイルサイズより大きいならば、彼らはそれを必ずしも固定する方法を知っていません;

我々はアップロードする前に画像を最適化する前に、我々はより良いイメージを得るだけでなく、我々はまた、欲求不満から私たちのフォームを終了するより少ないユーザーがあるため、より多くの画像を得る.

作物画像へのCropGuideの使用

このチュートリアルではCropGuide JavaScriptイメージのトリミングソリューションとして.
cropguideは以下のようになります.

作物のアスペクト比を実施する

最小画像サイズを必要とする

自動的に最大サイズに画像をスケーリング;

画像の圧縮や画像形式の変換;

イメージの向きの問題を修正する

インストールは数分しかかかりません.

We create a CropGuide account

我々は、cropGuideを追加<script> 我々のウェブページへ

完了!

CropGuideは現在、自動的に各ファイルのアップロードを傍受し、ユーザーにイメージエディタを提供しています.我々は、CropGuideダッシュボードにイメージ要件を設定することができます.
重要:画像はCropGuideにアップロードされません、画像編集は、プライバシーとパフォーマンスに最適ですブラウザで発生します.
これは私たちのコードがどのように見えるかです.

<!-- The existing file input somewhere in our form -->
<input type="file" />

<!-- The script tag we just added to our page -->
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC">
</script>

Try out the image editor here
CropGuideは基本的なファイル入力要素で動作しますが、同様に高度なJavaScriptファイルのアップロードライブラリと同様に動作します.

ラッピング

我々は、我々のウェブページの上で一つのスクリプトタグを挿入することによって、我々のウェブサイトへのイメージ収穫を加えました.必要はありません任意のサーバーロジックを編集したり、JavaScriptを調整、私たちの多くの時間を節約.
我々のユーザーがより簡単に画像をアップロードすることができます、より高品質の画像とより多くの画像のアップロード結果.我々は、サーバー上の時間を修正画像の問題を保存し、ユーザーが自分のイメージを準備支援.