ps如何批量改图片大小

什么是批量改图片大小

批量改图片大小意味着将大量图片的尺寸统一调整为特定的大小或比例。这在许多情况下都是必要的，如在网站开发中，需要将大量的图片缩小到特定的尺寸以提高网站的性能。

function resizeImage($file, $w, $h, $crop = false) {
  list($width, $height) = getimagesize($file);
  $r = $width / $height;
  if ($crop) {
    if ($width > $height) {
      $width = ceil($width-($width*abs($r-$w/$h)));
    } else {
      $height = ceil($height-($height*abs($r-$w/$h)));
    }
    $newwidth = $w;
    $newheight = $h;
  } else {
    if ($w/$h > $r) {
      $newwidth = $h*$r;
      $newheight = $h;
    } else {
      $newheight = $w/$r;
      $newwidth = $w;
    }
  }
  $src = imagecreatefromstring(file_get_contents($file));
  $dst = imagecreatetruecolor($newwidth, $newheight);
  imagecopyresampled($dst, $src, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
  return $dst;
}

如何批量改变图片大小

要批量改变图片大小，我们可以遍历图片文件夹中的所有图片，并使用上述函数将它们调整为所需的大小或比例。

$dir = '/path/to/images/';
$newDir = '/path/to/new/images/';
if (!is_dir($newDir)) {
  mkdir($newDir);
}

$files = scandir($dir);
foreach($files as $file) {
  // skip current and parent directory
  if ($file == '.' || $file == '..') {
    continue;
  }
  $image = resizeImage($dir.$file, 500, 500);
  imagejpeg($image, $newDir.$file, 100);
  imagedestroy($image);
}

如何在HTML页面中显示调整大小的图片

一旦我们已经调整了图片的大小，并将其保存在新文件夹中，我们可以将这些图片直接嵌入到HTML页面中。

<img src="/path/to/new/images/image.jpg" width="500" height="500">

如何使用JavaScript预览调整大小后的图片

在某些情况下，我们希望用户能够在网页上对调整大小的图片进行预览。为此，我们可以使用JavaScript来创建预览。

let previewDiv = document.querySelector('#preview');
let input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  let file = input.files[0];
  let reader = new FileReader();
  reader.onload = function(e) {
    let img = new Image();
    img.src = e.target.result;
    img.onload = function() {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      canvas.width = 500;
      canvas.height = 500;
      ctx.drawImage(img, 0, 0, 500, 500);
      previewDiv.appendChild(canvas);
    }
  }
  reader.readAsDataURL(file);
});