I converted all my images to WebP using gulp-webpand I'm using Modernizr to check if webp is enabled and if so, create a new img tag with the webp url. It's working as intended on desktop as far as I can see on Google Page Speed, but on mobile, it says Serve images in next-gen formats still.
Is there another step you have to take for it to work on mobile devices? I can't find anything about it anywhere and I've set up webp exactly as Modernizr says.
Any help would be appreciated.
Modernizr.on('webp', function (result) {
$('.noscript').each(function() {
let img = document.createElement('img');
img.alt = this.getAttribute('data-alt');
img.className = this.getAttribute('data-class');
if (result) {
img.src = this.getAttribute('data-webp');
} else {
img.src = this.getAttribute('data-original');
}
this.parentNode.insertBefore(img, this.nextSibling);
});
});
Then I'd do this in the HTML:
<noscript data-alt="Payment Logos" data-original="/images/common/payment-foot.png" data-webp="/dist/images/common/payment-foot.webp" data-class="mobileHide lazyload" class="noscript">
<img src="/images/common/payment-foot.png" alt="" class="mobileHide">
</noscript>
Related
I am using html2canvas to save a webpage as png. Html2canvas is rendering/capturing svg's correctly in Opera and Chrome. However it is not rendering/capturing svg's completely on firefox. This is the code I am using. I am also using the latest html2canvas.
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
/* theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
window.open(canvas);
*/
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
document.body.appendChild(a);
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.download = 'Human Insights - O&E.png';
a.click();
// Clean up
//document.body.removeChild(canvas);
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
}
}, {
allowTaint: true,
});
});
});
This is the image captured using html2canvas on firefox version :56.0 running on windows 7
This is the image captured using html2canvas on chrome Version 61.0.3163.100 (Official Build) (64-bit) running on windows 7
I am working on an app with node-webkit to get some data of a TIFF-image. Because of TIFF-images are not supported by webkit, I want to create a temporary PNG version to show it in the app. How could I do this? Is there a way or place for temporary files in node-webkit like App.dataPath? Or should I use another node module node-temp?
I'm looking very forward to get your answers soon. Thank you.
You don't need to create temporary image file, try data URL.
<h1>You will see an image later</h1>
<img id="img" src="">
<script type="text/javascript">
//start js code here
var data_prefix = "data:image/png;base64,";
var img = document.getElementById('img');
var xhr = new XMLHttpRequest();
xhr.open('GET','https://avatars2.githubusercontent.com/u/1356417?s=140',true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
var arr = new Uint8Array(this.response);
var raw = String.fromCharCode.apply(null,arr);
var b64=btoa(raw);
var dataURL="data:image/jpeg;base64,"+b64;
img.src = dataURL;
};
xhr.send();
</script>
Yes, consider using the HTML5 File APIs if you are after a pure client-side solution.
This article has you covered.
This is, of course, assuming that you are manipulating the TIFF data in client-side Javascript, and want to write it to a temporary .png file.
I just basically want to get the "http://... .png" or "http://... .jpg" location of my canvas as an image.
I have already tried toDataURL() but it is not working. Especially if I loaded an image within the canvas.
Here is my code: (btw, I'm using jQuery here)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var canvas = $("#canvas");
var ctx = canvas.get(0).getContext("2d");
var image1 = new Image();
image1.src = "http://www.helpinghomelesscats.com/images/cat1.jpg"
$(image1).load(function(){
ctx.drawImage(image1,0,0,200,200);
});
});
</script>
with my html/body having only this:
<canvas id="canvas" width="500" height="400"></canvas>
now, if you try that, that works fine. it shows that cat.
but when i add that toDataURL into my script, it just doesn't happen.
var dataImg = canvas.get(0).toDataURL();
i load this dataImg variable into another click-redirect function to test it, hoping it would redirect to the page using the base64 url it contains, but it just doesn't work:
$("#canvas").click(function(){
document.location = dataImg;
});
it brings me to a blank page? what am i missing here?
thank you very much!
Do you own http://www.helpinghomelesscats.com or is your code hosted directly on that site? If not you won't be able to do this due to cross site origin policies. The best way would be to have some server side code grab the image and then serve it locally on your domain.
If you do own helpinghomelesscats.com this should work, as tested here
Live Demo
Click the canvas and view the log in order to see the response.
Not sure what would be causing this, but when I upload some images to my remote server via FileTransfer(), the images sometimes show up either sideways or upside down. However, when I view the images locally on the iPhone, they are positioned in the correct way.
For example, when I select an image like this to upload: http://sharefa.st/view/WBe2QNSK8r8z
It will turn out like this: http://sharefa.st/view/EWdW1Z4G8r8z
I am using the local path to transfer the file, so I don't understand why the image would rotate "randomly".
Here is my upload function:
function uploadPhoto() {
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
options.mimeType = 'image/jpeg';
var params = new Object();
if(logged_in == true) {
params.unique_id = app_unique_id;
params.secret_key = user_secret_key;
}
options.params = params;
loadingStart();
var ft = new FileTransfer();
ft.upload(imgURI, 'http://' + remote_server + '/API/upload', uploadDetails, fail, options);
}
imgURI value looks like this:
file://localhost/var/mobile/Applications/<snip>/tmp/photo_015.jpg
Any insight is appreciated.
Thanks to Humanoidism pointing out that the issue was in fact with the iPhone, and the way it stored images, I was able to figure out a solutuion.
To upload photos in the correct orientation you must add the correctOrientation setting to the options array in getPicture(), and set it to true.
Here are two examples:
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30,
destinationType: destinationType.FILE_URI,
sourceType: source,
correctOrientation: true });
}
The problem is not PhoneGap but iPhone. The iPhone was designed to be used as a wide lens camera. Turn the phone sideways when taking pictures or capturing video if you intend to view them on desktop. Your phone will display them correctly, because it "knows" how you took them, but the computer that you're viewing it on dosen't.
What you could do to prevent this is to rotate the picture before the upload. This is not a recommended fix but at least people on desktop computers will be able to see it. Though when viewing them on iPhone they'll be rotated - maybe a check for mobile devices wether or not to rotate the image could come in handy - but still again, not recommended.
With firebugs net tab open i stated zooming in and out of google map and i found its making requests for the png images.
Ok with this i understood that we can request the images using the Ajax. but wait ? i always used to request html, jsox, txt and xml. Image ........ its strange for me ? Can some one please elaborate on this ?
Also i would like to know if text is downloaded we add it to some DOM element and it show up. How images retried from the ajax can be accessed ?
Any help or pointer will be great help :)
GMaps doesn't make XMLHttpRequests to get the images. They instead use a normal <img /> element that is injected via javascript.
They then use the "onload" and "onerror" events to detect if the image was loaded correctly.
They retry a download of the image if it times out. This is achieved by setting a timer and once it expires re-setting the src property of the image.
var tile = document.createElement('img');
var url = 'http://sometilehost/X.Y.Z.png';
var downloadTimeout = 10000; // Retry in 10 seconds
// Tile downloaded successfully
tile.onload = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile downloaded');
};
// The tile couldn't be downloaded. 404, 503 ...
tile.onerror = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile not downloaded');
};
// This will fire if the tile doesn't download in time
tile.downloadTimer = window.setTimeout(function () {
tile.src = url; // Start the download again
}, downloadTimeout);
tile.src = url;