Ok so I have an codeigniter application. Now on page1 I have an ajax that gets a html content full of google cloud cdn images from page2 & then appends the content to a div. I am using html2canvas to get that div content to a canvas on page1. Now clearly at this point the canvas on page1 is tainted. My question is how to get toDataUrl working! Need a snap of the canvas.
Here's what I have tried so far:
Have added a proxy (both php n js) with html2canvas like this.. it helped me get out of the issue of html2canvas not being able to load images from cdn-
html2canvas(div_content,{
proxy: "proxy.js",
useCORS: true,allowTaint: true}).then(function(canvas) {
var img=canvas.toDataurl();
});
tried adding cross-origin headers on both controller constructors that serves page1 & page2 both ways below but din't work.
I. header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");
II. $this->output->set_header('Access-Control-Allow-Origin: *');
P.S : Do not give a solution of downloading the images in the local storage & use them on page2 as I am using Google App Engine standard & I can only write/store files on bucket!
Due to lack of time I had to implement a quick solution that was pretty obvious. Since I didn't have the luxury of having cross-origin set to anonymous for all the image elements after load using js, instead of using images having source from cdn, I converted all of them to base64 encoded data url. If anyone could provide a tested solution for the problem, please do later. But if someone is in a hurry then this is a quick solution.
<img src="<?php echo 'data:image/png;base64,'.base64_encode(file_get_contents(<cdn-img-link>));?>">
P.S : All of my images were of type png
Related
After load the article/page, I then make ajax call to get the article images from API, So the images of article get loaded after page load (and that's because bring them take long time), Now I want to make the returned image as og:image value.
See as an example this page for specific car:
http://arabiauto.com/Autos/Details/63577
How make the facebook share show the image of car (that come by ajax after load page)?
Any help please?
I'm using a jQuery slider to display a series of images and none of them are showing in a Google image search, even though we rank at the top of normal search results for the relevant keyword. My suspicion is that Google is not indexing the images because they're being (lazy-)loaded into the slider with JavaScript via the data-image attribute. It is critical for performance purposes that I lazy-load the images and not use a set of standard <img> tags instead, so I'm trying to figure out the best way to serve the assets in a way that's more easily indexed by search engines. I'm considering using the <noscript> tag within the slide markup as follows:
<li class="slide" data-image="img/image.jpg">
<div class="caption">IMAGE INFO</div>
<noscript><img src="img/image.jpg" alt="Image info" width="x" height="x"></noscript>
</li>
I'm curious if there are any potential issues with this approach, or if something entirely different would be preferable? Will search engines still consider this markup relevant with respect to SEO if it's contained within <noscript> tags?
Thanks for any insight here.
The noindex tag is a solution, but not the best one.
I had the same problem, first I tried image sitemaps, then noindex tag and finally I found the best solution.
I wrote a blog post on this with a fully working example:
Lazy loading and the SEO problem, solved!
The best solution is to use the method provided by Google to index AJAX contents. But it is not limited to AJAX, in fact you can use it on any dynamically generated content.
In my sample I use this method for an image gallery that loads images dynamically.
In a few words you have to use escaped fragments.
A fragment is the last part of the URL, prefixed by #. Fragments are not propagated to the server, they are used only on the client side to tell the browser to show something, usually to move to a in-page bookmark.
If instead of using # as the prefix, you use #!, this instructs Google to ask the server for a special version of your page using an ugly URL. When the server receives this ugly request, it's your responsibility to send back a static version of the page that renders an HTML snapshot (the not indexed image in our case).
I generate HTML snapshots on the server side using ASP.NET (but you can generate them with any technology).
var fragment = Page.Request.QueryString["_escaped_fragment_"];
if (!String.IsNullOrEmpty(fragment))
{
var escapedParams = fragment.Split(new[] { '=' });
if (escapedParams.Length == 2)
{
var imageID = escapedParams[1];
// Render the page with the gallery showing the requested image (statically!)
...
}
}
The drawback of noscript tags method is that you provide a poor user experience, in fact the user is not able to bookmark the page showing a specific image.
Using fragments and JavaScript you give users the best experience
if (window.location.hash)
{
// NOTE: remove initial #
var fragmentParams = window.location.hash.substring(1).split('=');
var imageToDisplay = fragmentParams[1]
// Render the page with the gallery showing the requested image (dynamically!)
...
}
Masters,
I have a scenario where i have a list of Items and on clicking single item it gets details along with image src url using ajax call.
I want to display(render) image right on page.
Now Image source URL is a FileActionResult returning Base64 string.
The problem is the page does not render image although it is having correct Src URL.
And I don't want any additional Ajax call.
Please Help.
Thanks in advance.
How are you forcing the image to be updated?
The DOM is going to keep the image the same until you tell it to refresh the image -- I would suggest using something like
document.getElementById('theImg').src="/newImg.gif?unique=someuniquestring";
where someuniquestring is a new random datetime or something (to make sure browsers like IE don't cache the GET request).
I am looking to have an embedded youtube video with several images below it that correspond to different youtube videos. I want to set it up so that when an image is clicked on, the video above changes to whichever video corresponds with the clicked image. An implementation of this can be seen here: http://www.seanhayesmusic.com/2012/media/
I am trying to implement this into a wordpress site and I really only have skill in HTML and CSS. I would very greatly appreciate if someone could help me with the code for this!
Just look at the source. it's just html. He's got the youtube video in an iframe, and there's an <a> tag around the thumbnails with target= attribute making the link change the iframe.
Alternatively, you could actually embed the video on the page, and use javascript (and jquery if you want it to be easier) to alter the embed code when you click on the thumbnails. This method would probably be better and easier.
Go to the youtube page for each video, click "share" then "embed" and copy the html.
While you're there, take a screenshot. Crop/resize to make the video thumbnail.
For the default video (the one that plays/shows before you click thumbnail) paste in the full embed code (from step 1) into your page. add this to the <iframe> tag: id="video_player"
For the other videos, put your thumbnail image on your page as normal, then add a <a> tag around the image like this: <a href="#" onclick="$('#video_player').attr('src', 'http://www.youtube.com/embed/paPT5qxM9m0'); return false"> (except of course you need to fix the url, with the one in the embed code for that video
If you don't already have it, source jquery into your page. That means adding something like the following to your <head> tag: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
I want to put a image into a post, but it seems I just cannot get it work.
For example, this one:
http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913
The output is a PNG file. So in HTML tab, i put,
< img src="http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913">,(I leave a empty space between the < and image otherwise, stackoverflow won't allow me to put a image tag here) it just won't show up the correct image. The image you will see is "go to stockcharts.com to view this chart", that is because the URL is wrong. If the URL is correct, the image will display fine. Any way to work around?
I was trying to play around with the formatting.php file, but so far, no luck.
(It is quite strange though, if you put the URL into your IE URL bar, and press enter, it shows up fine with a chart.)
Thanks.
Your URL is a web page, NOT an image. When you try to insert the link as an image, the html IMG tag is used to specify the FILE NAME to be inserted. The file can be on a different url but it should not refer to just another uri.
to get around it, you have 4 options:
Specify the image file name directly and not the uri with the img tag.
Use iframe and put the uri
use frame (I'd not go for this)
Use Ajax and fill it in a DIV tag - most effective in my opinion.