Image Printing

[leonardofmed]

Olá novamente, estou com um problema com a impressão da imagem agora. Estou tentando com essa função que você deixou como exemplo, mas não imprime e nem um erro aparece. Já tentei com imagem em diferentes tamanhos, formatos e diretórios. O que posso estar errando?

Código:

this.print.listBluetoothDevices().then(result => {
      console.log(JSON.stringify(result));
      this.print.connect(result[0].address).then(result => {
        console.log(JSON.stringify(result));
      }).catch(err => {

      });
    }).catch(err => {

    });



      var image = new Image();
      image.src = 'flag.png';
      image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.height = 100;
        canvas.width = 100;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        var imageData = canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
        this.print.printImage(
          imageData, //base64
          canvas.width, 
          canvas.height, 
          1
        ).then(result => {
          console.log(JSON.stringify(result));
          }).catch(err => {

          });
      };
    
 
    


    this.print.feedPaper(100).then(result => {
      console.log(JSON.stringify(result));
      this.print = result;
    }).catch(err => {

    });

[giorgiofellipe]

1. Você não precisa conectar à impressora sempre que for executar um comando, a conexão é mantida.
2. Você continua usando de forma incorreta as promises, leia mais sobre isso.
3. Algum erro é retornado?

[leonardofmed]

Muito obrigado pela resposta!

1. Vou levar isso em consideração. O ideal seria deixar a função de conexão dentro do construtor?
2. Dos modos que vi sobre como fazer a manipulação das promises esse foi o único que consegui fazer funcionar. Você pode me passar um exemplo de como seria o modo correto de fazer essa manipulação ou me indicar o que estou errando?
3. Nenhum erro retorma, tentei remover a parte:

image.onload = function() {
...
};

e acaba imprimindo um quadrado preto, se alterar a width e height o quadrado altera. Creio ser algo impedindo o carregamento da imagem né? Lembrando que tentei vários formatos de foto e o image.src em diferentes diretórios.

[giorgiofellipe]

1. Se você tiver sempre somente uma impressora pareada com o dispositivo pode ser, senão seria interessante apresentar ao usuário todas as impressoras pareadas e permitir que o mesmo selecione a que deseja conectar...
2. http://www.syntaxsuccess.com/viewarticle/angular-promise-chaining-explained
3. Você sempre deve primeiro especificar o callback onload e após isso definir o src da imagem, uma vez que o src é definido a imagem já começa a ser carregada, se o carregamento terminar antes que o callback seja definido nada será executado...

[leonardofmed]

1. Será sempre apenas uma impressora. Fiz o teste no construtor e ficou melhor mesmo.
2. Vou tentar implementar esse método amanhã de manhã, já havia tentando algo parecido, com esse mesmo método de promise chaining, se não me engano estava recebendo erro pela minha utilzação do this.
3. Na verdade eu fiz dessa maneira porque foi como vi no seu exemplo principal. Eu tentei colocar o callback antes, mas infelizmente continua sem imprimir nada. Um erro que está aparecendo e eu esqueci de mencionar é um que ocorre na primeira vez que faço a build, quando faço a build pela segunda vez o erro some:

typescript: src/pages/home/home.ts, line: 35 
Property 'print' does not exist on type 'HTMLElement'. 
L35:  this.print.printImage(

[giorgiofellipe]

3. Ops, falha minha, já corrigi o exemplo. Obrigado! Então, certifique-se de que a imagem está sendo carregada corretamente, ele chega a chamar o evento onload? Se sequer chama este evento tente identificar se algum problema pode estar acontecendo ao carregar a imagem, utilize o evento onerror...