display blob in img tag (javascript) - 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)));

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
// ...

get data from protocol buffer response into img src

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);

How to upload blob to Parse?

I am trying to upload blob to Parse. I can get a file to upload just fine, but I am trying to upload a blob that I get from canvas after doing a crop in Javascript. The line that I use to define a new parse File to be uploaded looks like this
var parseFile = new Parse.File("some_file_name.png", file);
Since the Blob Object is basically a File object without the meta attributes, I was hoping to be able to do something like this..
var parseFile = new Parse.File("some_file_name.png", blob);
But the result of this is parseFile being 'undefined'. And I thus cannot call subsequent methods to continue with the upload.
I can't seem to find any info anywhere else, and was hoping someone with a little more insight may know if I am missing something or on the wrong path. Any help is greatly appreciated!
It turns out that I can achieve the desired result by creating a Parse File object with the Base64 Data Url directly, instead of trying to create a Blob first.
var url = canvas.toDataURL("image/png");
var base64 = url.split('base64,')[1];
var parseFile = new Parse.File(name, { base64: base64 });
I found the answer here..
converting dataURI to File to use in Parse - javascript
Hope it helps someone!

turn toDataUrl base64 string into image on page

I have created a custom product configurator and i am using html2canvas to generate a base64 encoded string of a canvas element.
If you go to: http://faithpointdallas.com/ecom/page/customStole you can see that when you click "add to cart" at the bottom, it uses the html2canvas script to alert a generated base64 encoded string.
My question is: How can i take that base64 encoded string and turn it into a regular image tag. Like <img src="myconvertedbase64string.PNG" />
Here is the code that is generating the string:
$('#addToCart').click(function(event) {
event.preventDefault();
var target = $('.customstole');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
alert(data);
// data is the Base64-encoded image
}
});
});
This might help - it uses jQuery to post the base64 encoded URL to the server and then saves it to a file with some PHP:
http://www.rgraph.net/docs/integration-with-server-side-scripting.html#image
Also, did you know that you can use the data: url returned by toDataUrl() directly as the tag src?

Base64 encode and image in Adobe Air

I am writing an Adobe Air app in HTML/JavaScript and I am trying to base64 encode an image so I can add it to and XML RPC request. I have tried many methods and nothing seems to work.
I see that actionscript has a Base64Encoder class that look like it would work, is there any way to utilize this in JavaScript?
Thanks #some for the link.
I used the btoa() function to base64 encode image data like this:
var loader = new air.URLLoader();
loader.dataFormat = air.URLLoaderDataFormat.BINARY;
loader.addEventListener(air.Event.COMPLETE,function(e){
var base64image = btoa(loader.data);
});
var req = new air.URLRequest('file://your_path_here');
loader.load(req);
I was trying to upload an image using metaWeblog.newMediaObject, but it turns out that the data doesn't need to be base64 encoded, so the binary value was all that was needed.

Categories

Resources