在SocialShare插件上分享base64图像的错误

我正在测试社交分享插件的base64图像共享（Git Repo），我在做这件事时遇到了一些麻烦。我有下面的代码来创建一个字符串的画布，并从画布创建一个数据网址，它的工作正常，问题是当我尝试使用插件共享创建的base64图像全黑。但是，如果我尝试任何其他随机base64，就像baseTest变量上的那个，它可以正常工作。我会很感激任何帮助。提前致谢。在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，我猜。 TRY，在绘制文本之前绘制白色背景或明确指定MIME类型。

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

这工作！非常感谢！如果不是太麻烦，我想知道是否有任何方法让我将这个'消息'文本作为一个字符串传递，然后设置画布的高度和宽度。不管怎么说，还是要谢谢你。 –

@GuilhermeRamalho是的，有一种方法。将更新答案，以适应当我回家:) –

谢谢你！你刚刚救了我。 –

在SocialShare插件上分享base64图像的错误

回答

相关问题