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.
Related
I'm trying to make some automatic captcha input systems (recognition of figures in captcha image by deep learning and input the figure automatically)
.
For that, the captcha image should be inputted to some deep learning system.
The captcha image in some online web page is in the img src but the src is not ending with some file extension like jpg, png..
It look like the below(it is an example).
img src="/nn/mm/captchaimg?/kk=image"
The above image shown in the web browser is changing after some time periods(about 1,2 min).
If the web including the above image is reloaded, the captcha is changed to another captcha image
(It means that in web crawler, the image is changed to by each request to server).
How to save the above image which has the above special properties in html in crawler?
I'm now doing it with goquery in Golang.
I should do
Saving the captcha image in the web page got by requesting in crawler.
Getting the figures in the above captcha image using my deep learning system.
Input the figures to the form in the above web page in step 1(with maintaining the session, reload or retry of requesting should not be done) and submit
I have done deep learning system in Step 2(test be done, it works well).
But I have no idea of Step 1, 3.
Any advice will be helpful to me.
Thank you in advance.
There are lots of documents about downloading the image in golang crawlier.
But I cannot find the methods to download the images changing by requesting the image URL
(I want to download the first image when I request the web page including the image at first time).
When uploading an image in Netlify CMS, I get a preview image, which however disappears right after a refresh. The image I attached shows the source attribute the preview element uses - it looks like the logic here assumes that the image is already deployed to the same domain (which in turn assumes that the site the CMS manages lives on the same domain as the CMS interface itself). Is there a way to change the base URL just for the preview, e.g. to some kind of https://rawgit/...-like URL. I am looking for a setting that affects only the preview widget behavior and nothing else (where the image is saved, what URL path it adds in the post frontmatter etc).
Thanks in advance for any pointers!
This question exists in different flavors, but not for AJAX pages.
I use AJAX to pull a single video into my page and I want a custom FB share button for it. Everything I've read so far says that FB pulls the required title and image from meta-tags in the page's < head> section (og:image and og:title).
I've tried to change the meta properties when the AJAX call returns, before rendering the share button. This hasn't worked. It uses the values that were present upon initial page load. I have yet to encounter a single answer to this question.
Are there data attributes I can add to the 'fb-like' div to specify a custom title and image (similar to data-href)?
Danke!
You need an individual URL for each individual piece of content that you want to share. Open Graph objects (and simple shared links “become” such, automatically) are identified by their URL (og:url).
Now if your whole page is built on AJAX, you still need to create such individual URLs somehow – the Facebook scraper tool does not “speak” JavaScript, and relies solely on the OG meta information that the server delivers for any URL it requests.
Since the hash part of an URL is only of relevance client-side (and does not even get send to the server), “typical” AJAX URLs that rely on those to tell the client which piece of content to load in the background are no good here.
So if you want to share two pieces of content (videos) as http://www.example.com/?v=vid1 and http://www.example.com/?v=vid2, then you have to make sure that your server delivers the meta data for each video under its respective URL.
I have a problem with images in my web app. let say I have a form where there are some text fields, dropdowns, upload ajax control for multiple image upload and button Save.
I know how to upload images and posting a form and saving everything to database but the problem is that I want to achieve the following user experience:
User can upload multiple images and browser after successful upload shows thumbnail (this I know how to do it)...the problem here is that I do not want to save images to db before button save is pressed. Is there any convinient how to save temporary images...I have tried temp table which after button is pressed, copies all images to image table but here is browser refresh problem that looses all the data and images stay in a temp table. Can you use a session for storing temporary images or any other way (I think session is not particulary good idea for such things.)
One easy way to achieve that is to use the HTML5 File API and display a thumbnail once the user selects a file to upload. You don't even need to waste bandwidth as everything happens on the client. Once the user submits the form, then the image will be uploaded to the server.
Another possibility is to use one of the gazillions of available AJAX upload controls such as Uploadify, Valums Ajax Upload, Uploadify, the jQuery form plugin, ... which will allow you to upload the file to the server using an AJAX request so that you can resize it there and return the resized image to the client that you could display the thumbnail on the client.
Save PNG (etc.) work in this demo in Firefox, but not Chrome.
Convert to PNG (etc.) work in Firefox and Chrome.
Is there a way *in Chrome* to save an image of a canvas element to a local file -- or to a server?
The simplest way to do it is to use the toDataURL() function.
Say you have a canvas:
var canvas = document.getElementById("myCanvas");
Then, with a button with id "saveButton", you can make it pop open a new window with the canvas as a png, and the user can save that page.
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
Sam Dutton: (regarding comment left in Timothy Armstrong's answer) The 'SECURITY_ERR: DOM Exception 18' error that you're getting is probably because in your Canvas you've loaded an image that comes from a different domain, eg. maybe the image is hosted on your server hence why you see the error locally but not when hosted on your server. Whenever you load images from a foreign domain into a Canvas, certain API calls are banned for security reasons such as toDataUrl() and getPixelData(). It's similar to the same origin policy issue you see with cross-domain Ajax calls.
As for SaveAs Canvas, browser implementation is spotty, for browsers that don't support it, I believe you can still have the canvas appear as an image inside an <img /> tag. Just set the src attribute to the data you get back from toDataUrl(), then you can invite the user to right click -> save as. I believe the demo in the link you posted does this.