在 SocialShare 插件上共享 base64 图像时出错
[英]Error sharing base64 image on SocialShare plugin
问题描述
I'm testing the base64 image sharing of the Social Share Plugin(Git Repo ) and I'm having some troubles while doing it.
我正在测试社交共享插件 (Git Repo ) 的 base64 图像共享，但在执行此操作时遇到了一些麻烦。 I have the code below to create a canvas from a string and create a data url from the canvas and it works fine, the problem is when I try to share the created base64 using the plugin the images goes all black.我有下面的代码从字符串创建画布并从画布创建数据 url 并且它工作正常，问题是当我尝试使用插件共享创建的 base64 时，图像全黑。 But if I try any other random base64, like the one on the baseTest variable, It works fine.但是如果我尝试任何其他随机 base64，比如 baseTest 变量上的那个，它工作正常。 I'd appreciate any help with this.我很感激这方面的任何帮助。 Thanks in advance.提前致谢。
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>
2 个解决方案
解决方案1
2 已采纳 2017-04-03 18:02:51
The image is somehow getting converted to jpeg , I guess.图像不知何故被转换为jpeg ，我猜。 TRY either, drawing a white background before drawing the text or specifying the MIME Type explicitly.尝试在绘制文本之前绘制白色背景或明确指定 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>
解决方案2
0 2020-09-21 09:43:15
You can try to split the base64 image data and the share it.您可以尝试拆分 base64 图像数据并共享它。
base64Data: img.split(',')[1],
and then share the base64data through the plugin.然后通过插件共享base64data。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.