I am currently working on implementing the WebShare API to share an image on both iOS and Android platforms. Surprisingly, my code functions perfectly on Android, but I encountered an issue on iOS where certain apps such as WhatsApp only share the URL instead of the actual image. To tackle this problem, I incorporated additional code to restrict sharing anything other than the image on iOS:
let data = IS_SAFARI ? { files: [], text: '', url: '', title: '' } : { files: [], text: text, url: URL, title: TITLE };
Despite these modifications, the image still fails to display and only the URL is shared:
const URL = 'https://upload.wikimedia.org/wikipedia/commons/2/27/Map_of_Spain_1490.jpg';
const TYPE = 'image/jpeg';
const EXT = '.jpg';
const TITLE = "yourTitle";
const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
function webshare(text) {
let navigator;
navigator = window.navigator;
let data = IS_SAFARI ? { files: [], text: '', url: '', title: '' } : { files: [], text: text, url: URL, title: TITLE };
var xhr = new XMLHttpRequest();
xhr.open('GET', URL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (xhr.status === 200) {
var response = xhr.response;
console.log(response);
var blob = new File([response], text + EXT, { type: TYPE });
data.files.push(blob);
console.log(data);
if (navigator.canShare && navigator.canShare(data)) {
navigator.share(data)
.then(function() {})
.catch(function(err) {
console.error('Unsuccessful share ' + err);
});
}
} else {
console.error('Failed to load ' + URL + ': ' + xhr.status);
}
};
xhr.send();
}<button onclick="webshare('Map_of_Spain_1490.jpg')">Share</button>Are there any suggestions on how to resolve this issue?