关于javascript:js本地通过input上传的jpg文件查看文件的size-width-height方便对上传的素材进行限制

28次阅读

共计 3390 个字符，预计需要花费 9 分钟才能阅读完成。

本地通过 input 上传的 jpg 文件，查看文件的 size width height；size：50k, 通过 file 对象获取；width，height 通过给 img 标签增加 src 地址（1.jpg 2data url 3blob 长期地址）获取 img 对象的属性

参考相干文档：

区别 URL.createObjectURL() 和 FileReader.readAsDataURL()
https://blog.csdn.net/qq_3667…

辨别 file 对象和 blob 对象和 blob 长期地址

src 地址（1.jpg 2data url 3blob 长期地址）能够赋值三个格局的值

第一段代码控制台输入：

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>https://blog.csdn.net/qq_3667…</title>
</head>

window.onload = function () {let $img = document.getElementById('img')
  file.onchange = function (e) {console.log('file 对象', e.target.files[0])
    let file = e.target.files[0]   // 返回 file 对象
    let fileUrl = window.URL.createObjectURL(file)   // 内存中生成一个长期的链接
    console.log('fileUrl 内存生成长期地址', fileUrl)
    $img.src = fileUrl
    img.onload = function () {console.dir($img)
      console.log(fileUrl, $img.width, $img.height);
      // 手动回收
      URL.revokeObjectURL(fileUrl)  // 用完当前手动发出
    }
  }
}

</script>

window.onload = function () {let $img = document.getElementById('img')
  file.onchange = function (e) {console.log(e.target.files[0])
    let file = e.target.files[0]
    const fr = new FileReader(file)   // 会返回一个 data: URL 格局的字符串以示意所读取文件的内容
    fr.readAsDataURL(file)
    console.log('fr.readAsDataURL(file)', fr.result)
    fr.onload = function () {console.dir($img);
      $img.src = this.result
    }
  }
}

</script>

// Base64 to Blob 
function dataURLtoBlob(dataUrl) {var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while (n--) {u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

function getBase64Image(img) {var canvas = document.createElement("canvas");
  $("canvas").hide();
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
  var dataURL = canvas.toDataURL("image/" + ext);   // 会返回一个 data: URL 格局的字符串以示意所读取文件的内容
  console.log('dataURL', dataURL)
  let bb = dataURLtoBlob(dataURL);
  console.log('bb', bb);
  return dataURL;
}
var imgLink = "https://pic1.zhimg.com/80/v2-2b9a444aa9af5f3e1ccb8e24518649ca_720w.jpg?source=1940ef5c";
var tempImage = new Image();
tempImage.src = imgLink;
tempImage.crossOrigin = "*";
tempImage.onload = function () {var base64 = getBase64Image(tempImage);
  console.log(base64);
  $("#resultImg").attr("src", base64);
}

</script>

function getBase64Image(img) {var canvas = document.createElement("canvas");
  $("canvas").hide();
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
  // var dataURL = canvas.toDataURL("image/" + ext);   // 会返回一个 data: URL 格局的字符串以示意所读取文件的内容
  canvas.toBlob(function (blobObj) {console.log('blobObj', blobObj)  // 返回 blob 对象
    let imgSrc = window.URL.createObjectURL(blobObj)
    document.getElementById('img').src = imgSrc
  })
  return dataURL;
}
var imgLink = "https://pic1.zhimg.com/80/v2-2b9a444aa9af5f3e1ccb8e24518649ca_720w.jpg?source=1940ef5c";
var tempImage = new Image();
tempImage.src = imgLink;
tempImage.crossOrigin = "*";
tempImage.onload = function () {var base64 = getBase64Image(tempImage);
  console.log(base64);
  $("#resultImg").attr("src", base64);
}

</script>

</body>

</html>

正文完