英文:
WebShare Api sharing files?
问题
嗨,我想使用新的API分享图像。
如果我有一个用于上传文件的表单,我可以使用API分享该文件,我头疼地尝试分享本地文件。这是我的尝试:
function sharePage(){
const title = document.title;
var filesArray = [];
$.get(baseurl+"images/cover.jpg", { async: false }, function(data) { filesArray.push(data); });
setHashtag('share');
if(navigator.share){
if(navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
text: 'FILE',
files: filesArray,
title: title,
url: baseurl
});
}else{
navigator.share({
text: 'NO FILE',
title: title,
url: baseurl
});
}
}else{
document.location.href="whatsapp://send?text="+baseurl;
}
}
编辑:
问题是,我不知道如何将服务器端文件实现到此脚本中,例如 var file = baseurl+"images/cover.jpg"; 我尝试使用 jQuery 的 $.get,但它不起作用。
英文:
Hy i want to share images with the new api.
If i have a upload-form for a file, i can share that file with the api, i break my head trying to share a local file. Here my try:
function sharePage(){
const title = document.title;
var filesArray = [];
$.get(baseurl+"images/cover.jpg", { async: false }, function(data) { filesArray.push(data); });
setHashtag('share');
if(navigator.share){
if(navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
text: 'FILE',
files: filesArray,
title: title,
url: baseurl
});
}else{
navigator.share({
text: 'NO FILE',
title: title,
url: baseurl
});
}
}else{
document.location.href="whatsapp://send?text="+baseurl;
}
EDIT:
The problem is, that i don't know to implement a serverside-file to this script something like var file = baseurl+"images/cover.jpg"; I tried with jquery $.get but it doesn't work
答案1
得分: 29
I get it working by requesting a blob and generating a File object. Something like this:
fetch("url_to_the_file")
.then(function(response) {
return response.blob()
})
.then(function(blob) {
var file = new File([blob], "picture.jpg", {type: 'image/jpeg'});
var filesArray = [file];
if(navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
text: 'some_text',
files: filesArray,
title: 'some_title',
url: 'some_url'
});
}
});
英文:
I get it working by requesting a blob and generating a File object. Someting like this:
fetch("url_to_the_file")
.then(function(response) {
return response.blob()
})
.then(function(blob) {
var file = new File([blob], "picture.jpg", {type: 'image/jpeg'});
var filesArray = ;
if(navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
text: 'some_text',
files: filesArray,
title: 'some_title',
url: 'some_url'
});
}
}
答案2
得分: 6
在TypeScript中使用async/await,假设您已经检查了navigator.share
是否可用:
const image = await fetch(imageUrl);
const blob = await image.blob();
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
navigator.share({ text: 'some_text', files: [file] } as ShareData);
英文:
Same in TypeScript with async/await (assuming you checked navigator.share
is available):
const image = await fetch(imageUrl);
const blob = await image.blob();
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
navigator.share({ text: 'some_text', files: } as ShareData);
答案3
得分: -1
I get it working by requesting a blob and generating a File object. Something like this:
fetch("Url-image-complete")
.then(function(response) {
return response.blob()
})
.then(function(blob) {
var file = new File([blob], "Name-image-with-extension", {type: 'image/jpeg'});
var filesArray = [file];
var shareData = { files: filesArray };
if (navigator.canShare && navigator.canShare(shareData)) {
// Adding title afterwards as navigator.canShare just
// takes files as input
shareData.title = "Name";
navigator.share(shareData)
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log("Your system doesn't support sharing files.");
}
});
英文:
I get it working by requesting a blob and generating a File object. Someting like this:
fetch("Url-image-complete")
.then(function(response) {
return response.blob()
})
.then(function(blob) {
var file = new File([blob], "Name-image-whith-extension", {type: 'image/jpeg'});
var filesArray = ;
var shareData = { files: filesArray };
if (navigator.canShare && navigator.canShare(shareData)) {
// Adding title afterwards as navigator.canShare just
// takes files as input
shareData.title = "Name"
navigator.share(shareData)
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log("Your system doesn't support sharing files.");
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论