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

Question

我正在测试 Social Share Plugin(Git Repo) 的 base64 图片共享，但在执行时遇到了一些问题。我有下面的代码从字符串创建一个 canvas 并从 canvas 创建一个数据 url 并且它工作正常，问题是当我尝试共享创建的 base64 使用图像全黑的插件。但是如果我尝试任何其他随机 base64，比如 baseTest 变量上的那个，它工作正常。我将不胜感激任何帮助。提前致谢。

            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>

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],

然后通过插件分享base64数据

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

Error sharing base64 image on SocialShare plugin

html

javascript

canvas

phonegap-plugins

cordova