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);
Related
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); }
In PHP
I'm converting a large number of blog posts into something more mobile friendly. As these blogs posts seem to have alot of large images in them, I would like to use some regex or something to go thorugh the article's HTML and replace any images that aren't currently linked with a link to that image. This will allow the mobile browser to display the article without any images, but a link to the image inplace of where the image would be thus downsizing the page download size.
Alternatively, if anyone knows any php classes/functions that can make the job of formatting these posts easier, please suggest.
Any help would be brilliant!
To parse HTML, use an HTML parser. Regex is not the correct tool to parse HTML or XML documents. PHP's DOM offers the loadHTML() function. See http://in2.php.net/manual/en/domdocument.loadhtml.php. Use the DOM's functions to access and modify img elements.
How about doing it in JQuery instead of PHP. That way, it will work across different blogging software.
You can do something like...
$(document).ready( function () {
$('#content img').each(function () {
var imageUrl = $(this).attr('src');
//* Now write codes to delete off the image and put in a link instead. :)
});
});
With Regexp something like this:
$c = 0;
while(preg_match('/<img src="(.*?)">/', $html, $match) && $c++<100) {
$html = str_replace($match[0], 'Image '.$c.'');
}
You can also use preg_replace (saves the loop), but the loop allows for easy extensions, e.g. using the image functions to create thumbnails.
i'm using tinyMCE and i can't find the answer for this in their forums.
I'm using the "media" plugin to embed flash. the html result in html preview is normal:
<p><iframe src="http://www.youtube.com/embed/lWRi7gDYjVY" frameborder="0" width="425" height="350"></iframe></p>
the result saved to the database is quite different though, using mysql_real_escape_string it saves:
<p><img data-mce-json="{'type':'iframe','video':{'sources':[]},'params':{'src':'http://www.youtube.com/embed/lWRi7gDYjVY','frameborder':'0'},'width':'425','height':'350'}" class="mceItemMedia mceItemIframe" src="http://localhost/assets/scripts/tiny_mce/themes/advanced/img/trans.gif" data-mce-src="assets/scripts/tiny_mce/themes/advanced/img/trans.gif" width="425" height="350"></p>
and that is what is rendered on my page's html, showing only a white space the size of the iframe...
I'm really stuck and i don't know what to do.
Thanks
/Update/
well, i found out the source of the problem: i am saving my contents through AJAX; i haven´t found a way to get the HTML content out of the editor with javascript so i was hacking it with a jQuery selector:
$('div').find('iframe').contents().find('body').html()
so that way i get the "wrong html" and it only happened with youtube videos so far.
My question is: how can i obtain the editor's HTML so i can post it through AJAX?
Thank you once again.
To obtain the editor's HTML use the following
// this is "content" by default else it is the id of your
// html element you get the editor for (usually a textarea)
var editor_id = 'put_your_editor_id_here';
editor = tinymce.get(editor_id);
var content = editor.getContent();
You may have a closer look at the tinymce API.
This is because the media plugin strips the tags that are considered invalid.
Can you try to change the option Valid_elements in Init and assign to [].
Try it.
good luck
I'm trying to display by jquery load() a dynamically generated PDF created by PHP with FPDFlib on a div but what I get is a jam of chars. Is there a way to resolve it?
thanks in advance
I've tried to correct my code in this way but continue to display jam
$.post("./php/stampa_login.php",
{piatta:'<? echo $_POST["piatta"] ?>'},
function(data){
$("#stampa_content").load("./temp/login.pdf")
});
ciao
h.
That seems to be correct. jQuery's load() fetches an URL through AJAX; if that URL is PDF, it appears as "jam of chars" to the browser, as PDF and HTML aren't compatible at all, the formats are completely different.
What you probably want is to open the PDF as an <object>, but then you're hoping that the user has some PDF plugin installed in their browser. Let's take a step back: what are you trying to achieve here, by displaying a PDF?
You can create a blank embed tag and give src attribute as link. in your call back function. This will load the pdf file perfectly.
$("#embed_tag_id").attr("src", "./temp/login.pdf");
Instead of using $("#whatever").load();
You'll want something like this:
$("#stampa_content").html ($("<object>", {
data : "./temp/login.pdf",
type : "application/pdf",
width : 800,
height : 600
}));
What that will do is instead of trying to load the contents of the PDF into a DIV, it will create an <object> block that will start up your PDF reader (such as Adobe Reader) which will then load the PDF itself and display it.
ya, seems to be an output issue. Have you tried header function to output it correctly ? try for proper output or instead of opening the pdf in div, just update the pdf's link there
did you know a php script (a class will be nice) who get the url of the first image result of a google api image search? Thanks
Example.
<?php echo(geturl("searchterm")) ?>
I have found a solution to get the first image from Google Image result using Simple HTML DOM as Sarfraz told.
Kindly check the below code. Currently it is working fine for me.
$search_keyword=str_replace(' ','+',$search_keyword);
$newhtml =file_get_html("https://www.google.com/search?q=".$search_keyword."&tbm=isch");
$result_image_source = $newhtml->find('img', 0)->src;
echo '<img src="'.$result_image_source.'">';
You should be able do that easily with Simple HTML DOM.
Note: See the examples on their site for more information.
A HTML DOM parser written in PHP5+ let you manipulate HTML in a very easy way!
Find tags on an HTML page with selectors just like jQuery.