WebShare API分享文件?

huangapple go评论75阅读模式
英文:

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.");
    }
 
});

huangapple
  • 本文由 发表于 2020年1月7日 00:35:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/59615752.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定