Question

我正在测试社交分享插件（Git Repo）的base64图像共享，并且在执行此操作时遇到了一些麻烦。我有下面的代码从字符串创建一个画布并从画布创建一个数据网址，它工作正常，问题是当我尝试使用共享创建的base64 插件图像全黑。但是，如果我尝试任何其他随机base64，如baseTest变量上的那个，它工作正常。我很感激任何帮助。提前致谢。

＆＃13;

            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
                );*/
            }

＆＃13;

<!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>

＆＃13;

Answer 1

我想，图像会以某种方式转换为jpeg。也可以在绘制文本之前绘制白色背景或明确指定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>

Answer 2

您可以尝试拆分base64图像数据并共享。

base64Data: img.split(',')[1],

，然后通过插件共享base64data。

在SocialShare插件上共享base64图像时出错

2 个答案: