akellbl4/transform-image-by-canvas.html

## transform-image-by-canvas.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<style>
		body {
			margin: 0;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
			font-size: 14px;
		}
		.form {
			margin: 0.5vw;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
		}
		.item {
			width: 9vw;
			margin: 0.5vw;
		}
		.image {
			width: 100%;
		}
		.caption {
			width: 100%;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>

	<form class="form" id="form">
		<input id="uploader" type="file" multiple="multiple" name="files[]" accept="image"/>
		<button id="downloadAll">Download all</button>
		<button id="reset">Reset</button>
	</form>
	<div id="container" class="container"></div>

	<script>
		(() => {
			let links = []
			const form = document.getElementById('form')
			const uploader = document.getElementById('uploader')
			const downloadAllButton = document.getElementById('downloadAll')
			const resetButton = document.getElementById('reset')
			const container = document.getElementById('container')

			form.addEventListener('submit', (evt) => {
				evt.preventDefault()
			})

			uploader.addEventListener('change', (evt) => {
				const drawImage = drawer()

				reset()

				Array.from(evt.target.files).forEach(async (file) => {
					const image = await loadImage(file)
					const data = drawImage(image)
					const item = createItemElement({ data, name: file.name })

					links.push(item)
					container.appendChild(item)
				})
			})

			downloadAllButton.addEventListener('click', (evt) => {
				evt.preventDefault()

				links.forEach((link) => downloadImage(link))
			})

			resetButton.addEventListener('click', (evt) => {
				evt.preventDefault()

				reset(true)
			})

			async function loadImage(file) {
				const image = new Image()
				const url = URL.createObjectURL(file)

				return new Promise((resolve, reject) => {
					image.src = url
					image.addEventListener('load', (evt) => resolve(image))
					image.addEventListener('error', (evt) => reject(evt))
				})
			}

			function drawer() {
				const canvas = document.createElement('canvas')
				const context = canvas.getContext('2d')

				canvas.width = 1080
				canvas.height = 960

				return (image) => {
					// Image transformations
					context.clearRect(0, 0, 1080, 960)
					context.fillStyle = '#000'
					context.fillRect(0, 0, 1080, 960)
					context.drawImage(image, 0, 0)

					return canvas.toDataURL()
				}
			}

			function createItemElement({ name, data }) {
				const image = new Image()
				const link = document.createElement('a')
				const figure = document.createElement('figure')
				const figureCaption = document.createElement('figcaption')

				image.src = data
				link.href = image.src
				link.download = name
				image.className = 'image'
				figure.className = 'item'
				figureCaption.className = 'caption'
				figureCaption.innerText = name

				figure.appendChild(image)
				figure.appendChild(figureCaption)
				link.appendChild(figure)

				return link
			}

			function downloadImage(link) {
				const evt = new MouseEvent('click', {
					view: window,
					bubbles: true,
					cancelable: true
				})

				link.dispatchEvent(evt)
			}

			function reset(clearInput) {
				if (links.length > 0) {
					links = []
					container.innerHTML = ''

					if (clearInput) {
						uploader.value = ''
					}
				}
			}
		})()
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<style>
	body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 14px;
	}
	.form {
	margin: 0.5vw;
	}
	.container {
	display: flex;
	flex-wrap: wrap;
	}
	.item {
	width: 9vw;
	margin: 0.5vw;
	}
	.image {
	width: 100%;
	}
	.caption {
	width: 100%;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	</style>

	<form class="form" id="form">
	<input id="uploader" type="file" multiple="multiple" name="files[]" accept="image"/>
	<button id="downloadAll">Download all</button>
	<button id="reset">Reset</button>
	</form>
	<div id="container" class="container"></div>

	<script>
	(() => {
	let links = []
	const form = document.getElementById('form')
	const uploader = document.getElementById('uploader')
	const downloadAllButton = document.getElementById('downloadAll')
	const resetButton = document.getElementById('reset')
	const container = document.getElementById('container')

	form.addEventListener('submit', (evt) => {
	evt.preventDefault()
	})

	uploader.addEventListener('change', (evt) => {
	const drawImage = drawer()

	reset()

	Array.from(evt.target.files).forEach(async (file) => {
	const image = await loadImage(file)
	const data = drawImage(image)
	const item = createItemElement({ data, name: file.name })

	links.push(item)
	container.appendChild(item)
	})
	})

	downloadAllButton.addEventListener('click', (evt) => {
	evt.preventDefault()

	links.forEach((link) => downloadImage(link))
	})

	resetButton.addEventListener('click', (evt) => {
	evt.preventDefault()

	reset(true)
	})

	async function loadImage(file) {
	const image = new Image()
	const url = URL.createObjectURL(file)

	return new Promise((resolve, reject) => {
	image.src = url
	image.addEventListener('load', (evt) => resolve(image))
	image.addEventListener('error', (evt) => reject(evt))
	})
	}

	function drawer() {
	const canvas = document.createElement('canvas')
	const context = canvas.getContext('2d')

	canvas.width = 1080
	canvas.height = 960

	return (image) => {
	// Image transformations
	context.clearRect(0, 0, 1080, 960)
	context.fillStyle = '#000'
	context.fillRect(0, 0, 1080, 960)
	context.drawImage(image, 0, 0)

	return canvas.toDataURL()
	}
	}

	function createItemElement({ name, data }) {
	const image = new Image()
	const link = document.createElement('a')
	const figure = document.createElement('figure')
	const figureCaption = document.createElement('figcaption')

	image.src = data
	link.href = image.src
	link.download = name
	image.className = 'image'
	figure.className = 'item'
	figureCaption.className = 'caption'
	figureCaption.innerText = name

	figure.appendChild(image)
	figure.appendChild(figureCaption)
	link.appendChild(figure)

	return link
	}

	function downloadImage(link) {
	const evt = new MouseEvent('click', {
	view: window,
	bubbles: true,
	cancelable: true
	})

	link.dispatchEvent(evt)
	}

	function reset(clearInput) {
	if (links.length > 0) {
	links = []
	container.innerHTML = ''

	if (clearInput) {
	uploader.value = ''
	}
	}
	}
	})()
	</script>
	</body>
	</html>