Is this plugin compatible to cordova 3.5.0-0.2.4??

Question

Is this plugin compatible to cordova 3.5.0-0.2.4??

Closed this issue 10 years ago · 19 comments

I'm trying to use this plugin to save a canvas into image and store into the library, but it's not working. Not even the error log message.
Do you now some other method to save a canvas.dataURL as image in the library?

Answer 1 · 2014-06-03T03:31:23.000Z

@tiagocrt - the plugin should work... could you show me an example of what you are trying?

Also, have you looked at the Demo app - https://github.com/devgeeks/Canvas2ImageDemo? It might make it obvious what might be different with what you are trying.

Answer 2 · 2014-06-03T04:20:49.000Z

I’m having no luck either.

I added:

function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
}

And included the following in the html for my initial page. I see that it rendered on the page.

And included the following in the config.xml file. The plugins page for my app shows that it was included.

<gap:plugin name="org.devgeeks.canvas2imageplugin" version="0.5.1" />

Thanks for any help you can provide,

Scott

On Jun 2, 2014, at 8:31 PM, tommy-carlos williams notifications@github.com wrote:

@tiagocrt - the plugin should work... could you show me an example of what you are trying?

Also, have you looked at the Demo app - https://github.com/devgeeks/Canvas2ImageDemo? It might make it obvious what might be different with what you are trying.

—
Reply to this email directly or view it on GitHub.

Answer 3 · 2014-06-03T04:27:12.000Z

Sorry, I should have been more clear that I’m using phone gap build. The success and error functions are not firing for me either.

Scott

On Jun 2, 2014, at 9:20 PM, Scott Lincke scott@lincke.org wrote:

I’m having no luck either.

I added:

function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
}

And included the following in the html for my initial page. I see that it rendered on the page.

And included the following in the config.xml file. The plugins page for my app shows that it was included.

<gap:plugin name="org.devgeeks.canvas2imageplugin" version="0.5.1" />

Thanks for any help you can provide,

Scott

On Jun 2, 2014, at 8:31 PM, tommy-carlos williams notifications@github.com wrote:

@tiagocrt - the plugin should work... could you show me an example of what you are trying?

Also, have you looked at the Demo app - https://github.com/devgeeks/Canvas2ImageDemo? It might make it obvious what might be different with what you are trying.

—
Reply to this email directly or view it on GitHub.

Answer 4 · 2014-06-03T04:29:09.000Z

Ah. Well, I only just got the notification that the plugin was approved on Build. I'll try to find some time to try getting the demo working using build and see...

Answer 5 · 2014-06-03T04:36:28.000Z

Any help is most appreciated. Thanks for contributing your time.

On Jun 2, 2014, at 9:29 PM, tommy-carlos williams notifications@github.com wrote:

Ah. Well, I only just got the notification that the plugin was approved on Build. I'll try to find some time to try getting the demo working using build and see...

—
Reply to this email directly or view it on GitHub.

Answer 6 · 2014-06-03T06:45:05.000Z

@slincke - I suspect your issue is different to @tiagocrt

For PhoneGap Build....

