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

本地通过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>