I am trying to take a screenshot of a div on my webpage using html2canvas.
In the html2canvas documentation it is stated that:
The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe content either, unless the content resides under the same origin.
My div contains same-origin iframes, but the iframes dont appear in the screenshot.
My script:
$('#savetopdf').click(function () {
html2canvas($('#dashboard'), {
"logging": true,
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
});
Unfortunately this is not implemented, any more.
I had the same issue and submitted it as a bug/feature request.
https://github.com/niklasvh/html2canvas/issues/376
The owner of the project stated:
niklasvh
There is currently no support for rendering iframe's even if the reside under same origin.
Related
Links from Facebook to my Mediawiki-powered website show an ugly default image for links. (The squarish image which shows a truncated "Powered by Mediawiki") pointed to by the gray arrow.)
How do I override this? I'm looking for a single image which would be the same for all pages rather than a custom image for each page. I want to avoid adding extensions if possible!
Added: #wgLogo is set and the logo file thus set does appear on the individual pages, but not on the FB link.
It seems that the secret is to set <meta property='og:image'… on every page (https://developers.facebook.com/docs/sharing/webmasters/images/).
To do so without installing extensions, add to your LocalSettings.php:
$wgHooks ['BeforePageDisplay'] [] = function (OutputPage &$out, Skin &$skin): bool {
$out->addMeta ('og:image', '(path to your image)');
return true;
};
Further reading:
https://www.mediawiki.org/wiki/Manual:Hooks/BeforePageDisplay
https://doc.wikimedia.org/mediawiki-core/master/php/classOutputPage.html#a1d667167a39be62f9988e94256508489
The PageImages extension adds the most prominent image used on the page as the OpenGraph image. The WikiSEO extension lets you set it manually (per-page or sitewide).
The object debugger picks up the og:image
Sharer.php does not show the og:image (see screenshot)
If I refresh the sharer.php browser window, the image is showed. (see screenshot)
The image exists when I open sharer.php.
The exact same code worked a month ago, I am sure of this.
To scrape your new page before showing the sharer.php popup, just do the following call using javascript on the client side as soon as the page you want to cache exists:
function onResultPageGenerated()
{
var u = "http://example.com/result.php?id=12345";
$.post(
'https://graph.facebook.com',
{
id:u,
scrape: true
},
function(response){
alert("SCRAPED: " + response);
}
);
}
As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
I know nothing about programming so apologies if I get terminologies wrong.
I need to embed a video from vimeo into tinyMCE editor. This is the embed code that Vimeo provides for its videos:
<iframe src="http://player.vimeo.com/video/24676022" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
When I paste that into the editor and click update, nothing happens. Does it just hate it and won't let me do it or is there a simple workaround?
Are you pasting that HTML code into the HTML version of your tinyMCE editor?
You cannot simply copy and paste HTML into the editor's WYSIWYG editor.
Unless you are doing any post-processing of the HTML you are trying to save, the iframe should be saved (and shown in the final version) as well.
The solution is simply to configure TinyMCE to accept the iframe tag as a valid element.
You can learn more here: http://www.frederikvig.com/2010/10/how-to-add-support-for-iframes-and-other-elements-to-tinymce-in-episerver-cms/
you can use htmlspecialchars_decode($data_from_mysql)
it will display the video in your web browser....
well this works perfect for me..
You can use the following jquery code to embedd iframes into your tinymce created pages:
$(document).ready(function() {
var $obj = $('.mce-object-iframe');
var video_url = $obj.attr('data-mce-p-src');
var width = $obj.attr('width');
var height = $obj.attr('height');
$obj.replaceWith('<iframe width="'+width+'" height="'+height+'" src="'+video_url+'" style="border:0px;"></iframe>');
});
I recently did a small jQuery snippet that allows me to show a loading img until the real image is loaded.
The snippet seems to work in Safari, Chrome but not FireFox.
FireFox only displays a loading alt and never switches to the loaded image.
Here is the snippet
var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
});
Any ideas why?
You haven't said what exactly is happing on FF but below can be one of the problem. From jquery documentation
It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.
Here's the link for plugin.
Edit:
Based on comments from load event, try below:
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
if (this.complete) $(this).trigger("load");
});
Of course, the plug-in seems to be doing same thing along with handling some other scenarios as well as.