Develop Reference

Receiving error when passing Base64 png info as query sting in URL

Attempting to pass Base64 image data in Url to web page on same domain. Query string works correctly for text strings, but receiving error -VM8:2759 crbug/1173575, non-JS module files deprecated - when attaching the base64 data.
var url = "somepage.html?name=" + encodeURIComponent("sometext") + "&image=" + base64Data;
Base64 data was initially fetched from a php script, and being forwarded from one webpage to another - same domain. Image file does not exist on the server.

Using gigantic query strings can be problematic, because different browsers have different rules, and in your case, the base64 blob image string could be compromised by URL encoding etc.
https://stackoverflow.com/a/812962/1772933
It's really best practice to use POST to send this quantity of data.

Displaying images stored in MongoDb

I have an pinterest like application. Images and other related information are stored in MongoDb. Generally size of images is about 1 mb. Images are displaying with infinite scroll. When long script with base64 string is loaded, browser crashes or response time is really high (especially for Internet Explorer)
What is the best way to display images that are stored in MongoDb?

I think the best way to achieve this, is to have you file physically in some public folder on your server. This should be accesible in a way that you will only need to use something like
http://www.myhost.com/images/my/path/to/image.jpg
You can still maintain your Base64 image in mongodb as backup, however, this is not the best way to retrieve you images due performance issues (as you have seen). I recommend you to do the following:
Each time you store the image on mongo, be sure to also store the "image file" as itself on some public place on your server. Have in mind that you should keep the path to that file on the mongo model you are using. So, the next time you call the object, rather than get the base 64 image, you should only get the path to the image.
Lets say, you have this model
myModel = {
name: "some name",
image64: "someextralongstringveryveryveryweird......",
imageUrl: "/images/my/path/to/image/imagename-id.jpg"
}
the next time you query on it, you can just ignore the image64 using mongo projection, and in you client side you just use some html tag that makes use of that url.
<img src="/images/my/path/to/image/imagename-id.jpg">
This will help you lots on performance.
There are some libraries that could help you to manage the image file creation. ImageMagick is one that I have used and is so versatile.

I guess you have some server side part of this application? Why don't you create a tiny API to retrieve images?
So your browser will have information about image and can ask your server for it, something in line of http://your_server/api/image/imageID or http://your_server/images/imagename and then your server would just stream this image, you don't need to store this in the file system.
On the client side (browser) you just need to implement 'lazy loading'.

If you're using MongoDB, you should be storing images in your database using GridFS (http://excellencenodejsblog.com/gridfs-using-mongoose-nodejs/), a feature which exposes something like a virtual filesystem for your application.
Using GridFS, you could write a controller method which streams a requested file from your MongoDB instance and pipes the file content to the response.

I would recommend storing the images on the filesystem and using your web server to handle serving them to clients.
For performance, I would put them on a CDN - that will be able to handle the traffic.
In your application storage (mongo), you can store a URL/location to the image and then use that when retrieving the image in your javascript code.
In addition, in your code I would recommend preloading images via javascript that preloads images before the user has scrolled to see them. There are some great tools out there that you can leverage for that.
In the off chance that you cannot change the storage and you have to use mongo the way it is - I would look at preloading images with javascript.

I was having the same issue. So i used a mongodb to store my images.
This is how I proceeded:
Define a logo schema:
var logoSchema = new mongoose.Schema({
name: String,
url: String
});
Compile the logo schema into a model:
var Logo = mongoose.model("Logo", logoSchema)
Creating a new logo:
var rectblack = new Logo({
name:"rect&black",
url:"public/image.jpg"
});
Saving it :
rectblack.save(function(err, logo){
if(err){
console.log("some went wrong")
} else {
console.log("logo saved")
console.log("logo")
}
});
Now to use this logo or image I just called it with the image tag (just the file name!!!):
<img src="/image.jpg">.

Upload/download/save image to a local server from a remote server using an Image URL and PHP?

I am building a Discussion Forum as part of a bigger application I am building, the forum is just 1 section of the Application.
For my TextArea fields when posting a new Topic or a Post Reply, I have decided that nothing is as good as the PageDown Markdown Library. It is the same one that StackOverflow uses on all their sites and it works better than many of it's competitors.
The way the library ships though, I am not happy with the default Insert Image functionality. You hit the button to insert an image and it allows you to enter a URL for an Image and then it inserts the proper MarkDown syntax to show the linked image.
This just won't cut it. I need the functionality that you see on StackOverflow! Very similar anyways.
I need it to show a Dialog when you click the Insert Image button, like it does now, but instead of just an input field for a Image URL, it will have 2 filed options...
Upload image from your computer
Insert an Image URL and it will then DOWNLOAD the image from that URL and insert it into the post just as if you had uploaded it from your computer. This is important to not confuse this step. IT should not simply insert the Image linking it to the original Image URL. Instead it will take that URL and download/upload the Image to the same server that the upload from computer option does and then it will insert the NEW Image URL pointing to the newly uploaded image!
Based on some simple HTML like below for a Dialog window with a filed for my Upload from Computer functionality, which I already have working. I need to come up with some JavaScript and PHP that will download/save a remote image to my upload folder on my server when a button is clicked using only the URL that will be inside the URL text input field.
So it will need to do a few things...
Fetch and save an image file to my uploads folder using PHP when the only thing that the PHP function will receive is a URL of the image which could be on the same server or most likely a remote server.
After successfully saving/uploading an image from the URL, the PHP function will return a JSON string with the status/error and if successful then it will also return the actual URL and filename of where the new image is saved on the local server. The JavaScript/AJAX script will receive this JSON response and insert the Markdown syntax for the image into the PageDown editor.
The PHP function will need to ensure that the URL that it is trying to save/download is a valid image file and not some malicious file! Also not simply just some file of the wrong filetype like a non-image file unless we are allowing the file type.
It will be part of a module installed on many dinosaur servers so it needs to work on as many servers as possible too!
From the web
From your computer
I would be greatful of any help, tips, code snippets or anything to help with this. At this stage I really just need to build a nie PHP function that will upload images from a remote URL and also ensure that the URL passed in is a real image file or even better that it is in the allowed file types array!
A couple years ago I had started this but have now lost it and I am starting over and don't remeber much about how I went about doing it then.

