Take notes on some recent image-related actions.

Convert file to Base64

Scene: Get an image of type File, if you preview it directly in HTML? Here’s how to take advantage of the new FEATURES of HTML5 to convert images to Base64 form for display. There are two ways:

  • Method 1: Use url.createObjecturl ()
<! DOCTYPE html> <html> <head> <title>base</title> </head> <body> <inputtype="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
	window.onload = function () {
		let $img = document.getElementById('img')
		file.onchange = function (e) {
			console.log(e.target.files[0])
			let file = e.target.files[0]
			let fileUrl = window.URL.createObjectURL(file)
			$img.src = fileUrl
			img.onload = function() {// reclaim url.revokeobjecturl (fileUrl)}}} </script> </body> </ HTML >Copy the code

When the image is selected, the generated IMG SRC is similar to “blob:null/ 4304d4F3-C13B-43E8-83F6-8C80426520FF “, which will display the image normally.

  • Method 2: Use filereader.readasdataURL ()
<! DOCTYPE html> <html> <head> <title>base</title> </head> <body> <inputtype="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
	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)
			fr.readAsDataURL(file)
			fr.onload = function () {
			 	$img.src = this.result
			}
		}
	}
</script>
</body>
</html>
Copy the code

The SRC of the img tag will look like this: “data:image/jpeg; Base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA = =, can display properly.

Canvas to DataURL

Scene: An image drawn by the Canvas and displayed elsewhere in the HTML. The method here is to put the canvas output as a Dataurl in the IMG tag.

let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')
Copy the code

Canvas is converted to bloB object

Scene: How to upload images generated by Canvas to Qiniuyun or server? The answer is to print the Canvas as a Blob object, so you can manipulate it like a File object.

 canvas.toBlob(function (blobObj) {
	console.log(blobObj)
})
Copy the code

Blob objects display images

Scenario: The obtained image is in Blob format, how is it displayed in HTML? The answer is to convert the Blob object to the form of a DataUrl.

canvas.toBlob(function (blobObj) {
	let imgSrc = window.URL.createObjectURL(blobObj)
	document.getElementById('img').src = imgSrc
})
Copy the code

Download the image represented by the DataURL

Scene: An image in HTML displayed as a DataURL. Can I download it locally? The answer is to use an A tag and set the Download property to simulate a click.

function downloadImg () {
	let aLink = document.createElement('a')
	aLink.download = 'fileName.png'Href = dataURL alink.click ()}Copy the code

Refer to the article

  • Operations on files and binary data
  • Understand DOMString, Document, FormData, Blob, File, ArrayBuffer data types
  • Front-end image to base64, to format, to BLOb, upload summary