TinyMCE - Image Tools Plugin - Converting to blob - image

I'm using TinyMCE 4 + Image Tools Plugin.
When I use the cropping/rotation or any other image edit option, the resulting image is saved as a blob.
When I view the HTML source code, all the images are saved as blob.
I want to get it as a base64 image.
Please help.
Thanks in advance.

Those blob images will be sent to the server as Base64 images. If you configure TinyMCE to process these images as documented here:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
...when the data arrives at the server they will be Base64 images. The browser shows blob URLs to avoid showing you a very long Base64 binary string.

Related

I'm generating a pdf with laravel-dompdf and I am using server path to show images in the pdf. Is it secure?

I am using laravel-dompdf to generate a pdf but to show images in that pdf I tried the route and controller approach but it's working for webpage but not for pdf. That's I am using the server path (/home/shashank/work/jobs/storage/app/{{$photo}}).
I want to know if it's safe or not.

How to make a base64 image url to a real image with javascript or jquery?

I'd exchanged a div tag to a base64 image url with html2canvas plugin. And I need to make this base64 url to a real image so I can add this image to an editor without download. What should I do ?

Sending the html code of a canvas in client web page to server?

this may be a stupid question.. but i decided to give it a try here...
i am developing a web application using AJAX to do the interactions between client and server(python/django).
now in the client page, there is a canvas which contains a dynamically generated image; i want to get this image and send this image to server, however, i can't use Canvas.toDataURL() due to the violation of canvas security rule (client and server must be in same domain in this case).
so I am just wondering whether it's possible to get the canvas element and send its HTML back to server, then let server process it and extract its image data?
appreciate any advice!
The only problem if the <canvas> date is tained by using images from different origins (CORS problem).
Just
Use toDataURL() to get the image data
Post this data to the server using normal AJAX
Strip off data URL prefix
base64 decode the data
Now you have image data in binary format
Do whatever you wish with the image
base64 + dataURL decode example: https://github.com/miohtama/Krusovice/blob/master/bin/create_bg_thumbnails.py#L62

Convert Base64 to normal PNG for copy/pasting

I've got an HTML email template that's using a kludgy process as follows:
Pull data from MySQL and put it into a HighCharts chart
Convert the HighCharts SVG to canvas using canvg
Render the canvas as a Base64 PNG using canvas.toDataURL
All's well and good, the image shows up fine (except for some quirkiness in Internet Explorer), but here's the rub:
I'd like users to be able to copy and paste the entire web page into Outlook and send it out as an email. However, Outlook (and a few other clients I've tried) won't receive Base64 PNGs via copy paste -- there's a blank space where the image should be.
Does anyone know of a way to convert the Base64 into a normal PNG such that it can survive the copy/paste? Maybe this requires saving the PNG to server?
I've been thinking about this since your last question and I've come up with 3 options:
One
Stick with what you have.
Take the base64 string from the toDataURL, submit it back to the server via AJAX, on the backend convert it to a PNG, store it on server and serve PNG back to the page.
Two
Render highcharts SVG on the users browser.
Submit that SVG string to your backend server via AJAX call.
On the backend, generate a post request (something like described here see Using PHP for POST Request) to the highcharts exporting server at http://export.highcharts.com/. From looking at the highcharts source the request needs to contain the following posted variables:
filename: png filename
type: from the plotOptions, the type, line, bar,etc..
width: the width in pixels of the desired png
svg: the svg string
Get the resulting PNG, save it to your server, serve it normally.
Three
Switch to using the Java Highcharts API. You'd have to get this running on your server. Once you did, though, you could generate your charts entirely on the backend and just serve up the PNG file.

Can not show uploaded image with CKEditor when editor and upload action file live on seperate server

I tried upload image with CKEditor form ASP.net server and send image to upload with PHP in another server.
That's work for upload image but the image didn't show on editor.
Please could you help to solve this problem.
You can't use different servers due to cross-site scripting protection by the browser. Check this sample: http://cksource.com/forums/viewtopic.php?p=46715#p46715

Resources