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.
Related
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.
I saw a couple of messages about this topic, but I still haven't found how to make Fine Uploader use thumbnails generated by the server for the Initial File List files.
I use a "traditional" server-side Fine Uploader implementation, for pictures upload, as described in the Getting Started section. But I also want to use Fine Uploader as a gallery to show already uploaded pictures, so I use the "session" config to populate it, when it loads...
This works, but Fine Uploader creates Base64 images for those already uploaded images, even if I return a thumbnailUrl property for each of them, pointing to already resized thumbnails... Indeed, when I upload pictures, I generate thumbnails on the server, by myself. I want Fine Uploader to display those thumbnails when the "Initial File List" is received. How can I achieve this?
I've read about the drawThumbnail() function, but I don't know exactly how to use it. Should I call it manually in the onSessionRequestComplete event? Will that prevent Fine Uploader to create Base64 thumbnails by itself?
I'm running a Vanilla Forum with a FileUpload plugin, allowing users to upload images and insert the corresponding code directly into the body of their post. These images work with FancyBox when clicked, linking together nicely within the page. However, should a user use a third-party image hosting site (i.e. Imagevenue, Imageshack, Postimage.org) and copy and paste the resulting image code, it deactivates the FancyBox feature associated with all images previously on the page, so when you click on an image uploaded via FileUpload it opens in a new window now instead of in a FancyBox.
My question is one of two things:
a) Is it possible to fix this formatting issue so that if a user does choose to use a third-party image hosting service then it will not affect the fancybox of my previous images.
or
b) Is it possible to block this type of image code from being inputted in the body of a post to prevent this from ever happening.
Thank you and please reply if you would like more information!
Most likely the generated code from those third-party hosting sites has not an image extension (JPG, PNG, GIF) so fancybox doesn't know what type of content needs to handle.
If you are binding fancybox like
$(".fancybox").fancybox();
... you could force the type of content to image like
$(".fancybox").fancybox({
type : "image"
});
I don't really see how pasting the code of a new image will disable the code for existing ones if you want to elaborate.
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
now i'm making application for facebook with javascript.but I don't know method to change my screen application to .jpg file.
So,I would like to know how to change my application and post it
Thank you for your help.
You cannot get the screenshot done client side, however you can grab the HTML code of the page being viewed and AJAX it up to your server, have your server component transform that HTML into an image.
Use this to get the HTML content of the page at the moment they want the screen capture document.getElementsByTagName('html')[0].innerHTML;
AJAX the HTML to your server
Have your server transform that HTML into an image (depending upon server-side technology you're using, there are solutions to this) (eg http://www.converthtmltoimage.com/)
two choice, store the image on your server to be the permanent place sending back the new URL for the image, or send the content back to the client.
Have the client HTTP Post the image content to Facebook for the post, or reference the URL
It's a big project, but I commend you for tackling something like this.