I am displaying a user image using JavaScript but the resulting URL is a 'blob' which means that when I try and save it using html2canvas I get a blank, I believe this is because the output is currently a blob?
I have also tried adding allow taint to html2canvas, this does indeed save the image but changes the dimensions and squashed the image.
var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><button><label for="file" style="cursor: pointer;">Upload Image</label></button></p>
<img id="output" style="width:50%;" />