I have built the demo (https://github.com/devgeeks/Canvas2ImageDemo) using PhoneGap Build

https://build.phonegap.com/apps/946650/share

(only android works, no idea how to disable windows phone on build...)

Here is my config.xml:

https://gist.github.com/devgeeks/ba5a96e3d673b84c9e75

<gap:plugin name="org.devgeeks.canvas2imageplugin" version="0.5.1" />

Hope this helps...

Answer 7 · 2014-06-03T06:50:15.000Z

@tiagocrt - For you, I have confirmed that the demo app (https://github.com/devgeeks/Canvas2ImageDemo) does work fine using local Cordova 0.3.5-0.2.4

Answer 8 · 2014-06-03T10:15:55.000Z

The demo now works, I'm test on a Iphone.
The problem was the code
var canvas2ImagePlugin = window.plugins.canvas2ImagePlugin;

I just need to remove the ".plugins". Thanks for the return and for the plugin

Answer 9 · 2014-06-03T10:45:45.000Z

@devgeeks The demos just works fine, but now, in my real app I'm getting a blank image.
the code:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
canvas = $("#container_canvas canvas")[0];
if (canvas) {
imgFaixa = new Image();
imgFaixa.src = "img/texturas/faixa.png";

    window.setTimeout(function(){
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight - 150;
    }, 1000);

    largura = canvas.width;
    altura = canvas.height;
};

$("#getPictureButton").on("touchstart", function(e) {
getPhoto(pictureSource.PHOTOLIBRARY);
});
function getPhoto(source) {
widImage = 1000;
heiImage = 1000;
navigator.camera.getPicture(
onPhotoURISuccess,
camError,
{
quality: 50,
targetWidth: widImage,
targetHeight: heiImage,
allowEdit: true,
correctOrientation: true,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
function onPhotoURISuccess(imageURI) {

    var img = new Image();
    img.onload = function(e) {

        kineticDrawImage(this, imgFaixa, imgSol, imgTexto);

        //context.drawImage(img, 0, 0, largura, altura + 100);
        //context.drawImage(marcaDagua, 0, 0, largura, altura);
    }

    img.src = imageURI;

    /*
     * clique do botao do facebook
     * transformar o canvas em imagem
     * e salvar na biblioteca de imagens
     */
    $("#publicarFoto").on("touchstart", function(e) {

      console.log('touch galeria');
      window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
            //alert(msg);
        },
        function(err){
            console.log(err);
            // alert(err);
        },
        canvas
    );
    window.setTimeout(function(){
            alert("Image saved");
     },200);

});

function kineticDrawImage(imageObj, imageObj2) {

  var canvasLargura = window.innerWidth;
  var canvasAltura = window.innerHeight - 150;

  var imglargura = imageObj.width;
  var imgAltura = imageObj.height;

  var stage = new Kinetic.Stage({
    container: "container_canvas",
    width: canvasLargura,
    height: canvasAltura
  });
  var layer = new Kinetic.Layer();


  // Rect
  var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: canvasLargura,
    height: canvasAltura,
    fill: 'black'
  });

  // verifica se a foto e em pe ou deitada
  if (imgAltura > imglargura) {

    // Foto
    var novaLargura = canvasLargura + 50;
    var knFotoImg = new Kinetic.Image({
      image: imageObj,
      x: 0,
      y: 0,
      width: novaLargura,
      height: imgAltura * novaLargura / imglargura,
      draggable: true
    });

  }else{

    // Foto
    var novaAltura = canvasAltura + 50;
    var knFotoImg = new Kinetic.Image({
      image: imageObj,
      x: 0,
      y: 0,
      width: imglargura * novaAltura / imgAltura,
      height: novaAltura,
      draggable: true
    });

  };

  // Faixa
  var knFaixaImg = new Kinetic.Image({
    image: imageObj2,
    x: 0,
    y: stage.getHeight() - 60,
    width: stage.getWidth(),
    height: 60,
    draggable: false
  });

  layer.add(rect);
  layer.add(knFotoImg);
  layer.add(knFaixaImg);
  stage.add(layer);

}

}

Answer 10 · 2014-06-03T10:53:14.000Z

As You can see.. I'm using an image from the library and using the Kineticjs to manipulate the elements in the canvas.

Other question is, how can I now the path to the image that I just save?

Answer 11 · 2014-06-03T23:52:50.000Z

hrm... not sure about the blank image... but in Android the success function's only arg (msg - console.log(msg), etc) is the path to the image since it is a file on an actual path.

In iOS, I don't return a path since it's not a filesystem path, but an asset in the Photo Library. I could potentially return the asset:// path, but not sure how useful that is?

Answer 12 · 2014-06-04T03:42:23.000Z

I need one way to get the saved image filePath in the library to use the new saved image and send this with FileTransfer();
Do you now how can I do that?

PS: Now the plugin is work fine, It save the canvas as expected, tkx for the help .

Answer 13 · 2014-06-20T22:07:24.000Z

I do not use PhogeGap build. The plugin works fine on ios 7.1 on iPhone 5 but on ios 7.1 on iPhone 4s I cannot get the image saved.

Answer 14 · 2014-06-20T23:09:38.000Z

@tiagocrt - It's a feature that is missing from iOS since iOS saves to the Photo Library, not a normal file location. I could return the asset URL but not sure if that would allow you to use it with File Transfer. If it doesn't, I would need to also save the image to the file system. It's a bit out of the scope of the original plugin, but it's all already on my todo list :)

Answer 15 · 2014-06-20T23:11:16.000Z

@confile - I can't think of any reason why a 4s would behave differently than a 5. Perhaps it's a race condition? Are you waiting for device ready to fire?

Answer 16 · 2014-06-21T00:27:55.000Z

I use the same app on both devices. What do you mean by "race condition"?

Answer 17 · 2014-06-21T02:32:56.000Z

http://en.wikipedia.org/wiki/Race_condition

I just mean that it might be working on the iPhone 5 because it's faster and device ready is firing faster.

Are you waiting for the device ready event before firing the plugin?

Do you have any debugging info on the failure on the 4s?

Answer 18 · 2014-06-23T13:27:03.000Z

@devgeeks Sorry it was an error because the access rights where not enabled. Everything works fine.

Answer 19 · 2014-06-23T13:30:37.000Z

That's great to hear :)