JS获取本地图片和网络图片的宽高尺寸和存储大小

左手的ㄟ右手 2023-02-24 03:43 91阅读 0赞

###### *最新更新时间：2020年07月08日09:13:28* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：图片作为一种记录信息的载体，比文本更加生动，比视频更加精简，在日常生活中的用处很大。作为前端开发人员，操作图片的场景非常多，本文记录读取本地图片的宽高尺寸和存储大小，以及获取网络图片的宽高尺寸和存储大小。

#### 读取本地图片 ####

*  html

<input
    	type="file"
    	onChange={(e)=>{this.onChange(e)}}
    	className={styles.getImg}
    	title={this.state.title}
    	id="fileinput"
    	ref='onChange'
    	accept="image/*"
    	// capture="camera"
    />

*  JS

//input 标签的原生 change 事件
    onChange(e){ 
    	let file = e.currentTarget.files[0];//File
    	//用户取消操作
    	if(file == undefined){ 
    		return
    	}
    	console.log(file.constructor);//ƒ File() { [native code] }
    	console.log(file.name);
    	console.log(file.size/1024);// kb 图片容量
    	File2Base64(file);
    }
    function File2Base64(file){ 
    	let fr = new FileReader();
    	//如果下面的语句执行失败，需要放入 setTimeout 异步处理
    	fr.readAsDataURL(file);
    	fr.onload=function(e) { 
    		console.log(this.result);// base64
    		console.log(e.target.result);// base64
    		let base64 = e.target.result;// data:image/jpeg;base64,/9j/4AAQSkZJ
    		console.log(base64.constructor);//ƒ String() { [native code] }
    		getWH(base64);
    	}
    }
    function getWH(base64){ 
    	var img = new Image();
        img.src = base64;
        img.onload = function() { 
        	//图片尺寸
    		console.log(img.width,img.height);
    	}
    }

#### 读取网络图片 ####

*  注意：如果不设置`img.setAttribute('crossorigin', 'anonymous')`允许跨域加载，调用`canvas.toDataURL('image/jpeg', 1)` 会报错`Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.`
 *  DOM

*  JS

#### 参考资料 ####

*  [FileReader - Web API 接口参考 | MDN][FileReader - Web API _ _ MDN]
 *  [Blob - Web API 接口参考 | MDN][Blob - Web API _ _ MDN]
 *  [File - Web API 接口参考 | MDN][File - Web API _ _ MDN]
 *  [ArrayBuffer - JavaScript | MDN][ArrayBuffer - JavaScript _ MDN]
 *  [Uint8Array - JavaScript | MDN][Uint8Array - JavaScript _ MDN]
 *  [HTMLCanvasElement - toDataURL() - toBlob()][HTMLCanvasElement - toDataURL_ - toBlob]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[FileReader - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
[Blob - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
[File - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/File
[ArrayBuffer - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
[Uint8Array - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
[HTMLCanvasElement - toDataURL_ - toBlob]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460