使用JavaScript限制图片比例，非1:1图片触发页面跳转

直接上可运行的完整代码，核心逻辑是监听文件选择事件，读取图片尺寸判断比例，不符合1:1时触发页面跳转：

<input type="file" id="file" accept="image/gif, image/jpeg, image/png">

<script>
document.getElementById('file').addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 创建图片对象用于获取尺寸信息
  const img = new Image();
  img.onload = function() {
    const imgWidth = img.width;
    const imgHeight = img.height;
    
    // 判断是否为严格1:1比例
    if (imgWidth !== imgHeight) {
      // 替换成你实际需要跳转的目标地址
      window.location.href = 'https://your-target-url.com';
    }
  };
  // 将本地文件转为临时URL，供图片对象加载
  img.src = URL.createObjectURL(selectedFile);
});
</script>

关键细节说明 #

• 必须在img.onload回调里判断尺寸：图片加载完成后才能获取到真实的宽高，直接读取会得到0值
• 比例判断逻辑：如果需要容忍微小的比例误差（比如图片压缩导致的像素偏差），可以把判断改成Math.abs(imgWidth / imgHeight - 1) < 0.01，允许1%以内的误差
• URL.createObjectURL会创建本地临时URL，使用后可以通过URL.revokeObjectURL(img.src)释放资源，避免内存占用（如果页面不需要长期保留这个图片的话）

内容的提问来源于stack exchange，提问作者potato