JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<input ref="upload" type="file" name="file-upload" accept="image/jpeg, image/png, image/gif"/>

JavaScript

class ImagePixels {

	constructor(image) {
		console.log(image)
		let self = this
		let promise = new Promise(function(resolve, reject) {
			console.log('Promise running')
			function loadImage(image) {
				console.log('Load image running')
				self.createCanvas(image)
				image.removeEventListener('load', loadImage)
				resolve(image)
			}
			const image = new Image()
			image.src = URL.createObjectURL(image)
			image.addEventListener('load', loadImage)
		})

		return promise
	}

	createCanvas(image) {
		const canvas = new OffscreenCanvas(image.width, image.height)
		this.context = canvas.getContext("2d")
	}

	makeImage() {
		let self = this
		let promise = new Promise(function(resolve, reject) {
			function loadImage(image) {
				self.createCanvas(image)
				image.removeEventListener('load', loadImage)
				resolve(image)
			}
			const image = new Image()
			image.src = URL.createObjectURL(file)
			image.addEventListener('load', loadImage)
		})

		return promise
	}
}


const input = document.querySelector('input')
input.addEventListener('change', (event) => {
	let image = event.target.files[0]
	let thing = new ImagePixels(image)
	thing.then((e) => {
		console.log(e)
	})
})