JSFiddle - React, Tailwind, and code Playground

by confile

HTML

choose an image:
<input id="file" type="file" />

	<img id="img">
	
	<br>canvas<br>
	
	<canvas id="mycanvas" ></canvas>

JavaScript

var $inputFile = $("#file"),
	inputFile = $inputFile[0],
	$img = $("#img"),
	img = $img[0];


	var tmpImage = img; // document.createElement("img");
	

	$inputFile.on("change", function() {
		var files = inputFile.files;

	    if (!files || !files.length) 
	    	return
	    
	    var reader = new FileReader()

		reader.onload = function(progressEvent) {

	    	console.log("reader.result: "+reader.result);
			
	    	tmpImage.onload = function() {
	    		var canvas = $("#mycanvas")[0];
	    		context = canvas.getContext("2d");
				
	    		canvas.width = this.width;
				canvas.height = this.height;
				context.drawImage(this, 0, 0);

			
				canvas.toBlob(function(blob) {
					console.log("done");
					alert(blob.size);

					
				}, 'image/jpeg');

	    	}; // end onload
	    	tmpImage.src = reader.result;	
  				
  		};
	    reader.readAsDataURL(files[0]);

		
	});

////////////////////////////
// https://github.com/blueimp/JavaScript-Canvas-to-Blob/blob/master/js/canvas-to-blob.js
////////////////////////////
(function (window) {
    'use strict';
    var CanvasPrototype = window.HTMLCanvasElement &&
            window.HTMLCanvasElement.prototype,
        hasBlobConstructor = window.Blob && (function () {
            try {
                return Boolean(new Blob());
            } catch (e) {
                return false;
            }
        }()),
        hasArrayBufferViewSupport = hasBlobConstructor && window.Uint8Array &&
            (function () {
                try {
                    return new Blob([new Uint8Array(100)]).size === 100;
                } catch (e) {
                    return false;
                }
            }()),
        BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
            window.MozBlobBuilder || window.MSBlobBuilder,
        dataURLtoBlob = (hasBlobConstructor || BlobBuilder) && window.atob &&
            window.ArrayBuffer && window.Uint8Array && function (dataURI) {
                var byteString,
        ...