svg to image on demand - php

I have javascript code that generates svg image tags on the fly when a person lands on one of the pages. Im using the d3 library to help make the image. The only problem is that d3 is not fully IE compatible and I would want to generate a .png, jpg, gif or any other image file based on the svg file. Is there a known way to do this?
The server side code is PHP based, and we use node.js, and render.js for a lot of the dynamic content.

I'm using ImageMagick to convert SVG images to PNG images.
This works pretty well.
A quick example of how to do this:
exec('/usr/bin/convert /path/to/image.svg /path/to/output_image.png');
I'm using this with great success for processing QR codes made with libqrencode to different sizes and colors.

Firstly you need to use a DOM implementation on server side as you want to get svg which is rendered on client side.For this we use jsdom with node.js.
Using this you can render D3 on server side and get svg on server then convert it to any format you like.
Here is the link on how to that.
Once you got SVG and PNG then by using modernizer.js
1)Check compatibility of browser using Modernizr.
2)Then load SVG or PNG basing upon on the compatibility.
Example (JS solution):
if (!Modernizr.svg) {
$("#logo").css("background-image", "url(fallback.png)");
}
Example (CSS solution):
.no-svg #logo { background-image: url(fallback.png); }

Related

Use an normal image as iconbackground from an svg file

is it possible with php (or js/css) to change the background from an SVG (by using an normal image) and convert it to an png?
Example

Embed the PDF in a webpage without using the built-in PDF viewer

Currently I am using the standard way to embed an pdf to the browser, however, the built-in pdf viewer for my target browser is not working as expected. I would like to force (Chrome, Firefox and IE8 (if possible, but IE9+ is also ok)) to use the adobe reader. The problem is , I can only change this option manually. Is there any way to change the option in HTML/ JS/ PHP ? Thanks.
<OBJECT data="YourFile.pdf" TYPE="application/x-pdf" TITLE="SamplePdf"
WIDTH=200 HEIGHT=100>
shree
</object>
I try to find the solution and someone suggested header, not working unfortunately e.g.
Content-Type: application/pdf
Content-Disposition: inline; filename.pdf
You can use Google PDF viewer to embed pdf files on to your website. Use this link https://docs.google.com/viewer
Example:
<iframe src="https://docs.google.com/viewer?url={HTTP PATH OF THE PDF FILE}&embedded=true" width="600" height="780" style="border: none;"></iframe>
https://docs.google.com/viewer?url=http://research.google.com/archive/bigtable-osdi06.pdf
Check out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "https://sample.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");
Cheers
Trick Chrome and Firefox (and maybe other browsers) into displaying the PDFs using the Adobe Reader plugin (for full PDF Open Parameters support among other benefits) by using one of the following 'Adobe PDF in XML Format' types in your embed code:
application/vnd.adobe.pdfxml
application/vnd.adobe.x-mars
This works fine as of my answer today and I'm hopeful it will continue to work fine. I'm using it currently with standard PDF files as a workaround for embedding PDF files in the browser that need to use the Adobe PDF plugin rather than the browser's built-in PDF rendering. Even though my PDF files are standard (non-XML) files, they appear to load just fine with this new application type parameter.
<OBJECT data="YourFile.pdf" TYPE="application/vnd.adobe.pdfxml" TITLE="SamplePdf"
WIDTH=200 HEIGHT=100>
shree
</object>

Generate a JPEG from $html in JS and/or PHP

Want to get an image (JPEG) from $html variable in PHP.
Steps:
Transform my code to a canvas in HTML5
Transform my canvas in image.
I know the steps but I do not know how to code them.
I do not want to use wkhtmltopdf.
Thanks for your help.
PS: Saw that (Website screenshots using PHP) but it's not in HTML5.
--
EDIT:
Try to use this but do not work...
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.body;
ctx.drawImage(img,10,10);

How to embed a graph (jpgraph) in a web-page

