サイトのページの切り抜きとサイズ変更

Habraの検索を行ってみると、JavaScript / HTML / CSSエンジンが画像のサイズを変更するための既成のソリューションをまだ提供していないことがわかりました。 したがって、写真ホスティングで一般的な編集機能を部分的に実装するサイトのモジュールを紹介します。



ビジネスへ

外部では、アイデアは次のようになります。





なんで?

タスクは、可能であれば、すべての画像のサイズ変更(サイズ変更)および切り取り(切り取り)を処理できる普遍的なスクリプトを作成することでした。 これは時々必要です:

*大きな画像からプレビューを切り取る「スマート」な場合、

*アップロードした写真からアバターを準備するには、

*さて、なぜクロップとサイズ変更が必要なのか、あなたには決してわかりません:-)



それがどのように見え、どのように機能するかを見てみましょう



設置

fc-cropresizer.zipアーカイブ(97Kb)をダウンロードし、目的のディレクトリに解凍します。 配布パッケージのサイズが大きくても心配する必要はありません。demo-photoフォルダーには、 デモを表示した後に安全に削除できる画像があります。



解凍されたアーカイブ内の写真のあるフォルダーに加えて、次のものが見つかります。

* imgcropresizeフォルダー-トリミングのサイズ変更のためにいくつかの小さな画像が直接含まれています。

* demo.html-同じデモ。

* fc-cropresizer.css-スタイル。

* fc-cropresizer.js-エンジン。

*ライセンス-BSD ライセンス



js-ファイルとcss-ファイルに接続し、画像のあるフォルダーが必要な場所に置いて開始します



使用する

便利な場所(頭でも体でも構いません)で、小さなJavaScriptスクリプトを作成して、トリミングを初期化します。



cropresizer.getObject("photo1").init({

cropWidth : 150,

cropHeight : 150,

onUpdate : function() {}

});








cropresizerは、使用される名前空間です。 getObjectメソッドにはパラメーターとして画像の識別子(id)が渡され、 initメソッドはJSON形式のオブジェクトを唯一の引数として受け取り、そのプロパティは必要に応じてトリミングのサイズ変更を構成します。 これらの特性を考慮してください:



* cropWidth-デフォルトは100で、トリミング領域の長さをピクセル単位で設定します。

* cropHeight-高さも同じです。

* onUpdateは唯一の必須プロパティ(より正確にはメソッド)です。 これは、これを介してトリミングサイズ変更オブジェクトのすべてのプロパティにアクセスできる関数を値として受け取ります。 3番目のデモ例では、必要なすべてのデータが最終ページのテキストブロックに表示されます。 このメソッドは、通常、非表示のフォームフィールドに名前を付けたものを保持するために不可欠です。



画像サイズは、幅/高さの比率を維持しながら(デフォルトで)、保存せずに変更できます。この場合、 saveProportions:falseプロパティを設定する必要があります。



スクリプトのメカニズムをさらに詳しく見て、いくつかの有用なポイントを強調しましょう。

1)スクリプトは要素を識別子で受け取り、固定サイズのコンテナ(DIV)にラップします。 したがって、画像のサイズを小さくすると、次のすべてのHTMLコンテンツは移動しませんが、そのまま残ります。 this.withContainer:falseプロパティを設定することにより、この機能を無効にできます。

2)ご存知のように、マウスの左ボタンを押したままカーソルを移動すると、ページのコンテンツが強調表示されます。これは、トリミング/サイズ変更にはあまり役立ちません。 この効果を得るために、ページ全体が、z-index:100の透明な絶対配置された「フィルム」で覆われており、選択できません。 ただし、このフィルムではページ上のリンクをクリックできないため、 this.stopSelection:false使用してリンクを上げるか、フィルムをオフにする必要があります 。 IEおよび-moz-user-select:noneでおなじみの無効なonSelectStart = "return false;"を使用することもできます。Geckoではnoneです。

3) cropBackgroundおよびshowCropSizeオプションを使用して、切り抜き領域の背景(デフォルトは白)を変更したり、切り抜きサイズの表示を無効にしたりできます。



適合性

スクリプトのパフォーマンスがチェックインされます。

-IE6、IE7-WIN;

-FF1.5、FF2-勝ち;

-Mozilla 1.7.1-勝ち;

-Safari 3 WIN;

-Opera 9+ WIN、ただし、保護された「フィルム」にもかかわらず、コンテンツの選択があります。

-FF2 NIX;

-Opera NIX;

-FF3.0RC2 MacOS X 10.5.3

-Safari 3.1.1 MacOS X 10.5.3

-Opera 9.27 MacOS X 10.5.3、WINでの選択と同じ。



旧バージョン(9番目以下)のOperaでは、問題があります。 戦います。



計画について

*トリミング領域のサイズ変更を可能にします

*画像のサイズを変更する作業

*あなたが提供するもの:-)



Crosspost Crop&Resize from your image from http://webew.ru/




All Articles