I'm currently following this tutorial for uploading images to Google Drive from javascript. The example code works perfectly in that you can select a file to upload from your hard drive. I'm now trying to modify it for my purposes so that it instead uploads an image already displayed on the page in standard HTML form:
<img class="image" id="result-image" src="imgres?img_id={{result_id}}" alt="No Image"/>
The supplied Google example looks for a change on the file selector and gets the file data as follows:
var fileData = evt.target.files[0];
Which is then read by a FileReader object as follows:
var reader = new FileReader();
reader.readAsBinaryString(fileData);
reader.onload = function(e) {
...
My question is how do I supply the image object tag in the required type for the FileReader readAsBinaryString method so that the Drive API calls can succeed? Thanks in advance!
Fixed using Joe Coder's solution as follows:
var img = document.getElementById('result-image');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataUrl = canvas.toDataURL('image/png');
var blob = dataUriToBlob(dataUrl);
var reader = new FileReader();
reader.readAsBinaryString(blob);
reader.onload = function(e) {
...
With dataUriToBlob method:
function dataUriToBlob(dataURI) {
// serialize the base64/URLEncoded data
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
}
else {
byteString = unescape(dataURI.split(',')[1]);
}
// parse the mime type
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// construct a Blob of the image data
var array = [];
for(var i = 0; i < byteString.length; i++) {
array.push(byteString.charCodeAt(i));
}
return new Blob(
[new Uint8Array(array)],
{type: mimeString}
);
}
Related
I have found some answers related to the topic from How can I convert an image into Base64 string using JavaScript?. I realized they don't have an image on the div tag. Is it possible if I would have the image source?
Answer added for people who want to reference
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
alert("Converted Base64 version is " + document.getElementById("output").src);
console.log("Converted Base64 version is " + document.getElementById("output").src);
}
fileReader.readAsDataURL(fileToLoad);
}
}
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />
I would like to use the image source to load the image and find out the base 64. Is it possible?
Besides using div to create 1 image out where it can't be customized.
I think you want to do this https://jsfiddle.net/samet19/yv9a4op8/
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
}
fileReader.readAsDataURL(fileToLoad);
}
}
I am trying to implement a download button for Internet Explorer users that will let them download a png file being displayed on a page.
The image is provided as a Data URL and displays normally on the page.
However, when the image is downloaded on Internet Explorer using the following code, only the upper half of the image gets downloaded.
I know the problem does not come from dataURLtoBlob() because reading the blob as a Data Url returns exactly the same original data.
Can anyone help me understand what's going on here? Thanks a lot for the help.
downloadButton.onclick = function () {
if (window.navigator.msSaveOrOpenBlob) {
var filename = "image.png";
var data = $('#qrCode').attr("href");
var blob = dataURLtoBlob(data);
console.log(data);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function() {
console.log(reader.result);
};
window.navigator.msSaveBlob(blob, filename);
}
}
function dataURLtoBlob(dataUrl) {
var arr = dataUrl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var byteString = atob(arr[1]);
var arrayBuffer = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mime });
}
I managed to find a workaround for this issue by using an intermediate canvas.
var ieCanvas = document.getElementById("ieCanvas");
var ctx = ieCanvas.getContext("2d");
var img = document.getElementById("qrCodeImg");
ctx.drawImage(img, 0, 0);
var filename = "download.png";
window.navigator.msSaveBlob(ieCanvas.msToBlob(), filename);
To summarise:
QR Code PNG -> Blob -> msSaveBlob = Half of the image
QR Code PNG -> Canvas -> Blob -> msSaveBlob = Full image
Getting a list of all images of a website sounds easy. In Chrome you can open the developer tools, open the "Application" tab and under Frames > top > Images you see a list of all images. In code this should be something similar to:
for(var i = 0; i< document.images.length; i++){
console.log(document.images[i].src)
}
The problem: when you open e.g. Google Maps you'll notice some images have a src like blob:https://www.google.de/65ce9e40-01bd-4ec7-ad85-6f0ead2497d8. Notice the blob prefix. AFAIU they are internally created and not loaded from the network as such.
The question is - how can one still get access to them?
The reason why you are not getting those img tags with document.getElementsByTagName("img") is because Google Maps uses a <canvas> and renders those images directly into the canvas (using the drawImage method), there are no direct img tags that are part of the DOM.
For example take a look at this fiddle in which the images are loaded using a blob but injected into an img tag (in this case you can successfully get them using document.getElementsByTagName("img")):
var xhr = new XMLHttpRequest();
xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.querySelector( "#photo" );
img.src = imageUrl;
var images = document.querySelectorAll('img');
for(var i=0; i<images.length; i++) {
console.log(images[i].src);
}
};
xhr.send();
<img id="photo"/>
In this case we can successfully loop through the image elements that are part of the DOM and display their src property.
Now take a look on the other hand the approach that Google Maps uses with a <canvas> element:
var xhr = new XMLHttpRequest();
xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
};
img.src = imageUrl;
var images = document.querySelectorAll('img');
for(var i=0; i<images.length; i++) {
console.log(images[i].src);
}
};
xhr.send();
<canvas id="myCanvas" />
As you can see in this case nothing gets printed into the console because document.querySelectorAll('img') returns an empty array.
Unfortunately I am not quite sure how you can extract the images that have already been drawn into an existing canvas.
You need to get all images in your DOM by
var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++){alert(images.getAttribute("src"));}
The following code should be able to save and load .png image to/from local hard drive.
Saving works fine(at least in chrome) but loading produces wrong url and display nothing..
A little help would be really appreciated!
<html>
<head>
<title></title>
</head>
<body>
<img id="img" /><br>
<input type="button" value="Save" onclick="onSave()" /><br />
<input type="file" onchange="onOpen(event)" /><br />
<script>
onSave = function () {
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 100, 150);
var dataURL = canvas.toDataURL("image/png");
var img64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
var binaryImg = atob(img64);
var length = binaryImg.length;
var ab = new ArrayBuffer(length);
var ua = new Uint8Array(ab);
for (var i = 0; i < length; i++) {
ua[i] = binaryImg.charCodeAt(i);
}
var blob = new Blob([ab]);
var a = document.createElement("a");
a.download = 'Blob_img';
a.innerHTML = "Download File";
a.href = window.webkitURL.createObjectURL(blob);
a.style.display = 'none';
document.body.appendChild(a);
a.click();
};
onOpen = function (event) {
var fileReader = new FileReader();
fileReader.onload = function (event) {
var ab = event.target.result;
var ua = new Uint8Array(ab);
var binaryImg;
for (var i = 0; i < ua.length; i++) {
binaryImg += String.fromCharCode(ua[i]);
}
var img64 = btoa(binaryImg);
var image = new Image();
image.src = 'data:image/png;base64,' + img64;
var img = document.getElementById('img');
img.src = image.src;
}
fileReader.readAsArrayBuffer(event.target.files[0]);
};
</script>
</body>
</html>
Your "load" handler for your FileReader is declared without an event parameter. As a result, it's not going to have access to the file contents.
fileReader.onload = function (event) {
var ab = event.target.result;
Without that parameter, the symbol "event" would refer to the parameter of the enclosing function, and that one won't have the file contents.
Also, I think you don't need to do the base64 encoding/decoding via atob and btoa, because the results of converting the canvas contents to a data URL will be a base64 string anyway.
In case somebody is wondering, there is a simpler way of reading the file:
FileReader.readAsDataURL
Check a working example at https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL.
I'm trying to write a file upload script for use in a secure corporate intranet and having just a little trouble...
In the following code, I get no errors and all my debugging looks like everything is working, but the end result is always a 'blank' image:
var ctx = document.createElement('canvas');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
img.src = $('#UpdateImage:file');
var imgStr = ctx.toDataURL("image/png", "");
document.getElementById("Item_Create_Image_Avatar").src = imgStr;
When I "inspect element" on the 'Item_Create_Image_Avatar' object, the 'src' value looks absolutely perfect:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC" id="Item_Create_Image_Avatar" style="vertical-align:top">
Why is my image coming in as blank?
Found This.
Select a File to Load:
<input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
function loadImageFileAsURL(){
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0){
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var divTest = document.getElementById("imgTest");
var newImage = document.createElement('img');
newImage.src = srcData;
divTest.innerHTML = newImage.outerHTML;
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
EDIT:
Source: How to convert image into base64 string using javascript
If you want to get the Data URL of the image after it loaded, you should get the Data URL after it loaded
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
imgStr = canvas.toDataURL("image/png", "");
document.getElementById("Item_Create_Image_Avatar").src = imgStr;
}
img.src = $('#UpdateImage:file');
EDIT: Included the rest of the code
EDIT2: Edited stupid error regarding canvas and its context