- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Google Drive File Picker作为我网站的文件 uploader 。我已经完成了大部分工作,但我一直在尝试获取通过选择器上传的图像的图像 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?
这是一个live demo到目前为止我所拥有的。
最佳答案
在函数 createPicker 中使用 DocsView() 获取驱动器 url 而不是 picasa url。然后使用您的访问 token 打开返回的 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);
}
}
这将返回一个类似于此 https://drive.google.com/file/d/file_id/view?usp=drive_web 的 url,您可以使用 GET 请求向 google https://developers.google.com/drive/v3/web/manage-downloads#downloading_google_documents 下载它
如果你想下载客户端。您可以将回调函数设置为使用返回的文件 ID 和访问 token 进行 blob GET 调用,如下所示。
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();
}
关于javascript - 如何从谷歌选择器上传获取图片网址,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34981909/
我想使用 Angular.js 转换从服务器获取的图像数据(用于 ionic 框架),我使用了这段代码: $http.post(link, { token: token,
我正在为我的应用制作一个登陆页面。如果它们在 iOS 设备上,我希望它只显示“App Store”图标,但在 Android 上隐藏它。如果它们在 Android 设备上,则只有“Play Store
如何在同一页面上多次显示同一张图片? function xdf(){ for (i=0;ihello world'); } } 此代码显示“hello world”10 次。我想要同样的东西,
您好,我有一个 1px 的 png 文件,我试图将其设置为两个水平相邻的 div 的背景图像。html 和 css 如下:- hi hello css是这样的 div { width: 50%
我的 PHP 项目安装了 Prestashop 1.4.9.0。当我添加一个新产品时,我上传了一个PNG格式的图片,但是当它在客户端显示时,图片是JPG格式的。 如何保留图片扩展名? 最佳答案 在后台
我用 http://www.regexper.com查看一个象形表示正则表达式很多。我想要一种理想的方法: 向站点发送正则表达式 打开显示该表达式的站点 例如,让我们使用正则表达式:"\\s*foo[
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端,如 gmail、outlook 或 private,图像是正确的,看起来像这样: PHP邮件程
我正在使用此处找到的示例。 Mozilla developers 我对这个例子很感兴趣。 function upload(postUrl, fieldName, filePath) { var f
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端,如 gmail、outlook 或 private,图像是正确的,看起来像这样: PHP邮件程
我的问题是如何根据用户在javafx中选择的复选框和/或单选按钮生成带有汽车图片设置的按钮? 我正在用汽车图片模拟汽车经销商网站。用户应该能够通过单击复选框和/或单选按钮选择来过滤显示的图片。 我首先
我正在开发Java客户端,它应该支持多种语言。为了翻译文本,我使用 Java ResourceBoundle,它工作正常。 现在问题出在图像上。客户端应加载大约 50 张图像,这些图像是棋盘游戏的特定
我对 jQuery 还很陌生,但我正在寻找一个简单的脚本,通过淡入和淡出的方式在标题中循环 3 或 4 个背景图像。它们是透明的 png,因此我尝试过的许多 slider 都不起作用。 有什么想法吗?
我有一个 HTML 文档,其中包含本地文件的图像,例如: ios - 物理主体大于它分配给的纹理(图片)
我的 Sprite “physicsBody ”属性之一出现问题。 我已经放置了physicsBody节点“barn ”,直接位于 non-physicsBody 之上节点“mound”没有任何问题。
我想剪切图片的特定部分并用它来将剪切的图像与存储在 HDD 中的另一个图像进行比较。问题是我不知道如何获取源图像的特定部分。我知道要裁剪的图像的位置 (X,Y)。 最佳答案 这将加载原始版本并创建
如何使用裁剪实用程序在 javascript 中实现图像 uploader 。你如何通过 AJAX 提交图像文件?解决方案是否跨域兼容? 最佳答案 要实现具有裁剪功能的图片上传小部件,您必须: 将图像
public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityRes
我想在我的 android 应用程序中显示一个国家的图片。国家必须按地区划分。因此,当用户单击特定区域时,应打开特定屏幕。区域也应该用线分隔,以便用户可以看到区域的开始/结束位置。 这是一个国家的例子
首先我想对这个问题表示歉意,因为我知道已经有很多人问过这个问题了。但我搜索的所有答案都没有解决我的问题。所以希望您考虑这个问题并帮助我解决这个问题。 所以基本上我正在尝试上传图像文件,当我提交它时,会
我几乎有了想要的数据...但需要帮助过滤它。 (图在底部) 下面的查询返回状态为 Member-id5 的所有记录,但我需要对其进行过滤。例如:如果我对等做了一个简单的查询。 (exp_channel
我是一名优秀的程序员,十分优秀!