url.img.canvas.base64

Load image by URL, draw into canvas, get base64 of image

by Andrey Chernomyrdin

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#data-nav-menu">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="">url.img.canvas.base64</a>
			</div>
			<div class="collapse navbar-collapse" id="data-nav-menu">
				<ul class="nav navbar-nav">
					<!-- menu -->
				</ul>
			</div>
		</div>
	</nav>
	<div class="container" role="main">
		<div class="page-header">
			<h1>Images: src → img → canvas → base64</h1>
		</div>
		<form id="data-form" role="form" class="form-horizontal">
			<div class="row">
				<fieldset class="form-group">
					<legend><label class="control-label" for="form-url">Image</label></legend>
					<div class="input-group">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
								URL&nbsp;<span class="caret"></span>
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<ul class="dropdown-menu" role="menu">
								<li><a href="#">http://202.65.136.24/dashcam/data/profileimages/50adf2392f5ee.png</a></li>
								<li><a href="#">http://a.disquscdn.com/uploads/users/10355/3829/avatar92.jpg?1413802608</a></li>
								<li><a href="#">https://images.weserv.nl/?url=www.google.nl/logos/logo.gif</a></li>
								<li><a href="#">http://lobbydata.com/Content/images/bg_price2.gif</a></li>
								<li><a href="#">http://www.corsproxy.com/a.disquscdn.com/uploads/users/10355/3829/avatar92.jpg?1413802608</a></li>
								<li...

CSS

#data-form .media-image {
	background-color: #ddbbdd;
}
#data-form .media-canvas {
	background-color: #bbdddd;
}
#data-form textarea {
	font-family: monospace, serif;
}
#data-form .checkbox {
	padding-left: 1em;
}

JavaScript

function xfrImage (url, anonymous, callback) {
    var client = new XMLHttpRequest();
    client.withCredentials = anonymous;
    client.onreadystatechange = function () {
        if (this.readyState == this.DONE) {
            if (this.status == 200) {
                console.log("OK in XMLHttpRequest", client);
            }
            console.log("Error in XMLHttpRequest", client);
        }
    };
    client.open("GET", url, true);
    client.send();
}
function readURL (url, callback) {
    var file = new FileReader;
    
    file.onload = function (event) {
        console.log("onload.e", event);
        console.log("onload.this", this);
        
        loadImage(event.target.result, false, callback);
    };
    file.readAsDataURL(url);
}
function loadImage (url, anonymous, callback) {
    var img   = new Image(),
        timer = false,
        run   = false;
    
    if (anonymous) {
        img.crossOrigin = "Anonymous";
    }
    timer = setInterval(
        img.onload = function () {
            if (timer) {
                clearInterval(timer);
                timer = false;
            }
            if (!run && img.complete) {
                run = true;
                callback(img);
            }
        },
        300
    );
    img.src = url;
}
function proxyImage (url, anonymous, callback) {
    loadImage(
        "/" + url.replace(":/",""), // http://… -> /http/…
        anonymous,
        callback
    );
}
function imageLoad (url, anonymous, callback) {
    // readURL(url, callback);
    // xfrImage(url, anonymous, callback);
    // proxyImage(url, anonymous, function (img) { callback($(img)); });
    loadImage(url, anonymous, function (img) { callback($(img)); });
}
function canvasLoad (img, callback) {
    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");
    
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
    ctx.fillRect(0, 0,...