在 SocialShare 插件上共享 base64 圖像時出錯
[英]Error sharing base64 image on SocialShare plugin
問題描述
我正在測試社交共享插件 (Git Repo ) 的 base64 圖像共享，但在執行此操作時遇到了一些麻煩。 我有下面的代碼從字符串創建畫布並從畫布創建數據 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>
2 個解決方案
解決方案1
2 已采納 2017-04-03 18:02:51
圖像不知何故被轉換為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>
解決方案2
0 2020-09-21 09:43:15
您可以嘗試拆分 base64 圖像數據並共享它。
base64Data: img.split(',')[1],
然后通過插件共享base64data。
使用JavaScript在Twitter上共享base64圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.