Fehler teilen base64 Bild auf SocialShare Plugin

Ich teste das base64 Bildpräsentations- des Social Share Plugin (Git Repo) und ich habe einige Probleme, während es zu tun. Ich habe den Code unten, um eine Leinwand aus einem String zu erstellen und eine Daten URL aus der Leinwand erstellen und es funktioniert gut, das Problem ist, wenn ich versuche, die erstellt base64 zu teilen über das Plugin die Bilder alle schwarz geht. Aber wenn ich irgendeine andere zufällige base64 versuche, wie die auf der BaseTest-Variable, funktioniert es gut. Ich würde mich über jede Hilfe freuen. Danke im Voraus. Fehler teilen base64 Bild auf SocialShare Plugin

  function socialShare() { 
 
       var canvas = document.getElementById("receipt"); 
 
       var context = canvas.getContext("2d"); 
 

 
       const messages = [ 
 
        "################################", 
 
        "Central Jogos", 
 
        "################################", 
 
        "Apostador: test", 
 
        "Valor apostado: R$ 5,00", 
 
        "Valor de retorno: R$ 6,15", 
 
        "Data da aposta: 19/02/2017 15:07", 
 
        "Quantidade de jogos: 1", 
 
        "--------------------------------", 
 
        "Vasco X Flamengo", 
 
        "Empate: 1.23", 
 
        "10/03/2017 15:30", 
 
        "================================", 
 
        "Cambista: Cambista Teste", 
 
        "Telefone: (82) 9977-8877" 
 
       ]; 
 

 
       context.font = "12px Courier new"; 
 

 
       y = 12; 
 
       for (var i in messages) 
 
       { 
 
        context.fillText(messages[i], 0, y); 
 
        y += 18; 
 
       } 
 
       
 
       /*var baseTest = "data:image/png;base64,R0lGODlhZgAZALMAAAAAABgYGCEhISkpKSkxQjk5QkZGTnF7i2uEvXOEvXeMvX+UxqSx0MfS5dPe7Nbn7ywAAAAAZgAZAAAE/hDJSau9OOvNu/9gKI5kaZ5oOjlOxmpK82qzal+1lVvyrre3IMX38g2BRklSiCK2lojZEsosOaNAjDT7sxgI4LB4TC6HDacpt8vxEQDwuHxOr8cJ6fWRpsfp33aBgndKLQsyDAiHDomLLA0LWAuLiUWGPQ6QWCycipiaL5QIgAABDJwMAgACpyypACwABacGAAanB3hYMry8L5iPm5wNWMXAmcKdx8SPnC2kragA0a6wjNcMp6cNuqgJ3pYrT5kMC+HhhenFNZaZ5s9xsXCx8tbWDgf3+SzdDpGS6diNE7duoLotAAv+e0GqHj0H8SCyGDDPAUVr/QgGzIKuYEFntEhCKnqkQGOxhhDnOJSY0l7FjOo8biR4DiSxYjhjsFjIEV5FOitdCuUXUyBOmR477jmKoFWlnqMiAm35UOrLolCNah1oBOEMBR0ZWrUXNOjVo1tpAnmXFCrOsAZPjq360yxGrASXJWPk8ZhIYzbRPotFjdE0kAyGUnUAU7CnYZEQJ/DoiNzBS5AdE4jFCpWqzq5U2SVapfQEUoNSz9FluvQBA7Bjy55Nu3bsA61z697Nm0QEAAA7";*/ 
 

 
       
 
       console.log(context.canvas.toDataURL()); 
 
       var base64 = context.canvas.toDataURL(); 
 

 
       alert(base64); 
 

 
       /*window.plugins.socialsharing.share(
 
        null, 
 
        'Receipt', 
 
        base64, 
 
        null 
 
       );*/ 
 
      }

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <meta name="format-detection" content="telephone=no"> 
 
     <meta name="msapplication-tap-highlight" content="no"> 
 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
 
     <title>Hello World</title> 
 
    </head> 
 
    <body> 
 

 
     <button onclick="socialShare()">Testar</button> 
 

 
     <canvas id="receipt" width="230" height="270"></canvas> 
 

 
     <script type="text/javascript" src="cordova.js"></script> 
 
     <script type="text/javascript" src="js/index.js"></script> 
 
    </body> 
 
</html>

Quelle

2017-04-03 Guilherme Ramalho

Das Bild irgendwie zu jpeg umgewandelt zu werden, denke ich. Versuchen Sie es entweder, indem Sie vor dem Zeichnen des Textes einen weißen Hintergrund zeichnen oder den MIME-Typ explizit angeben.

function socialShare() { 
 
    var canvas = document.getElementById("receipt"); 
 
    var context = canvas.getContext("2d"); 
 
    
 
    const messages = [ 
 
        "################################", 
 
        "Central Jogos", 
 
        "################################", 
 
        "Apostador: test", 
 
        "Valor apostado: R$ 5,00", 
 
        "Valor de retorno: R$ 6,15", 
 
        "Data da aposta: 19/02/2017 15:07", 
 
        "Quantidade de jogos: 1", 
 
        "--------------------------------", 
 
        "Vasco X Flamengo", 
 
        "Empate: 1.23", 
 
        "10/03/2017 15:30", 
 
        "================================", 
 
        "Cambista: Cambista Teste", 
 
        "Telefone: (82) 9977-8877" 
 
       ]; 
 
    
 
    // draw a white background 
 
    context.fillStyle = "#fff"; 
 
    context.fillRect(0, 0, canvas.width, canvas.height); 
 
    
 
    // draw text 
 
    context.font = "12px Courier new"; 
 
    context.fillStyle = "#000"; 
 
    y = 12; 
 
    messages.forEach(function(e) { 
 
     context.fillText(e, 0, y); 
 
     y += 18; 
 
    }); 
 
    
 
    var base64 = canvas.toDataURL(); 
 
    // or specify the MIME Type explicitly 
 
    // var base64 = canvas.toDataURL("image/png"); 
 
    
 
    console.log(base64); 
 
}

<button onclick="socialShare()">Testar</button> 
 
<canvas id="receipt" width="230" height="270"></canvas>

Quelle

2017-04-03 18:02:51

Das hat geklappt! Danke vielmals! Wenn es nicht zu Ärger ist würde ich gerne wissen, ob es eine Möglichkeit für mich, dass ‚Nachricht‘ Text als String übergeben und dinamically die Leinwand Höhe und Breite festgelegt. Danke trotzdem. –

@GuilhermeRamalho Ja, es ist auch ein Weg. Will die Antwort aktualisieren, um das zu berücksichtigen, wenn ich wieder zu Hause bin :) –

Danke Mann! Du hast mich gerade gerettet. –

Fehler teilen base64 Bild auf SocialShare Plugin

Antwort

Verwandte Themen