get data from protocol buffer response into img src - javascript

i have a code which calls an image via URL.
Now the URL returns a protocol buffer, when i open the link separately in a new tab it shows text " ["imagename",[[null,null,"data:image/jpeg;charset;utf-8;base64,#encoded#"]]]"
since the URL returns a text response, is there any way i can get the whole response into a string(10K+ characters) and then i can slice it and put it in the img src.
i just want to put the whole code into single html file or is there a way to write proto schema inside the html code and then retrieve data from it. (I have just started with programming)
//Html
<img id="image" Src="#URL">
//javascript
var imgstring=document.getElementById("image");
//when i print this, I get it as "[object HTML ImageElement]"
//if i use the .value it gives the output as "undefined"

Maybe this would like to help you:
var byteArray = new Uint8Array(#Buffer Data#);
var blob = new Blob([byteArray]);
const url = window.URL.createObjectURL(blob);

Related

How to insert a blob url in img src in react quill

I’m trying to insert a blob url something like blob:http://localhost:8000/d986abd0-8e4a-4731-b0
With embed method by react quill
quill.current.editor.insertEmbed(
quillRange.current.index,
"image",
blob:http://localhost:8000/d986abd0-8e4a-4731-b0
)
But when I inspect the code in browser I see something like below
The Embed method works totally fine with normal http urls, but in my case I need to convert the binary data from server convert it to blob url and then display, can someone please tell how can I do that
According to https://github.com/quilljs/quill/issues/1795#issuecomment-340308922, you can try sanitize.
// ...
const Image = Quill.import('formats/image');
Image.sanitize = () => url; // You can modify the URL here
// ...

display blob in img tag (javascript)

I'm getting a blob file from mySql and It looks like the image below.
and I'd like to show this image through <img src={imagefile}/> (I'm using React.js).
How can I the blob file to url link?
I tried URL.createObjectURL(imagefile)
but It gives me an error that
Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided
please Help ToT
You need to convert you data to base64 by using the folowing code, then use can use Base64 in your img tag < img src="yourbase64here"/>
let base64String = btoa(String.fromCharCode(...new Uint8Array(data)));

CasperJS returns base64 string as image URL

I'm crawling a website using CasperJS and I have an interesting problem.
In Caspers's evaluate function, I want to extract src attribute from image <img> element. Here is code that will be executed in my evaluate function:
function crawl(){
var product = {};
try{
product.title = jQuery('#title').html();//Get title
product.price = document.getElementsByClassName("price")[0].innerHTML;//Get price
var imageSrc = jQuery("#next").attr("src")
product.image =imageSrc;
}
catch(e){
}
return JSON.stringify(product);
}
Here is how evaluate function is handled in Casper:
casper.then(function(){
scrappedProductInfo = this.evaluate(crawl);//Get info
console.log("Page crawled");
utils.dump(scrappedProductInfo);
});
When I execute my CasperJS script, from evalute() function in image attribute of returned object instead of image link I get base64 representation of the image:
\ndata:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAEKAKkDASIAAhEBAxEB/8QAGwABAAIDAQEAAAAAAAAAAAAAAAIFAQQGAwf/xAA+EAACAgEBBAUICAQHAQAAAAABAgADEQQFEhMhFDFBVHEGM1FSkZOxwRUiMmGBkqHRI0Jy8CQ1RGKi4fFz/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAECA//EACARAQEBAQACAgIDAAAAAAAAAAABEQIS.....
When I open the same page in Chrome and when I execute crawl function in Chrome console, I get src as link and not as base64 string. When I right-click on element and inspect it, i can clearly see URL and not base64 encoded string.
Any suggestions?

Javascript - really remove image

A have a page with image.
Javascript code periodically loads new content for image from server as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAAB.... Well, you understand, it is image as base64 encoded.
Javascript code changes image src to new one, but it looks like old data is not being deleted.
If I leave page running for some time, it eats all the memory.
Is there some way to remove previous images completely?
I have a suggestion. Please test and see if it works for you.
Create blob from base64 string. Read:
Creating a Blob from a base64 string in JavaScript
var url = URL.createObjectURL(blob). And set the url as src of
image
When done, try URL.revokeObjectURL(url)
If I understand you correctly, you are downloading the image as a base64 encoded string, then passing that string into an img src? If that is the case it sounds like the scope of your strings is not expiring somehow. To ensure the deletion of a primitive object like a string, you must keep a reference to the string by proxy with an object. Something like below.
// Somewhere in a persistent scope like global
image_reference = {};
// In your ajax callback
if(image_reference.data != null) {
delete image_reference.data;
}
image_reference['data'] = response.data;
// Put image_reference.data into your img element

Creating download prompt using purely javascript

I have some text data (say var a = 'Hello World From Javascript';)in javascript variable in current window. I want to do the following
through javascript-
1. open a new window and write the text data to the window.
2. set the content type to text/plain.
3. set the content-disposition to attachment, so that download prompt comes.
4. user downloads the text data as a text file and saves it to his local disk.
is this all possible through javascript?
I know we can make ajax calls to server or redirect but in this case instead of following above steps. But in this case, these workarounds are not adaptable.
you can do that using JS & HTML5 features. Please find below a sample code.
var fileParts = ['Hello World From Javascript'];
// Create a blob object.
var bb = new Blob(fileParts,{type : 'text/plain'});
// Create a blob url for this.
var dnlnk = window.URL.createObjectURL(bb);
var currentLnk = $('#blobFl').attr('href');
// blobFl is the id of the anchor tag through which the download will be triggered.
$('#blobFl').attr('href',dnlnk);
$('#blobFl').attr('download','helloworld.txt');
// For some reason trigger from jquery dint work for me.
document.getElementById('blobFl').click();
Triggering a file download without any server request
Unfortunately this is not something you can do with normal browser capabilities. Something like flash or a browser-specific plugin will get you what you need, but security limitations within javascript will not let you download arbitrary data created within the browser.
Also the 'data' url is not supported across all browser/version combinations. I am not sure if your users are constrained on what browser they are using or not but that may limit what you can do with that solution.
Source: Triggering a file download without any server request
If you already have the file on the server (I make an ajax call to generate and save a PDF on the server) - you can do this
window.location.replace(fileUrl);
No, Content-Disposition is a response header, it has to come from the server. I think you could do it with Flash but I wouldn't recommend it.
Here's a clean, pure js version of #Rajagopalan Srinivasan's answer:
var fileParts = ["Hello World From Javascript"];
// The anchor tag to use.
const blobLink = document.getElementById("blobLink");
// Create a blob object.
var blob = new Blob(fileParts, { type: "text/plain" });
// Create a blob url for this.
var blobUrl = window.URL.createObjectURL(blob);
blobLink.setAttribute("href", blobUrl);
blobLink.setAttribute("download", "helloworld.txt");
blobLink.click();
<a id="blobLink">Download</a>

Categories

Resources