キャンバス画像からbase64を取得するにはどうすればよいですか？

Question

私は多くを検索し、何も正しく見つからなかった。

は、ここに私のコードです：

context.drawImage(img, 0, -realDif, width, width*def); 
var base64 = canvas.toDataURL("image/jpeg"); 

一部の人々は私に言ったし、私は実際にそれを変換する方法を見つけるカントとしてtoDataUrlは私にイマイチベース64を返す文字列。誰かが手掛かりを持っていますか？

これは私だけでフォームを送信いけない場合はここで完全なコード

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var URL = window.URL || window.webkitURL, 
    imageUrl, 
    img; 

    if (URL) { 
     imageUrl = URL.createObjectURL(file); 
     img = document.createElement("img"); 
     img.src = imageUrl; 
     img.onload = function() { 
      URL.revokeObjectURL(imageUrl);   
      var def = (img.height/img.width); 
      if(def < 1.25){ 
       dif = (heigh/def) - width; 
       realDif = dif/2; 
       context.drawImage(img, -realDif, 0, heigh/def, heigh); 
      } else { 
       dif = (width*def) - heigh; 
       realDif = dif/2; 
       context.drawImage(img, 0, -realDif, width, width*def); 
      } 
     } 
    } 
    var inpHidden = document.getElementById("img64"); 
    inpHidden.value = canvas.toDataURL("image/jpeg"); 
    document.getElementById("avatarForm").submit(); 

だ私は取得していますし、uはオンラインデコーダで確認することができますよう、それは

string(2415) "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCADhALQDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAP/Z" 

を働いていないものです私はキャンバスが前のページで正しく描画されているのを見ることができます...間違っている可能性があります

Answer 1

まあ私はちょうどonlad関数の中にcanvas.toDataURL("image/jpeg");を入れて、それは今働いています

if (URL) { 
     imageUrl = URL.createObjectURL(file); 
     img.src = imageUrl; 
     img.onload = function() { 
      //URL.revokeObjectURL(imageUrl);   
      var def = (img.height/img.width); 
      if(def < 1.25){ 
       dif = (heigh/def) - width; 
       realDif = dif/2; 
       context.drawImage(img, -realDif, 0, heigh/def, heigh); 
      } else { 
       dif = (width*def) - heigh; 
       realDif = dif/2; 
       context.drawImage(img, 0, -realDif, width, width*def); 
      } 
      var inpHidden = document.getElementById("img64"); 
      inpHidden.value = canvas.toDataURL("image/jpeg"); 
      document.getElementById("avatarForm").submit(); 
     }  

希望はこれを使用すると、すべての特別な、それは接頭辞で、base64である