I am using this script which is one of the examples provided by jpgraph itself. When I put this on a web-page (blank) by itself, it's drawing the graph. But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.
GD is already enabled according to phpinfo(). Iam using jpgraph 3.5.0b1.
The problem is that you are mixing HTML/text output with image output.
Any time you have a PHP script generate graphical content you have to handle the output differently than normal HTML or text.
There are a few routes, I'll cover them briefly here.
Save the output to a file and use that filename in your HTML
//replace this line:
// Display the graph
//$graph->Stroke();
// with these lines:
// Default is PNG so use ".png" as suffix
$fileName = "/tmp/imagefile.png";
$graph->img->Stream($fileName);
.. then use $filename in an image tag, like this (for example):
print '<img src="'.$filename.'" />';
Create a standalone PHP script that will output the graphic
You can use the example script as-is, alone in a file called graph_render_script.php. Then, in your HTML, you use that script as a source:
<img src="graph_render_script.php" />
Output base-64 encoded data
Another route is to use base-64 encoded image data. This is relatively simple to do:
print '<img src="data:image/png;base64,'.base64_encode($graph->Stroke()).'" />';
As always, the documentation should be your guide!
Documentation
http://jpgraph.net/download/manuals/chunkhtml/ch05s05.html
base64_encode - http://php.net/manual/en/function.base64-encode.php
This worked for me:
putting the php code that generates the image in a file...Then on my html page I do this:
<img src="graph.php" >
embedding the graph inline is indeed possible. You'll have to use output buffering to capture the image data, then base64 encode that data, then use that base64-encoded string as the source in an <img>.
Try something like this:
$img = $graph->Stroke(_IMG_HANDLER);
ob_start();
imagepng($img);
$imageData = ob_get_contents();
ob_end_clean();
?><html>
<head>
<title>JpGraph Inline Image Example</title>
</head>
<body>
<h1>JpGraph Inline Image Example</h1>
<img src="data:image/png;base64,<?php echo(base64_encode($imageData)); ?>" />
</body>
</html>
ceejayoz made an excellent point in that this method is almost never what you want. I do not recommend embedding the image data like this unless you have a good reason to do so and understand the downsides, i.e. older browsers lack support for it, and the page size is dramatically increased (not only from the image data but the fact the image data is base64 encoded, which balloons the length). I've used this method in the field myself on a project last year, but it was only because the client refused to make a second request for the image.
But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.
You can't do that - you can't output an image as raw binary data within a page.
You need to put the code that generates the graph in a separate file, and use an image tag.
<img src="path/to/jpgraph/chart.php" />
The graph needs to be on its own page, you can't embed it. It outputs a raw JPG and you need to have no other content sent and have the proper headers to tell the browser it's a JPG. To embed the graph you'd make a different page called stats.php for example, and on that page you'd make an image tag pointing to the stand alone graph.
<img src=graph.php>
I've had this problem many times, I've noticed it happens when you have require() or include() in your Chart's script and those scripts have Data Base connections or special configurations.
I've solved this problem separating the data retrieving and the Chart drawing, passing parameters to the script or using SESSIONS to get the values.
Example of Embed image Chart in your PHP or HTML file:
<img src="linear_graph_customer.php?values=1,2,3,4|1,2,3,4|1,2,3,4&title=CHART&width=500&height=300" width="500" height="300" class="img" />
Regards.

Print SVG charts into PPML format

Our printer is set up to handle PPML files.
We would like to include some SVG charts to be printed. SVG Charts are built with PHP and YUI3.
How to incorporate SVG charts into PPML files?
How to include YUI3 charts into PPML?
In your PPML file, I believe you should be able to add the tag below:
<SOURCE Dimensions="thewidthinpixels theheightinpixels" Format="image/svg+xml">
<EXTERNAL_DATA Src="yoursvgfilepath.svg" />
</SOURCE>
Here's an example PPML file (although it doesn't include an SVG example):
Example PPML code
And, if you wanted to just copy and paste the svg in, it appears you can embed it as internal data, too:
W3C reference regarding use of SVG in PPML

Categories