The easiest way to download a file from a remote server would be to use copy (http://php.net/manual/en/function.copy.php):
copy('http://someurl.com/image.png', '/var/www/uploads/image.png');
As this function returns a bool, it is easy to determine whether the operation was successful and create a JSON response.
To verify that the file is an actual image, there is unfortunately no way that is 100% sure. It is probably enough to check the mimetype though. You can use finfo for that (http://php.net/manual/en/function.finfo-file.php):
$finfo = finfo_open(FILEINFO_MIME_TYPE);
echo finfo_file($finfo, $filename);
finfo_close($finfo);
For a gif, this would return image/gif for example. You will have to hardcode a list of all mimetypes you want to allow.

Display Blob data retrieved from MySQL Database using JavaScript

Using a web service, I was able to retrieve some data from a MySQL Database. The database has an image saved in it, which had the file type of BLOB. This is what my web service returns when it comes to the image:
<image>
/9j/4AAQSkZJRgABAQEAYABgAAD/7TaeUGhvd.....RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z
</image>
Now I am having trouble making my JavaScript application convert this data and then display it as an image. I researched on it a bit and found a couple of tutorials online but somehow they did not work for me....can anyone please help me with this issue? What is the simplest way I can convert BLOB data to an image? Thanks in advance!

Assuming the blob has base64 encoded PNG data, you can use data-uri to set data directly to image e.g.
var imgdata = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
$('#myimg').attr('src', "data:image/png;base64,"+imgdata)
Assumption here is that data returned from server is base64 encoded, but if that is not the case you can see various options but ultimately you may have to do proper conversion in server side, in that case why not just return the url to image and create a API on server side to return images from blob
Here is a jsfiddle in action http://jsfiddle.net/anuraguniyal/4DEtH/5/
Edit:
I am not sure what language you use server side but process will be same for each language e.g.
>>> s='\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x05\x00\x00\x00\x05\x08\x06\x00\x00\x00\x8do&\xe5\x00\x00\x00\x1cIDAT\x08\xd7c\xf8\xff\xff?\xc3\x7f\x06 \x05\xc3 \x12\x84\xd01\xf1\x82X\xcd\x04\x00\x0e\xf55\xcb\xd1\x8e\x0e\x1f\x00\x00\x00\x00IEND\xaeB`\x82'
>>> import base64
>>> base64.b64encode(s)
'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
i.e. take all data, as will be stored in file (not the png marker too), not just raw image data and encode it

How to display 'Base64' encoded image in Adobe AIR application using Javascript/HTML

I'm having some issues while displaying a 'Base64' encoded image in my AIR application.
I'm fetching an image, which is 'Base64' encoded string, in a XML through a web service. At application side I'm able to decode it, but its not been able to display the image on the fly. A little search on Google gave me various result, but not pertaining to my problem, because most of them are related to Flex.
My queries are:
1) After decoding the 'Base64' string, do I need to convert this to a PNG image using some PNG encoder? if so, then how can I use a PNGEncoder in my Adobe AIR HTML/Javascript application. is there any API or so?
2) Since the image I'm fetching from the web server is an icon, I'm setting it as a 'src' value for the element which I'm creating dynamically as follows:
var category_header_img = new Element('img',
{
'id': 'category_header_img' + this.SelectedCategoryID,
'class': 'category_header_img',
'src': 'data:image/png;base64,'+categoryIconBytes,
'cat_id': this.SelectedCategoryID
});
I'd found this solution,
'src': 'data:image/png;base64,'+categoryIconBytes
somewhere which tried to use but it didn't work.(where, categoryIconBytes is the 'Base64' encoded string)
Please, help to solve this issue. I'll be really grateful for any of your suggestions.
Thanks.

The data URL scheme isn't supported in AIR. What was the image before it was base64 encoded? If it is already a PNG, then all you need to do is reverse the base 64 encoding and save it locally to a temporary file. You should then be able to load it with an image tag.