А зачем вам такие длинные ссылки? Зачем готовый файл превращать в строку и опять загружать?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="file" id="imageLoader">
<canvas id="imageCanvas"></canvas>
<script>
var imageLoader = document.getElementById("imageLoader");
imageLoader.addEventListener("change", handleImage, false);
var canvas = document.getElementById("imageCanvas");
var ctx = canvas.getContext("2d");
var width = 0;
var arrImg = [];
function handleImage(e) {
var file = e.target.files[0];
var img = new Image();
img.src = URL.createObjectURL(file);
URL.revokeObjectURL(file);
img.onload = function() {
width += img.width;
canvas.width = width;
canvas.height = Math.max(canvas.height, img.height);
arrImg.push(img);
arrImg.reduce(function(dx, img) {
ctx.drawImage(img, dx, 0);
dx += img.width;
return dx;
}, 0);
};
};
</script>
</body>
</html>