2012-08-01 3 views
2

그런데 나는 PDF.js을 사용하기 시작했습니다.PDF.js 이미지 삽입

하지만 이제 캔버스 요소의 이미지를 PDF 페이지에 삽입하고 싶습니다. 여기 내 코드는 다음과 같습니다.

var image = myCanvas.getContext('2d').getImageData(0,0,400,300), 
doc = new pdf(); 
doc.setProperties({ 
    title: fileName, 
    author: 'VirtuaLab®', 
    creator: 'pdf.js' 
}); 
doc.addPage(); 
data = doc.output(); 

그러나 PDF.js 페이지에 이미지를 삽입하는 것에 대해서는 아무 것도 발견하지 못했습니다.

doc.image() 또는 doc.addImage?

답변

4

면책 조항 : 나는 불행하게도 PDF.js 이미지와 함께 작동하지 Bytescout

을 위해 일을하고 우리가 개발 한 이유입니다 PDF Generator SDK for Javascript이 같은 (URL 또는 캔버스) 이미지를 추가 할 수있는 (비상업적 인 용도 무료) : 중요

// load image from local file 
pdf.imageLoadFromUrl('image1.jpg'); 
// place this mage at given X, Y coordinates on the page 
pdf.imagePlace(20, 40); 

이 BytescoutPDF.js 큰 이미지를 처리하기 위해 메모리를 소모 할 수 있습니다 당신이 (이 문제는 자바 스크립트를 메모리 제한으로 인해 발생) 이미지 크기에 제한을 직면 할 수 있다고합니다.

그러나 생성 된 pdf에 로고 이미지 또는 작은 그림을 삽입해야하는 경우 스크립트가 제대로 작동해야합니다.

UPDATE : jsPDF의 최신 버전 (안 PDF.js와 혼동하기), 이미지 작업 examples page에 샘플을 볼 것으로 보인다.

+0

Hello @Eugene pdf를 생성하기 위해 이미지와 함께 html (또는 div)을 추가 할 수 있습니까? 나는 가능한 plaese 일부 코드 예제를 공유 할 수 있습니다. 미리 감사드립니다. – PlanetHackers

+0

bytescout의 @PlanetHackers 간단한 html 포매팅은 텍스트 및 링크에는 지원되지만 이미지에는 지원되지 않습니다. .imagePlace() 메서드를 사용하여 이미지를 배치 할 수 있습니다. –

0

질문을 올바르게 이해하면 <canvas> 대신 pdf.js. <img>을 사용하고 싶습니다.

그래서이 문제에 대한 픽스입니다. 캔버스에 반환 된 이미지를 캔버스에 보통 넣으십시오. 캔버스를 display: none;으로 지정하십시오.

다음 캔버스 요소의 .toDataURL() 방법을 사용하여 img에 src을 가져옵니다.

var canvas = document.getElementById("myCanves"); 
var img = document.getElementById("myImg"); 
img.src = canvas.toDataURL(); 

이 정보가 도움이되기를 바랍니다.