I am developing an web view app in Android. It provides a HTML5 form which contains a signature pad input that is actually a HTML canvas and after user submits the form the signature will be captured and saved as base64 image format: [Picture: sign to a canvas].
But when submit and reload the form the signature isn't displayed correctly to the web view, it looks like to be scaled down in both width and height dimensions: [Picture: Display image in web view]
The signature is a image with src is a base64 encoded string:
<img class="signature" src="data:image/png;base64,....==">
Please note that this signature is displayed correctly in a Chrome browser.
Could anyone knows why the signature isn't displayed correctly on Android web view?
Thanks in advance
Related
I’m using capacitor pdf-generator plugin to create a pdf. I managed to do so as long as the html code is limited to non image tag, code in which I inject some dynamic data by nesting variable using ${ }.
Now, my aim is to bind the src attribute of an ```img`` tag to a variable so that I can change the logo displayed in the created PDF.
Where I fail: what appears on the PDF is a white space with dashed borders (check picture attached). So I guess that the path must be correct because if not it would show the missing icon (issue I went through before I could format correctly the path).
Anyone who already had that trouble?
Finally bypassed this issue by storing the base64 data when selecting a logo and using it directly in the img tag.
<img src="data:image/png;base64,${base64data} " />
You can convert the images to base64 here https://www.base64-image.de/
then add the codes directly to your image tag
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).
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="" />"
OK, I'm having some issues with my site's mobile stylesheet on the iphone. I reworked the stylesheet to be similar to what http://m.facebook.com give the browser, only I'm getting an issue where the Safari on iPhone browser is still zooming the page out from like 960px, instead of constraining it to the native screen resolution. What gives?
Do you think it has to do with my .container960 class on the body element? I tried reseting those styles with the mobile stylesheet, but maybe it's not reseting the container styles properly.
The site is http://beta.cureinternational.org. You'll need to use username Guest and password guest to view the page.
Have you tried adding a meta-tag like this?
<meta name = "viewport" content = "width = device-width">
Or hard-coding in the dimensions yourself (see Viewport in https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)