SocialShareプラグインのBase64イメージの共有エラー

Social Share Plugin（Git Repo）のBase64イメージの共有をテストしていますが、その際にいくつか問題があります。文字列からキャンバスを作成し、キャンバスからデータURLを作成するコードを以下に示します。問題は、作成されたbase64をプラグインを使用して共有しようとすると画像がすべて黒くなることです。しかし、baseTest変数のような他のランダムなbase64を試してみると、うまくいきます。私はこれに助けていただければ幸いです。前もって感謝します。 SocialShareプラグインのBase64イメージの共有エラー

  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>

出典

2017-04-03 Guilherme Ramalho

画像が何とかjpegに変換取得され、私は推測します。テキストを描画する前に白い背景を描画するか、MIMEタイプを明示的に指定して、TRYを実行します。働い

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>

出典

2017-04-03 18:02:51

！どうもありがとう！もしそれがあまりにも問題でないなら、私は文字列としてその 'メッセージ'テキストを渡し、キャンバスの高さと幅をdinamically設定する方法があるかどうかを知りたいと思います。とにかくありがとう。 –

@GuilhermeRamalhoはい、方法があります。私が家に帰ったときにそれに対応する答えを更新するでしょう:) –

おかげで男！あなたは私を救っただけです。 –

SocialShareプラグインのBase64イメージの共有エラー

答えて

関連する問題