ホームページ呼び出し画像を作成する場合、ホームページの画像位置は通常デザイナーによって指定されているため、最新のリリース画像を呼び出す場合は不明なため、固定サイズの画像を取得する必要がある場合があります。顧客がアップロードする画像の割合を決定する方法がない場合、フロントエンド ページの作成者は通常、画像のオーバーフローを制御するために img 要素の高さと幅を固定する方法を使用します。ただし、画像の比率が必要な比率ではない場合、呼び出し後に画像が変形してしまい、ページの美しさに大きく影響します。解決策の 1 つは、元の比率に合わせて画像を拡大縮小することです。画像を拡大縮小するとどうしても空白が生じ、その空白を色で埋めることになります。高さは非常に高いですが幅は平均的で、1:1 の画像に圧縮された場合、圧縮後に画像は基本的に表示されません。
ここでの私の解決策は、画像を固定サイズにトリミングすることです。画像は変形せず、空白部分は常に引き伸ばされて埋められます。bcastr を使用したことがある友人は、bcastr を知っているはずです。画像呼び出しが変形しないようにします。固定サイズの出力画像フレームの場合、ソース画像は次のような状況になります。
1: 出力する画像の高さと幅がソース画像の高さと幅より小さいと判断 $new_width
2: 出力する画像の高さと幅が元の画像の高さと幅よりも大きいと判断して書きます $new_width>$src_width && $new_height>$src_width
3:前者と後者の2種類、つまりズームアウトしながらズームインする状況を除外し、同等の判定を加える
1と2は関数の処理コードが全く同じなので1つの処理文にまとめられます
/*
*説明: 画像を変形せずに任意のサイズの画像にトリミングする機能です
* パラメータの説明: 処理する画像のファイル名、生成された新しい画像の保存ファイル名、生成された新しい画像の幅、生成された新しい画像の高さを入力します
* 作者: smallchicken
* 時間 2008-12-18
*/
// 任意のサイズの画像を取得し、欠けている部分を変形や空白を残さずに引き伸ばします
function my_image_resize($src_file, $dst_file , $new_width , $new_height) {
if($new_width <1 || $new_height <1) {
echo "パラメータの幅または高さのエラー!";
exit();
}
if(!file_exists($src_file)) {
echo $src_file . " は存在しません!";
exit();
}
//画像タイプ
$type=exif_imagetype($src_file);
$support_type=array(IMAGETYPE_JPEG , IMAGETYPE_PNG , IMAGETYPE_GIF);
if(!in_array($type, $support_type,true)) {
echo "このタイプの画像はサポートされていません! jpg、gif、または png のみをサポートします";
exit();
}
//画像をロード
スイッチ($type) {
ケース IMAGETYPE_JPEG :
$src_img=imagecreatefromjpeg($src_file);
休憩;
ケース IMAGETYPE_PNG :
$src_img=imagecreatefrompng($src_file);
休憩;
ケース IMAGETYPE_GIF :
$src_img=imagecreatefromgif($src_file);
休憩;
デフォルト:
echo "画像の読み込みエラー!";
exit();
}
$w=imagesx($src_img);
$h=imagesy($src_img);
$ratio_w=1.0 * $new_width / $w;
$ratio_h=1.0 * $new_height / $h;
$ratio=1.0;
// 生成される画像の高さ、幅は元の画像より小さくなったり、大きくなったりするのですが、大きく拡大、大きく縮小するのが原則です（縮小率は小さくなります）
if( ($ratio_w < 1 && $ratio_h < 1) || ($ratio_w > 1 && $ratio_h > 1)) {
if($ratio_w < $ratio_h) {
$ratio = $ratio_h ; // ケース 1、幅の比率が高さ方向より小さい場合、高さの比率基準に従ってトリミングまたは拡大します
}その他{
$ratio = $ratio_w ;
}
// アスペクト比がターゲット要件を正確に満たす中間一時画像を定義します
$inter_w=(int)($new_width / $ratio);
$inter_h=(int) ($new_height / $ratio);
$inter_img=imagecreatetruecolor($inter_w , $inter_h);
imagecopy($inter_img, $src_img, 0,0,0,0,$inter_w,$inter_h);
// 最大辺の長さをターゲット画像として一時画像を生成 $ratio 比率
// 新しい画像を定義します
$new_img=imagecreatetruecolor($new_width,$new_height);
imagecopyresampled($new_img,$inter_img,0,0,0,0,$new_width,$new_height,$inter_w,$inter_h);
スイッチ($type) {
ケース IMAGETYPE_JPEG :
imagejpeg($new_img, $dst_file,100); // 画像を保存します
休憩;
ケース IMAGETYPE_PNG :
imagepng($new_img,$dst_file,100);
休憩;
ケース IMAGETYPE_GIF :
imagegif($new_img,$dst_file,100);
休憩;
デフォルト:
休憩;
}
} // 1の場合は終了
// 2 対象画像の片側が元画像より大きく、片側が元画像より小さい まず通常の画像を拡大してからトリミングします
// =if( ($ratio_w <1 && $ratio_h > 1) || ($ratio_w >1 && $ratio_h <1) )
他{
$ratio=$ratio_h>$ratio_w? $ratio_h : $ratio_w // 大きい方の値を取得します
// ターゲット画像と同じ高さまたは幅の大きな画像を中央に定義し、元の画像を拡大します
$inter_w=(int)($w * $ratio);
$inter_h=(int) ($h * $ratio);
$inter_img=imagecreatetruecolor($inter_w , $inter_h);
//元の画像を拡大縮小した後にトリミングします
imagecopyresampled($inter_img,$src_img,0,0,0,0,$inter_w,$inter_h,$w,$h);
// 新しい画像を定義します
$new_img=imagecreatetruecolor($new_width,$new_height);
imagecopy($new_img, $inter_img, 0,0,0,0,$new_width,$new_height);
スイッチ($type) {
ケース IMAGETYPE_JPEG :
imagejpeg($new_img, $dst_file,100); // 画像を保存します
休憩;
ケース IMAGETYPE_PNG :
imagepng($new_img,$dst_file,100);
休憩;
ケース IMAGETYPE_GIF :
imagegif($new_img,$dst_file,100);
休憩;
デフォルト:
休憩;
}
}//if3
}//関数を終了します
?>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
