SocialShare Plugin에서 Base64 이미지를 공유하는 중 오류가 발생했습니다.

Social Share Plugin (Git Repo)의 base64 이미지 공유를 테스트 중이며 문제가 발생했습니다. 문자열에서 캔버스를 만들고 캔버스에서 데이터 URL을 만드는 코드를 아래에 있습니다. 문제는 내가 만든 base64를 플러그인을 사용하여 공유하려고하면 이미지가 모두 검게됩니다. 하지만 baseTest 변수에있는 것과 같이 임의의 다른 임의의 base64를 시도하면 정상적으로 작동합니다. 어떤 도움을 주셔서 감사합니다. 미리 감사드립니다. SocialShare Plugin에서 Base64 이미지를 공유하는 중 오류가 발생했습니다.

  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>

이미지가 어떻게 든 jpeg로 변환지고

출처

2017-04-03 Guilherme Ramalho

것 같아요. 텍스트를 그리거나 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>

출처

2017-04-03 18:02:51

! 고마워요! 너무 문제가 없다면 그 '메시지'텍스트를 문자열로 전달하고 캔버스의 높이와 너비를 dinamically 설정하는 방법이 있는지 알고 싶습니다. 어쨌든 고마워. –

@GuilhermeRamalho 예, 방법이 있습니다. 집에 돌아 왔을 때 대답을 업데이트 할 것입니다 :) –

고마워요! 방금 날 구해 줬어. –

SocialShare Plugin에서 Base64 이미지를 공유하는 중 오류가 발생했습니다.

답변

관련 문제