I am using 'SwiftSoup' SDK to parse HTML content from UIWebView. I want the image size and resolution for each and every image fetched from HTML content. How to get the image size and resolution as soon as an image is loaded and from HTML content received from SwiftSoup?
Assuming you know when all images from the HTML are loaded, here's a javascript code that can be used to grab a list of sizes for all images:
let script = "JSON.stringify([].slice.call(document.getElementsByTagName('img')).map(function(img) { return {url: img.src, width: img.clientWidth, height: img.clientHeight} }))"
Executing this javascript via stringByEvaluatingJavaScript(from:) should give you a JSON that you can parse to obtain the desired info.
For example the output for this page is
[{"url":"https://i.stack.imgur.com/rQQMq.png?s=48&g=1","width":24,"height":24},{"url":"https://www.gravatar.com/avatar/46be6ae9d14855f5ab1aaf1d510ab8bc?s=32&d=identicon&r=PG&f=1","width":32,"height":32},{"url":"https://clc.stackoverflow.com/impression.gif?an=49ocs77evOWqh-6LVv8gJiaWI_07xL9f6GBcyDt7dl3NWtNsxo9-twOOBzKwMPRsYGBosGdkZGCRZuqawDHjMeecj4L_WRhSDiyObbJ82JRhP5vp7j6Og2e4ru0W9mRhmNs0gbnc8pVcsT0jc2Z-sTTTwxaOliucyy4LsrAwFLRcfRVt-e6KDEjTco4LjVyda4XkgZqaJcJzLa9Oj4RoMrJk4eJgYpBgYGDg4o1ij5VnYhAHsvk4o9gSmZgYRIBsfmYbtrvCTAxiIHH2ALapwv3t9i1z_NRrAA&md=291","width":0,"height":0}]
I'd recommend though to switch to WKWebView since it's recommended also by Apple, and because stringByEvaluatingJavaScript(from:) is blocking (WKWebView provides an async version of this function, and one that also will do the parsing for you, so you can remove the JSON.stringify() call from the script).
Related
I am working on create an extension. My content got a upload part to upload image in the backend. I want to get that uploaded image to use as background image in css. Are there any ways to get the upload image url and which between inline css and css file which one i should use in this situation?
My element i want to set the background image:
I would prefer to use inline styles for the background image. You can get the URL of the image with the f:uri.image view helper:
<div style="background-image:url({f:uri.image(src: '{imageField}')});">
I want to load image in card view with other data like title and desc.
I am uaing php to get result as json response which is working and also i am able to set data to textview and pass from one activity to other !
Only problem i am facing is in setting image in image view.
i can add image manually by making listview obj and storing link in ArrayList obj
Like obj.add(R.drawable.feature1.jpg)
How to do it dynamically from the json response i am getting ?
Sorry if i sound confusing as i am new to android and just want to make a image gallery where first i will display list of albums and after clicking one of albums all images from that albums are loaded and displayed.
{"products":[{"mid":"1","title":"Demo Video 1","link":"https:\/\/m.youtube.com\/watch?v=PCwjNfSM-U","mediaCreatedOn":"2015-08-30 18:59:18","mediaUpdatedOn":"0000-00-00 00:00:00"},{"mid":"2","title":"Demo Video 1","link":"https:\/\/www.youtube.com\/","mediaCreatedOn":"2015-08-30 18:59:18","mediaUpdatedOn":"0000-00-00 00:00:00"}],"success":1}
The above is the output from server side where only the youtube link is replaced by server img location.
Thank you for reading, have a nice day ahead :)
1:You can store image to database Example:mysite.com/img/34324234342.png (phpMysql)
2:And you can get image from php rest service (Only image link)
3:For load image from link , you can use picasso library (android)
4:If you want image with text, you can use custom listview
Example xml for restful service.
<myimage>
<title>abc</title>
<ipath>mysite.com/img/34324234342.png</ipath>
</myimage>
I'm not using any WP cache plug ins. I've noticed that only one png out of the other pngs (and other images) I have on my WP site has a query string attached to it when I look at in Chrome dev tools. It's actually downloaded twice - with and without query string.
The other odd this is that Chrome Dev tools says that the intiator for the png with query string is jQuery. I just include jQuery from Google's CDN, so I'm not changing anything.
Any ideas to why just one of my pngs (why this one?) has a query string attached? Here's what it looks like:
<img src="http://www.mysite.com/wp-content/themes/myTheme/images/slide1Btn.png?1369071380764" alt="">
Please let me know if I haven't included enough information.
Edit
This png is a button on one of the slides I have in a slideshow. I use http://archive.slidesjs.com/ to generate the slideshow. The png images are part of the HTML markup and not generated by the script, however I did find this line in the slides.js code:
// gets image src, with cache buster
var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
I would like to just have the png load once and just be retrieved from the cache on reloads - like each of the pngs will do on subsequent slides in my slideshow. I'm perplexed as to why it only happens to this png.
It might either be :
some argument for a script that dynamically generates or resizes or processes the image (it does not matter that the url has a .png extension, that doesn't necessarily mean that a png file is served statically)
a "cache breaker" - or "cache buster". This can be used to prevent the browser (sometimes also the server) to get the image from a cache, and force it to get it fresh from the server.
Because in this case this looks as a timestamp (unix epoch in milliseconds), I'd bet for the later.
wordpress generates many of the images dynamically, meaning when you access the png you are calling a server page that generates the png dynamically choosing between different images or based on the query string parameters, like size for exmaple.
200px width image.
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=200&h=446&zc=1&q=100
vs
600px width image
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=800&h=446&zc=1&q=100
Is there have any way to do this ? I am trying load some local file in the UIwebview, if the content include Image, loadHTMLString is taking much longer to finish page loading just because have to waiting the download of image file.
As I think if the image can be load in progressive mode, the UIwebview can display the html text on the very beginning to prevent the user keep too long time to waiting for the whole page loading.
P.S. The Image is from the internet,but the html string is on the local file
All you need to do is to have the images to be loaded in the Progressive JPEG format. To convert them using ImageMagick you can type:
convert somefile.xxx -interlace JPEG somefile_progressive.jpg
for example.
Another possible solution could be to load the images using JavaScript, once the page has been loaded fully.
Ie just leave the src blank in the html and set it via JavaScript later.
I would really use Javascript. You'd show a blank page or one with just a part of your content and after your document is ready (maybe use jQuery?) you load the other content.
document.getElementById('content1').innerHTML = "<img src="./images/something.png" alt="" />"
I'm building out an admin area for an ecommerce site where the user can create a new product and upload multiple images to be used for the product. I have a table that lists all of the products, each row shows the first image returned from the database. I can scale down a large image to 100px x 100px but the user is still downloading a big image, not a true thumbnail.
I see two ways of doing this:
1. I can make the user choose which img will be the thumbnail so that the regular img is upload and also a smaller version of the file.
2.I can create thumbnails for every img that is uploaded and append to the filename of the thumbnail img so that I can return the first image that ends with a certain string.
Is there a more elegant way to do this or am I on the right track?
Create a cache directory, then create a script called something like image.php. Link your images like this
<img src="image.php?path=images/img.png&width=100&height=100">
Then in image.php, it should first check in the cache directory if the file exists.
Call the file "img.png&width=100&height=100" and save it in the cache directory. That way you can easily check if it exists, but there is enough entropy for someone to change it to width=101 and height = 101 so that the image will be regenerated.
Each time you create the thumbnail, just store it in the cache directory. If it exists, do a header() call and an echo file_get_contents() and then die().