js图片转base64,并压缩

<input type="file" accept="image/*" id="fileInput">

<img id="preview" alt="图片预览">

<input type="hidden" id="imgbase64"/>

const fileInput = document.getElementById('fileInput');

const fileInput = document.getElementById('fileInput'); 

const preview = document.getElementById('preview'); 

// 监听文件选择 

fileInput.addEventListener('change', function(e) { 

    const file = e.target.files[0]; 

    if (!file) return; 

    // 创建文件阅读器 

    const reader = new FileReader(); 

    // 读取完成回调 

    reader.onload = function() {

       preview.style.display = 'block'; 

       preview.src = reader.result; 

       // 获取完整Base64 

       const base64 = reader.result;

      //压缩base64

      compressBase64(base64).then((compressedBase64)=>{
        $("#imgbase64").val(compressedBase64);
      });

      }; 

     // 读取文件 

    reader.readAsDataURL(file);

});

async function compressBase64(base64, quality = 0.8, maxWidth = 800) {
  // 1. 加载图片
  const img = new Image();
  img.src = base64;
  await img.decode(); // 等待图片加载

  // 2. 计算缩放比例
  const scale = Math.min(maxWidth / img.width, 1);
  const canvas = document.createElement('canvas');
  canvas.width = img.width * scale;
  canvas.height = img.height * scale;

  // 3. 绘制到Canvas并压缩
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  
  // 4. 转换为压缩后的Base64
  return canvas.toDataURL('image/jpeg', quality);
}
php上传

/**
 * [将Base64图片转换为本地图片并保存]
 * @param  [Base64] $base64_image_content [要保存的Base64]
 * @param  [目录] $path [要保存的路径]
 */
function base64_image_content($base64_image_content,$path){
    //匹配出图片的格式
    if (preg_match('/^(data:s*image/(w+);base64,)/', $base64_image_content, $result)){
        $type = $result[2];
$filename = $path . date('Ymdhis').mt_rand(1000,99999).".{$type}";
        if (file_put_contents($filename, base64_decode(str_replace($result[1], '', $base64_image_content)))){
            return $filename;
        }else{
            return false;
        }
    }else{
        return false;
    }
}

test2025-03-20 15:47