Is there any caching policy of images in GitHub?
I am facing trouble while rendering an image from an API. The image works fine when I open it in the browser.
However, Github renders some older version of that image.
How can I workaround this issue or is there any fix?
Considering this netlify/netlify-cms PR, maybe adding the ts=$(date) as parameter of a GitHub API v3 call would be enough of a "cache busting" for your need.
From the code:
const cacheBuster = new Date().getTime();
const params = [`ts=${cacheBuster}`];
if (options.params) {
for (const key in options.params) {
params.push(`${ key }=${ encodeURIComponent(options.params[key]) }`);
}
}
if (params.length) {
path += `?${ params.join("&") }`;
}
return this.api_root + path;
This adds a &ts=xxx timestamp parameter to the api.github.com call.
Related
I've been trying to add an image overlay to mapbox-gl-js on a project that uses Ionic 5 + Vue.js, similar to what Leaflet does, but i cannot get it to work.
The only way that I can get it to work is by following this tutorial, but the image does not fit properly into the polygon. I've also tried this, and I can see when Capacitor requests the image, but it does not load. It works fine on Chrome, but on mobile it does not.
This is the code that I have now:
const { map } = this;
if (map.getLayer(layerId)) {
map.removeLayer(layerId);
}
if (map.getSource(sourceId)) {
map.removeSource(sourceId);
}
map.addSource(sourceId, { ...source, url: Capacitor.convertFileSrc(source.url) });
map.addLayer(layer);
whereas the source and layer objects are like this:
const sourceId = `${talhao.id}-image`;
const layerId = `${talhao.id}-image-${image.id}`;
const bbox = getBoundingBox(talhao);
const source = {
type: "image",
url: image.imagemPng,
coordinates: [
bbox.getNorthWest().toArray(),
bbox.getNorthEast().toArray(),
bbox.getSouthEast().toArray(),
bbox.getSouthWest().toArray()
]
};
const layer = {
id: layerId,
source: sourceId,
type: "raster",
paint: {
"raster-opacity": 0.85
}
};
Any help would be appreciated!
edit: It is worth noticing that I do not think that the image is the problem here, because I use the same image in another part of the screen that I'm working and it loads fine.
Turns out the mapbox-gl-js library had a bug in version 1.x that prevented the image from showing on mobile.
Upgraded to version 2.0.1 and it worked.
My intent:
I want my app to upload images to S3. If image already exists, server should record a reference to existing image rather than asking for an upload of another copy.
How I imagine that works:
Hash image data
Send hash to server with request for signed url (to upload to AWS S3)
If hash matches something already stored, reference it and tell app
Initial thoughts:
Use imageEditor.cropImage to get image into ImageStore, which will give me an appropriate uri. Then use getBase64ForTag(uri, success, failure) to retrieve base64 data for a hash calculation.
The problem:
According to the answer on this question, this process is not efficient in the least. The usual solution would be to use native methods, as described in the answer to this question, however I do not want to eject my Expo app for this feature.
My Question:
Is there a better way to hash image data? Or more fundamentally, is there a better way of ensuring that identical images are not duplicated in S3 storage?
EDIT 2020-10-21 :
The library updated itself, and you should now call:
_hashImage = async (imageUri) => {
return await FileSystem.getInfoAsync(imageUri, { md5: true } );
}
ORIGINAL:
It turns out that Expo provides this out of the box.
Expo.FileSystem.getInfoAsync
myImageHashFunction = async (imageUri) => {
let fsInfo = await Expo.FileSystem.getInfoAsync(imageUri, [{ md5: true }] )
console.log(fsInfo.md5)
}
If you are still looking for a solution:
This is how I got it working - create a base64 of the image and then create a hash of it.
import * as FileSystem from 'expo-file-system';
import * as Crypto from 'expo-crypto';
let info = await FileSystem.readAsStringAsync(imageUri,
{ encoding: FileSystem.EncodingType.Base64 });
const hashData = await Crypto.digestStringAsync (
Crypto.CryptoDigestAlgorithm.MD5,
info
)
I'm trying to figure out how to make a Google Apps Script deployed as a web app download a PDF that's generated on a click. It almost works, but the resulting file isn't valid. I can't figure out if it's an encoding issue or something else.
In Apps Script the code looks simple:
function makePDF() {
...
var pdfBlob = doc.getAs('application/pdf');
return Utilities.base64Encode(pdfBlob.getBytes());
}
In the browser, there's a click handler:
function clickHandler(ev) {
ev.preventDefault();
google.script.run
.withSuccessHandler(function(data) {
var pdf = new Blob([window.atob(data)]);
var href = window.URL.createObjectURL(pdf);
var link = document.querySelector('#hiddenLink');
link.href = href;
link.click();
})
.makePDF();
}
Any suggestions?
Thanks!
I figured it out, so posting the answer if anyone else is trying to pass a PDF from Apps Script to the client javascript. It's all much simpler than I had made it.
Rather than messing around with base64 encodings, just pass back the bytes array:
function makePDF() {
...
var pdfBlob = DocumentApp.openById('1234').getAs('application/pdf');
return pdfBlob.getBytes();
}
Now, on the client side, construct a new Blob from an ArrayBuffer. That's easy too:
function clickHandler(ev) {
google.script.run
.withSuccessHandler(function(data) {
var arr = new Uint8Array(data);
var blob = new Blob([arr.buffer], {type: 'application/pdf'});
var obj_url = window.URL.createObjectURL(blob);
var hiddenLink = document.getElementById('hiddenPDFLink');
hiddenLink.setAttribute('href', obj_url);
hiddenLink.setAttribute('download', 'filename.pdf');
hiddenLink.click();
})
.makePDF();
}
And that's it! Hope someone else finds this helpful.
I assume that your makePDF function is doing some other stuffs/Calculation and at the end you need that document to be downloaded to local computer.
What you can do is inside success handler
var link = document.querySelector('#hiddenLink');
link.href = "https://docs.google.com/feeds/download/documents/export/Export?id=**TheIdOfDocumenToBeDownloaded**&exportFormat=pdf";
link.click();
It will then give you a prompt to save document on to local computer.
I'm building an app with titanium and I would like to save in the phone, the user's profile picture. In my login function, after the API response, I tried to do :
Ti.App.Properties.setString("user_picture_name", res.profil_picture);
var image_to_save = Ti.UI.createImageView({image:img_url}).toImage();
var picture = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, res.profil_picture); //As name, the same as the one in DB
picture.write(image_to_save);
And in the view in which I want to display the image :
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,Ti.App.Properties.getString("user_picture_name") );
var image = Ti.UI.createImageView({
image:f.read(),
width:200,
height:100,
top:20
});
main_container.add(image);
But the image doesn't appears. Could someone help me ?
Thanks a lot :)
There are 2 issues with your code:
1 - You cannot use toImage() method unless your image view is rendered on UI stack or simply on display. Rather you should use toBlob() method.
2 - Point no. 1 will also not work the way you are using because you cannot directly use toBlob() method until or unless the image from the url is completely loaded, means until it's shown on image view. To check when the image is loaded, use Ti.UI.ImageView onload event
But, there's another better approach to do such type of tasks.
Since you have the image url from your Login API response, you can use this url to fetch image from http client call like this:
function fetchImage() {
var xhr = Ti.Network.createHTTPClient({
onerror : function() {
alert('Error fetching profile image');
},
onload : function() {
// this.responseData holds the binary data fetched from url
var image_to_save = this.responseData;
//As name, the same as the one in DB
var picture = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, res.profil_picture);
picture.write(image_to_save);
Ti.App.Properties.setString("user_picture_name", res.profil_picture);
image_to_save = null;
}
});
xhr.open("GET", img_url);
xhr.send();
}
You don't need to manually cache remote images, because
Remote images are cached automatically on the iOS platform and, since
Release 3.1.0, on the Android platform.
[see docs here & credit to Fokke Zandbergen]
Just use the remote image url in your UI, at first access Titanium will download and cache it for you; next accesses to the same image url will actually be on the automatically cached version on local device (no code is best code)
Hth.
I am using Google Place Api where is on some results "photo_reference" (similar to "reference") value. I cannot find any mention about that how to use it to get that photo. I know how to use "reference" to get PlaceDetail and I am sure that usage of photo_reference will be similar, but I cannot find JSON/XML URL for this photo_reference request. Thank you for any help. Pavel
Please take a look at documentation here: https://developers.google.com/places/documentation/photos
They've just announced this new Place Photos feature
In short this is how you should use this new feature:
https://maps.googleapis.com/maps/api/place/photo?photoreference=PHOTO_REFERENCE&sensor=false&maxheight=MAX_HEIGHT&maxwidth=MAX_WIDTH&key=YOUR_API_KEY
just substitute your own values in place of:
PHOTO_REFERENCE
MAX_HEIGHT - int value from 1 to 1600
MAX_WIDTH - int value from 1 to 1600
YOUR_API_KEY
and you are done
The Places API now supports the return of one place photo if available for a Place Search request and up to ten place photos for a Place Details request.
If a photos array is returned with your request, you can pass the photo_reference from a contained photo object to a Place Photo request with the maxheight and/or maxwidth, sensor and key parameters:
https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&sensor=false&key=AddYourOwnKeyHere
Please see the documentation for more details.
please bear in mind that there are no free photo requests anymore.
At this moment (November 2020), it is $7.0 for 1000 requests (if your volume is up to 100,000). Check the photo below.
Read more on Google Places billing info page.
Step 1: The URL you should use to call Google Place Photos is :
String url = https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=PHOTOREF&key=YOUR_API_KEY
Refer: https://developers.google.com/places/web-service/photos
Step 2: Since the above URL redirects to another URL, use HTTPClient, as it automatically handles redirect stuff.
Code:
DefaultHttpClient hc = new DefaultHttpClient();
HttpGet httpget = new HttpGet(url);
HttpContext context = new BasicHttpContext();
hc.setRedirectHandler(new DefaultRedirectHandler() {
#Override
public URI getLocationURI(HttpResponse response,
HttpContext context) throws org.apache.http.ProtocolException {
//Capture the Location header here - This is your redirected URL
System.out.println(Arrays.toString(response.getHeaders("Location")));
return super.getLocationURI(response,context);
}
});
// Response contains the image you want. If you test the redirect URL in a browser or REST CLIENT you can see it's data
HttpResponse response = hc.execute(httpget, context);
if(response.getStatusLine().getStatusCode() == 200) {
// Todo: use the Image response
HttpEntity entity = response.getEntity();
if (entity != null) {
InputStream instream = entity.getContent();
Bitmap bmp = BitmapFactory.decodeStream(instream);
ImageView imageView = new ImageView(context);
imageView.setImageBitmap(bmp);
images.add(imageView);
instream.close();
}
}
else {
System.out.println(response.getStatusLine().getStatusCode()+"");
}
Hope this helps everyone.
After initiating map you can get place details with it's images
const service = new window.google.maps.places.PlacesService(map);
service.getDetails(
{
placeId: "some_place_id_here"
},
(data, status) => {
if (status === window.google.maps.places.PlacesServiceStatus.OK) {
data.photos &&
data.photos.forEach(photo => {
console.log(photo.getUrl({ maxWidth: 500, maxHeight: 500 }));
});
}
}
);
Solving the PhotoReference issue for Javascript
User #R.K solved this issue in java, however in js you need to use fetch(). Here's the code I used:
await fetch(proxyUrl+url).then(async(ref)=>{
await ref.blob()}).then((image)=>{
// do what you need to do
console.log(image)
}).catch((err)=>{
console.log(err);
})
In this, I used a heroku link for the proxyUrl and the url shown in #Chriss Green's post for url. Hope this helps anyone confused using js!