Not how to do this process and consulted but did not reach, if I can help.
probe what went something like this:
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
context = document.getElementById("mycanvas").getContext("2d"),
img = new Image();
// wait until the image has been fully processed
img.onload = function() {
context.drawImage(img, 100, 100);
};
img.src = 'url_imagen';
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
With all the contributions realize but try and if it works.
Point run to desert, poker images having resolution jpg my delivers the following error:
TIFFReadDirectory: Warning, Unknown field with tag 347 (0x15b) encountered.
tiff_min.js (línea 103)
1.tiff: JPEG compression support is not configured.
tiff_min.js (línea 103)
1.tiff: Sorry, requested compression method is not configured.
tiff_min.js (línea 103)
uncaught exception: [object Object]
The probe code that is this:
Tiff.initialize({TOTAL_MEMORY: 19777216 * 10});
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', url);
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response,height:450});
var canvas = tiff.toCanvas();
//canvas.width = 700;
//canvas.height = 450;
div.html(canvas);
msn('Imagen cargada', "Imagen cargada con exito.");
};
xhr.send();
As answered here and here, it all comes down to browser support.
You can however get the image as binary data and display it using a library:
https://github.com/seikichi/tiff.js
https://code.google.com/p/tiffus/
https://github.com/GPHemsley/tiff-js
Displaying Tiff File in angular by displaying the image in the canvas.
Download the 'tiff.min.js' from https://github.com/seikichi/tiff.js and add the file to the 'src' folder.
Update the angular.json file with
"scripts": [ "src/tiff.min.js"]
under "project"-> "architect" -> "build"->"options"->"scripts"
Inside the ts file of the component add the following code:
declare var Tiff: any; # declared globally outside the class
# inside the component class
let xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'src_of_image_to_be_displayed');
xhr.onload = (e) => {
let tiff = new Tiff({buffer: xhr.response});
let canvas = tiff.toCanvas();
document.body.append(canvas); # append to an div element
}
xhr.send();
Related
I have Blob, which stored in db and i take it from database with java server like this:
Entity.java
#Column(name = "img")
private Blob img;
public Blob getImg() {
return img;
}
public void setImg(Blob img) {
this.img = img;
}
Repository.java
#Transactional
#Query(value = "SELECT img FROM articles WHERE category = ?", nativeQuery = true)
//Blob findP(String category);
Blob findPic(String category);
Controller.java
#RequestMapping(value="/Pic_test")
#ResponseBody
public Blob getPics() throws SQLException, IOException {
return remindRepository.findPic("Java");
}
Then I receive it with Javascript to image it:
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('http://localhost:8080/articles/Pic_test', function(dataUrl) {
var display = document.getElementById('display');
var url = window.URL.createObjectURL(new Blob([dataUrl]));
var img = new Image();
img.src = url;
document.getElementById("demo").innerHTML = img.src;
})
However, if I call my "img" Blob in java code, i have an error in server, but if I call it byte[], my picture is not shown just.
I can't comment the java part since I know nothing about it, but for the javascript one, what you do is... not correct.
You don't seem to understand what is a data URL, nor what you are doing here.
So a data URL is a string, made of an header and of some file content (data:|mime/type;|file-content).
A data URL is an URL that points to itself, useful to embed data that should normally be served from network.
Quite often, the file content part is encoded as base64, because the URI scheme is limited in its set of allowed characters, and that binary data couldn't be represented in this scheme.
Now let's see what you are doing here...
You are downloading a resource as a Blob. That's good, Blob are perfect objects to deal with binary data.
Then, you read this Blob a data URL. Less good, but I can see the logic, <img> can indeed load images from data URLs.
But then from this data URL string, you create a new Blob! This is completely wrong. The Blob you just created with new Blob([dataUrl]) is a text file, not your image file in any way. So yes, the data is still hidden somewhere in the base64 data which is itself in the data URL, but what your poor <img> will see when accessing the data hooked by the Blob URI is really just text, data:image/png;base64,iVBORw0... and not at all �PNG... like its parsing algo can read.
So the solution is quite easy: get rid of the FileReader step. You don't need it.
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
xhr.responseType = 'blob';
xhr.onload = display;
xhr.send();
function display(evt) {
// we did set xhr.responseType = "blob"
var blob = evt.target.response; // so this is a Blob
// hence, no need for anything else than
var url = URL.createObjectURL(blob);
var img = new Image();
img.src = url;
document.body.appendChild(img);
}
And if I may, all your thing could also just be
document.getElementById('display').src = 'http://localhost:8080/articles/Pic_test';
I have a object like this
{
id: "114898379136253"
leadgen_export_csv_url: "https://www.facebook.com/ads/lead_gen/export_csv/?id=379136253&type=form&source_type=graph_api",
locale: "en_US"
name: "Untitled form 11/7/2017"
status: "ACTIVE"
}
I want get the file content, to fill my database with the leads that come from this file.
In my case, I need to treat the CORS also, because is a external URL, but I need some help in this solution, transform in a buffer and read the buffer? Or exist some better solution ?
function loadFile(file) {
var xhr = new XMLHttpRequest();
xhr.open('GET', file, true);
xhr.withCredentials = false;
xhr.responseType = 'blob';
xhr.onload = function (e) {
var reader = new FileReader();
reader.readAsDataURL(this.response);
reader.onload = function (e) {
console.log('DataURL:', e.target.result);
};
};
xhr.send();
}
The DataURL: in console log, return a Base64, and decoding the Base64 result, it returns me a webpage, but not the file.
could someone prompt me - how to save "blob in memory" to a file using Java Script?
e.g. I have in the page next blob-image:
<img src="blob:https%3A//drive.google.com/851b979c-92e9-4ef2-9152-8935f7793630" class="g-img">
and I need to save this blob to a file (png/jpg).
The next code just gives:
GET blob:https%3A//drive.google.com/851b979c-92e9-4ef2-9152-8935f7793630 404 (Not Found)
so it seems, usual way to get the blobs doesn't work here.
Is there any workaround to save this blob-images from browser memory to a file, or, saying more exactly - to get them as a real blob using only "src" tag value?
Thank you.
var srcEl = evt.srcElement;
var CurI = document.getElementsByClassName('g-img');
[].forEach.call(CurI, function (el) {
var xhr = new XMLHttpRequest();
xhr.open('GET', el.src, true);
xhr.responseType = 'arraybuffer'; // xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var myBlob = this.response;
var reader = new window.FileReader();
reader.readAsDataURL(myBlob);
console.log(myBlob);
}
};
xhr.send();
console.log(el.src);
// saveAs(myBlob, 'my2image.png');
}
p.s. to use mediarecorder?
I am trying to get base64 of the image in my HTML by using HTML FileReader but for some reasons it doesn't work. My html is:
<div></div>
And script is:
var file = "http://mw2.google.com/mw-panoramio/photos/medium/23830229.jpg";
var reader = new FileReader();
reader.onload = function (e) {
iconBase64 = e.target.result;
$('div').append(iconBase64);
}
Can anybody help me?
I'll have to go against the majority and tell that you can actually get it without a canvas.
The statement that FileReader can't read external files is not completely true :
You can give it a blob as source.
So you can convert your external resource to a Blob object, using XMLHttpRequest
making it available from the local machine so the above statement isn't completely false either,
then get its dataURL from the FileReader.
var file = "http://mw2.google.com/mw-panoramio/photos/medium/23830229.jpg";
var xhr = new XMLHttpRequest();
xhr.onload = function(e) {
getDataURL(this.response);
};
xhr.open('GET', file, true);
// the magic part
xhr.responseType = 'blob';
xhr.send();
function getDataURL(blob) {
var reader = new FileReader();
reader.onload = function(event) {
var dataURL = this.result;
document.querySelector('img').src = dataURL;
document.querySelector('p').innerHTML = dataURL;
};
var source = reader.readAsDataURL(blob);
}
<img/>
<p></p>
You can't use FileReader to solve this problem, because you are not trying to read local files (that is the purpose of FileReader)
Just convert the image taken from the web link using something like this answer https://stackoverflow.com/a/20285053/912450
I want to load an image from an url into filereader in order to obtain a data url of that image. I tried to search for the solution on google but i can only find solutions to read them from the file input on a local computer.
If you want a usable data-URI representation of the image, then I suggest to load the image in a <img> tag, paint it on a <canvas> then use the .toDataURL() method of the canvas.
Otherwise, you need to use XMLHttpRequest to get the image blob (set the responseType property on the XMLHttpRequest instance and get the blob from the .response property). Then, you can use the FileReader API as usual.
In both cases, the images have to be hosted on the same origin, or CORS must be enabled.
If your server does not support CORS, you can use a proxy that adds CORS headers. In the following example (using the second method), I'm using CORS Anywhere to get CORS headers on any image I want.
var x = new XMLHttpRequest();
x.open('GET', '//cors-anywhere.herokuapp.com/http://www.youtube.com/favicon.ico');
x.responseType = 'blob';
x.onload = function() {
var blob = x.response;
var fr = new FileReader();
fr.onloadend = function() {
var dataUrl = fr.result;
// Paint image, as a proof of concept
var img = document.createElement('img');
img.src = dataUrl;
document.body.appendChild(img);
};
fr.readAsDataURL(blob);
};
x.send();
The previous code can be copy-pasted to the console, and you will see a small image with YouTube's favicon at the bottom of the page. Link to demo: http://jsfiddle.net/4Y7VP/
Alternative download with fetch:
fetch('http://cors-anywhere.herokuapp.com/https://lorempixel.com/640/480/?
60789', {
headers: {},
}).then((response) => {
return response.blob();
}).then((blob) => {
console.log(blob);
var fr = new FileReader();
fr.onloadend = function() {
var dataUrl = fr.result;
// Paint image, as a proof of concept
var img = document.createElement('img');
img.src = dataUrl;
document.body.appendChild(img);
};
fr.readAsDataURL(blob);
}).catch((e) => console.log(e));