Can I use phantomjs to create an image of the contents of <div><iframe ..></div> (The div contains an iframe)
how do I make this image (binary data) as part of a json ? , as ({img: binary data}) ?
Is it possible to load the iframe by itself? If you can achieve that then there's no reason why you can't call var base64string = page.renderBase64(); to get a base-64 encoded string. See the API for renderBase64().
You can re-create the image later by evaluating img.src = "data:image/png;base64," + base64string;.
Related
I'm just recently learning to code for A-frame projects. When trying to set up a scene with multiple targets in A-fram, the 3D model that was supposed to be displayed by one of them doesn´t appear. The model, like the marker, uses an URL as the original but only the latter works.
Separating the ar.js and A-frame proved that the problem was apparently on ar.js, however, I may be mistaken.
You can find my code in this link since it is giving me too much trouble to post here due to the URL in the code. The file's name is "Problem code":
https://github.com/BrandexGlobal/ARDuratex/tree/master
In HTML, you can use base64 data uris OR blobs for turning raw content into a viable url. This url should work in any place that any other url would work. I say should because I am not familiar with the framework that you are using (I'm anti-framework and pro-vanilla), so there is a slight chance that your framework might mess something up.
🢔 Because it appears as though you are new to Stackoverflow, I shall explain this checkmark here. After reading and reviewing my answer, if (and only if) you are thoroughly satisfied with the answer I have posted here, then you can reward me by clicking this checkmark to accept this answer as the best answer. If someone else posts a better answer, then click their checkmark. Clicking a checkmark is not permanent: if someone later on post a better answer, then you can click their checkmark and switch the best answer over to the new answer posted.
Example of plain ordinary image:
(function(mainImage) {
mainImage.title = mainImage.src;
})(document.getElementById("mainImage"));
<img src="https://i.stack.imgur.com/Lr5Kg.jpg" id="mainImage"/>
Example of using base64 data URI (notice how the url is the image itself). Also, see Jpillora's base64 encoder and this demo page.
(function(mainImage) {
mainImage.title = mainImage.src;
})(document.getElementById("mainImage"));
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z" id="mainImage"/>
Example of using a Blob URI. Notice how the url is dynamically generated similar to a memory address pointer.
(function(){
var rawData = atob("/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z");
var rawDataLength = rawData.length;
var typedArrayView = new Uint8Array(rawDataLength);
for (var i=0; i<rawDataLength; i=i+1|0)
typedArrayView[i] = rawData.charCodeAt(i);
var img = document.body.appendChild(document.createElement("img"));
img.src = img.title = URL.createObjectURL(new Blob([
typedArrayView
], {type: "image/jpeg"}));
})();
Another example is that we can encode the image as a Base64 data URI, then use an XMLHttpRequest to HTTP-get the data URI's contents, but set the returnType property of the XMLHttpRequest to Blob so that we get a blob from the base64 data URI.
(function(){
var xhr = new XMLHttpRequest;
xhr.responseType = "blob";
xhr.open("GET", document.getElementById("base64DataURIImage").src);
xhr.onload = function(){
var img=document.body.appendChild(document.createElement("img"));
img.src = img.title = URL.createObjectURL(xhr.response);
}
xhr.send();
})();
(function(mainImage) {
mainImage.title = mainImage.src;
})(document.getElementById("base64DataURIImage"));
As a base64 URI: <img id="base64DataURIImage" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z" />
<br /><br />
Then turned into a blob:
Resources:
For base64 data URIs, see this MDN page
For my own library for correctly encoding base64 URIs with high unicode characters, see this Github repository
For blobs, see this MDN page
So, this must be something more than I have to struggle with. I let users store images, now privately, hence I need to be able to request images with the Authorization header. <img> doesn't allow this however (and no, I don't want to add a ?token=xxx to the request). So I have to load the image using axios.get and then convert the binary representation of the image to Base64, and embed the image using the Data URI. Simple, right?
So what I have to do is img.src=data:image/jpeg;base64,xxxxxxxxx where all the x:s should be replaced with the Base64 representation of the image. I tried using btoa but only got about 20 characters in my Base64. The image is on 700Kb.
Can it be that btoa can't handle images that size?
Are there any other way of doing this?
I do not use browserify or webpack, so I don't want to use Buffer to solve this.
EDIT: The first comment I received was actually the correct answer to my question, with just a small adjustment.
getBase64(arrayBuffer) {
var reader = new FileReader();
var that = this;
reader.onloadend = function () {
that.mainImage = reader.result;
};
reader.readAsDataURL(new Blob([new Uint8Array(arrayBuffer)], { type: 'image/jpeg' }));
}
I added a Blob to contain my ArrayBuffer, and I had to convert
ArrayBuffer to UInt8Array for the blob to be able to iterate over it.
And in my Vue template
<img class="responsive-img" :src="mainImage"></img>
try this.
getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
},
this.getBase64(this.selected_file);
TinyMCE init options
$scope.tinymceOptions = {
plugins: 'base64img image imagetools paste ...',
relative_urls: false,
paste_data_images: true,
...
};
paste_data_images: true option means that data:url images (inline images) should NOT be removed from the pasted contents (see docs).
I use TinyMCE 4.2.8. Inside base64img plugin I've written the following code
var editor; // TinyMCE editor
var imgData; // base64 image data string, like "data:image/png;base64,...="
editor.setContent("<img src='" + imgData + "' />", {format: 'raw'});
// editor.execCommand('mceInsertRawHtml', false, '<img src=\'' + imgData + '\' />'); // another way
to embed an image which is loaded in memory as base64 string. After the command is executed img src is magically converted into 'blob:http%3A//localhost%3A8080/...'. Why?
It works (images are displayed), but I want to store images as data: rather than upload them to server and store as blob. How to change this behaviour?
Image is saved internally as 'data:image/png;base64,...=', so you don't need to worry. No uploading is performed, 'blob:http%3A//localhost%3A8080/...' is used for displaying an image info only.
I want to load local html file which in the local folder to the webview, but WebView doesn't support 'ms-aspx:///' protocal, I found a solution to read the html file to stream, and then convert it to string, using NavigateToString method to load the html, it works well. But, If there's an image in the html file, the image couldn't display, anyone can help?
I have solved.
Solution:
Convert the image file to base64 string
StorageFolder appFolder = ApplicationData.Current.LocalFolder;
StorageFile file = await appFolder.GetFileAsync("SplashScreen.png");
using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
var reader = new DataReader(stream.GetInputStreamAt(0));
var bytes = new byte[stream.Size];
await reader.LoadAsync((uint)stream.Size);
reader.ReadBytes(bytes);
base64 = Convert.ToBase64String(bytes);
}
Use StringBuilder to create the html string
sb.Append("<html><head><title>Image test</title></head><body><p>This is a test app!</p><img src=\"data:image/png;base64,");
sb.Append(base64);
sb.Append("\" /></body></html>");
TestWebView.NavigateToString(sb.ToString());
Try using the ms-appx-web:// scheme instead of ms-aspx:// to load html from a WebView. If that doesn't work, you may need to use the ms-appdata:// scheme to access the image if it's in your application data folder.
Some further resources that might help:
How to load a local HTML-File into Webview
URI schemes
How to reference content
I'm trying to get some blob files (images) and then display it on the screen using base64.
This is my node.js code:
var queryimage = "SELECT iproduct FROM images";
connection.query(queryimage, function(err, rows, fields){
socket.emit('image_prova', new Buffer(rows, 'binary').toString('base64'));
});
Then I'm getting the suposed string:
websocket.on('image_prova', function(data){
$('#imagehere').append('<img src=data:image/jpeg;base64,'+data+' />');
});
The image is not being displayed and the string given is: AA==
I don't understand why...!
You are passing rows instead of rows[0] to Buffer. You only requested one, but it is still an array, so you need to access the one you actually want.
If that doesn't work, let me know.