I am facing a difficult situation here. I am building an Open Web App that display Tweets. If any of these tweets contains an URL to an image, we display the image with an image tag. I want to give the user the option to save this image to his album or share it using the share web activity.
All web activities that work on image expect a blob to work. We can't simply pass a URL to it. I can't build a blob from a remote image because as soon as I try using a drawImage canvas call to blit that image into the canvas I get an security error on the canvas due to the image not coming from the same origin as the app.
This "security" prevents all types of fiddling with remote images such as saving it to disk or using web activities.
I understand this is a part of the spec but I don't really understand the purpose. Its just images after all and if I am scripting the save of a remote image there is a chance that I know what I am doing but then again I was not a part of the w3c group that decided about that spec and those folks are much smarter than I am so I am probably overseeing something...
Anyway, lets summarize: "How do I go from an img tag with its source pointing at a remote location which is not the same as the Open Web App to a blob that I can use with web activities?"
Thanks
Then Share activity does support using a URL. The Boilerplate app has an example of this. If you do not mind your app being privileged (Which requires a thorough review by the marketplace) you can try using a systemXHR. The code will look similar to:
var xhr = new XMLHttpRequest({
mozSystem: true
});
xhr.open("GET", "url to image", true);
xhr.responseType = "blob";
xhr.onload = function () {
//sample activity - use any activity that requires blob
var activity = new MozActivity({
name: "open",
data: {
type: "image/png",
blob: this.response,
},
});
};
xhr.onerror = function () {
alert("Error with System XHR");
};
xhr.send();