jspdf를 사용하여 이미지 URL을 pdf로 변환

Question

function convertImgToBase64(url) 
{ 
    var canvas = document.createElement('canvas'); 
    var ctx = canvas.getContext('2d'); 
    img = document.createElement('img'), 
    img.src = url; 
    canvas.height = img.height; 
    canvas.width = img.width; 
    var dataURL = canvas.toDataURL('image/jpeg') 
    alert(dataURL); 
    canvas = null; 
    return dataURL; 
    } 

var imageurl = 'http://qph.is.quoracdn.net/main-qimg-ca033a73e2ea858908c44905d4c25f4b?convert_to_webp=true'; 
var som =convertImgToBase64(imageurl); 
doc.addImage(som, 'JPEG', 15, 40, 180, 180); 
doc.output('datauristring'); 

아무런 일도 일어나지 않습니다. pdf가 생성되지 않습니다? 경고 상자에 올바른 base64 코드가 표시되지만 이미지가 생성되지 않습니까?

Answer 1

다음은 동일한 문제에 대한 나의 해결책입니다. 그런 다음

let logo = null; 

getDataUri(imgUrl, function(dataUri) { 
    logo = dataUri; 
    console.log("logo=" + logo); 
}); 

function getDataUri(url, cb) 
{ 
     var image = new Image(); 
     image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain 

     image.onload = function() { 
      var canvas = document.createElement('canvas'); 
      canvas.width = this.naturalWidth; 
      canvas.height = this.naturalHeight; 

      //next three lines for white background in case png has a transparent background 
      var ctx = canvas.getContext('2d'); 
      ctx.fillStyle = '#fff'; /// set white fill style 
      ctx.fillRect(0, 0, canvas.width, canvas.height); 

      canvas.getContext('2d').drawImage(this, 0, 0); 

      cb(canvas.toDataURL('image/jpeg')); 
     }; 

     image.src = url; 
    } 

var doc = new jsPDF(); 

    let left = 15; 
    let top = 8; 
    const imgWidth = 100; 
    const imgHeight = 100; 

    doc.addImage(logo, 'PNG', left, top, imgWidth, imgHeight); 

    doc.output('dataurlnewwindow'); //opens pdf in new tab