Как получить URL изображения из Google Picker
Я пытаюсь использовать Google Drive File Picker в качестве загрузчика файлов для моего сайта. У меня почти все работает, но я застрял, пытаясь получить URL-адрес изображения для изображений, загружаемых с помощью средства выбора. Вот JS у меня сейчас:
/******************** Google Picker Script ********************/
var developerKey = 'AIzaSyCCKBK236c5tH7pUjHlz485R7Xi-m64EDg', //Browser API key
clientId = '958305636628-7hvvhnprofn4thnvatdhc7pvucd2efkf.apps.googleusercontent.com', //Client ID
scope = ['https://www.googleapis.com/auth/photos','https://www.googleapis.com/auth/photos.upload','https://www.googleapis.com/auth/drive.readonly'], //Permission scope
pickerApiLoaded = false,
oauthToken;
function onApiLoad() {
// Use the API Loader script to load google.picker and gapi.auth.
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize({
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
}
function createPicker() {
// Create and render a Picker object for picking user Photos.
if (pickerApiLoaded && oauthToken) {
var picker = new google.picker.PickerBuilder().
addView(google.picker.ViewId.PHOTOS).
addView(google.picker.ViewId.PHOTO_UPLOAD).
addView(google.picker.ViewId.IMAGE_SEARCH).
addView(google.picker.ViewId.VIDEO_SEARCH).
addView(google.picker.ViewId.DOCUMENTS).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
}
function pickerCallback(data) {
// A simple callback implementation.
var url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
console.log(doc);
var thumbs = data.docs[0].thumbnails;
var imageURL = thumbs[thumbs.length - 1].url; //select the largest image returned
}
var message = 'You picked: <br/><img src="'+imageURL+'"/>';
document.getElementById('result').innerHTML = message;
}
Как вы можете видеть в функции pickerCallback, она выбрала самое большое изображение в возвращаемых данных JSON. Тем не менее, это изображение имеет ширину всего 512 пикселей, когда загруженное изображение намного больше. Фотография показывается в полном разрешении в моей библиотеке Google Фото, но я не могу найти способ получить версию в высоком разрешении программным способом. Вот данные JSON, которые сборщик возвращает после загрузки:
Object {id: "6228330388484160754", serviceId: "picasa", mimeType: "application/vnd.google-apps.photo", name: "20151128_205613.jpg", description: ""…}
description: ""
iconUrl: "https://ssl.gstatic.com/docs/doclist/images/icon_10_generic_list.png"
id: "6228330388484160754"
lastEditedUtc: 1448762173000
mediaKey: "AF1QipMhAlAX4va1MMnOF_yNzYBPFN0eg75xQ12Cu16g"
mimeType: "application/vnd.google-apps.photo"
name: "20151128_205613.jpg"
parentId: "6228330389946890849"
rotation: 0
serviceId: "picasa"
sizeBytes: 2449784
thumbnails: Array[5]
0: Object
height: 32
url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s32-c/20151128_205613.jpg"
width: 32
1: Object
height: 64
url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s64-c/20151128_205613.jpg"
width: 64
2: Object
height: 72
url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s72-c/20151128_205613.jpg"
width: 72
3: Object
height: 225
url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s400/20151128_205613.jpg"
width: 400
4: Object
height: 288
url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/20151128_205613.jpg"
width: 512
length: 5
type: "photo"
url: "https://picasaweb.google.com/101379568166574033142/20151215#6228330388484160754"
version: 56833
Еще пара вещей, часть url данных, связана с увеличенной, но все еще не в полном разрешении, картинкой в Веб-альбомах Picasa. Это надежный источник для URL изображения? И если так, как я могу извлечь URL оттуда?
Вот живая демонстрация того, что я имею до сих пор.
2 ответа
Используйте DocsView() в вашей функции createPicker, чтобы получить URL-адрес диска, а не URL-адрес Picasa. Затем откройте возвращенный URL с вашим токеном доступа.
Вот полный рабочий пример с некоторыми дополнительными настройками
function createPicker() {
if (pickerApiLoaded && oauthToken) {
var view = new google.picker.DocsView();
//start on drive root and include folders to avoid the default flat file list
view.setParent('root');//optional
view.setIncludeFolders(true);//optional
var picker = new google.picker.PickerBuilder().
addView(view).
addView(google.picker.ViewId.DOCS).
enableFeature(google.picker.Feature.MULTISELECT_ENABLED).//optional
enableFeature(google.picker.Feature.NAV_HIDDEN).//optional
setOAuthToken(oauthToken).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
}
Это вернет URL-адрес, похожий на этот https:// drive.google.com/file/d/file_id/view?usp=drive_web, который можно загрузить с помощью запроса GET в Google https://developers.google.com/drive/v3/web/manage-downloads
Если вы хотите скачать его на стороне клиента. Вы можете настроить функцию обратного вызова для вызова GET BLOB-объекта, используя идентификатор возвращенного файла и токен доступа, как показано ниже.
function pickerCallback(data) {
var id = data[google.picker.Response.DOCUMENTS][0].id;//can be a loop if multiselect is enabled
var accessToken = gapi.auth.getToken().access_token;
var xhr = new XMLHttpRequest();
var url = "https://www.googleapis.com/drive/v3/files/" + id + "?alt=media";
xhr.open('GET', url);
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.responseType = "blob";
xhr.addEventListener('load', function(e) {
var blob = this.response;//this is your blob file
});
xhr.send();
}
Вы не получите URL-адрес изображения, который напрямую доступен для получения вашего файла изображения, однако вы можете получить исходное изображение, используя идентификатор, возвращаемый picker api, следующим образом
GET https://www.googleapis.com/drive/v3/files/0B9jNhSvVjoIVM3dKcGRKRmVIOVU?alt=media
Authorization: Bearer [Your access token]
Используйте это, чтобы получить содержимое вашего файла и отобразить его как изображение, используя возвращенный mimeType