CODEWITHSUNDEEP
javascriptjqueryfirefox-os
Devashish Purandare
Devashish Purandare

Reputation: 5

Use a prepended image as wallpaper using Mozactivity Firefox OS

I want to fetch an image from the web and set it as wallpaper on the Firefox OS device.

So far I've tried two approaches,

$(document).on( 'click', '#share-image', function() {
  walp = new Image()
  walp.onload = function () {
  var walCanvas = document.createElement('canvas');
  walCanvas.width = walp.width;
  walCanvas.height = walp.height;
  var walCtx = walCanvas.getContext('2d');
  walCtx.drawImage(walp,0,0);
  walCanvas.toBlob( function (walBlob) {
    var Activitiy = new MozActivity({
      name: 'share',
      data: {
        type: 'image/*',
        number: 1,
        blobs: [walBlob]
      }
    });
  });


};
walp.src = image; //image is the link  to jpeg.
});

And this one...

var shareImage = document.querySelector("#share-image"),
imgToShare = document.querySelector('#prependedImage');
alert(imgToShare);
if (shareImage && imgToShare) {
  shareImage.onclick = function () {
     if(imgToShare.naturalWidth > 0) {
      // Create dummy canvas
      var blobCanvas = document.createElement("canvas");
      blobCanvas.width = imgToShare.width;
      blobCanvas.height = imgToShare.height;
      // Get context and draw image
      var blobCanvasContext = blobCanvas.getContext("2d");
      blobCanvasContext.drawImage(imgToShare, 0, 0);
      // Export to blob and share through a Web Activitiy
      blobCanvas.toBlob(function (blob) {
        new MozActivity({
          name: "share",
          data: {
            type: "image/*",
            number: 1,
            blobs: [blob]
          }
        });
      });
    }
    else {
      alert("Image failed to load, can't be shared");
    }
  };
}

Both work for a locally saved image but don't work for the image that is fetched from a remote location.

I've also tried following approaches.

  var pre = '<img width="100%" data-l10n-id="prependedImage" id="prependedImage" src="'+image+'" />';
          $('#image1').prepend(pre);

and 

$('#prependedImage').attr('src',image);

Both work, but neither presents the wallpaper menu unless it is a locally saved image. I'm new to javascript and would appreciate an answer which explains what's wrong with code samples. Thanks.

Upvotes: 0

Views: 155

Answers (1)

Jason Weathersby
Jason Weathersby

Reputation: 1081

Can you try something like:

    var xhr = new XMLHttpRequest({
        mozSystem: true
    });
    xhr.open("GET", "http://25.media.tumblr.com/4751d1eccf9311ee0e05bdff819a7248/tumblr_n2yxzxzxr81rsg8blo1_250.png", true);
    xhr.responseType = "blob";
    xhr.onload = function () {
        //sample activity
        var activity = new MozActivity({
        name: "share",
        data: {
            type: "image/*",
            number:1,
            blobs: [this.response],
            filenames:["wallpapertest.png"]
        },
        });
    };
    xhr.onerror = function () {
        alert("Error with System XHR");
    };
    xhr.send();

You will also need to set the app as privileged and add the systemxhr permission in the manifest:

  "permissions": {  
    "systemXHR": {} 
  },
  "type": "privileged"

Upvotes: 1

Related Questions