在base64插件上共享SocialShare图像错误
在base64插件上共享SocialShare图像错误
提问于 2017-04-03 17:02:10
我正在测试社交共享插件(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
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 2020-09-21 09:43:15
您可以尝试拆分base64图像数据并共享它。
base64Data: img.split(',')[1],然后通过插件共享base64data。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43190361
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号