자바 스크립트를 사용하여 캔버스 이미지 인쇄

airider74

나는 인쇄에 약간의 문제가 발생하고있어 canvas elements사용 onClick과는 javascript function를 인쇄 canvas elements같은 인쇄 작업에서 두 페이지에.

지금 jsPDF은 사용자가 저장할 수 있도록 다운로드 가능한 PDF를 만드는 데 사용 하고 있습니다. 의도 한대로 작동합니다.

또한 각각 canvas을 페이지로 인쇄하는 인쇄 기능을 만들고 싶습니다 .

autoprint기능을 사용 jsPDF하는 것은 분명한 대답처럼 보였지만 불행히도 canvas동일한 페이지에 함께 얽힌 세로 형식으로 페이지 를 뱉어 낼 수있었습니다 . canvas elements각각의 페이지에 각각 인쇄 된 가로로 인쇄하지만 동일한 인쇄 작업 내에서 인쇄하고 싶습니다 .

javascript이미지 인쇄를위한 다른 솔루션을 살펴 봤지만 모두 이미지에 대한 외부 소스를 가정합니다. 나는 toDataURL()이미 만든 것만 가리키는 그런 솔루션이 필요합니다 .

나는 이것이 이전에 어딘가에서 답을 얻었을 것이라고 확신하지만 지금까지 올바르게 결합 할 수 없었습니다.

여기에 jsPDF내가 원하지 않는 위에 나열된 세로 형식을 뱉어내는 것에 대해 함께 자갈을 만들었습니다.

function print() {
    ctx1.drawImage(c2,0,0); 
    ctx1.drawImage(c3,0,0); 
    var imgData1 = planner1.toDataURL(); 
    var imgData2 = planner2.toDataURL(); 
    var pdf = new jsPDF('l', 'pt', 'letter');
    pdf.addImage(imgData1, 'PNG', 0, 0, 0, 0, 'IMG1', 'fast');
    pdf.addPage();
    pdf.addImage(imgData2, 'PNG', 0, 0, 0, 0, 'IMG2', 'fast');
    pdf.autoPrint();
}‌‌‌‌‌‌

autoPrint()다른 크기와 형식을 지원 하기 위해 조작하는 방법을 아는 사람이 있다면 jsPDF문서가 약간 필요하기 때문에 그것에 대해 듣고 싶습니다 .

그렇지 않으면 png다른 옵션과 동일한 인쇄 작업에서 인쇄 할 수있는 두 글자 크기의 이미지를 만들 것입니다.

나는 이것에 대한 도움에 영원히 감사 할 것입니다.

airider74

글쎄 jsPDF는 그것을 할 수 없었기 때문에 나는 길을 갔다 png. 가장 우아한 솔루션은 아니지만 (다른 창을 열지 않고 닫을 필요가 없었을 것입니다) 내가 원하는 것을 정확하게 인쇄합니다 ....

<script>
function print() {

  ctx1.drawImage(c2,0,0);
  ctx1.drawImage(c3,0,0);

  var win = window.open();
  win.document.write("<img src='"+planner1.toDataURL()+"'/><img src='"+planner2.toDataURL()+"'/>");
  win.print();
  win.window.close();

  window.location.href = '../php/planner.php?pln=<?php echo $user ?>';
}
</script>

또한 css머리글과 바닥 글이 인쇄되지 않도록 일부 추가했습니다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트를 사용하여 두 페이지에 인쇄

분류에서Dev

자바 스크립트를 사용하여 캔버스에 들어 가지 않는 Blob 이미지

분류에서Dev

자바 스크립트를 사용하여 이미지 이동

분류에서Dev

자바 스크립트를 사용하여 배경 이미지를 이동하지 않고 텍스트를 회전하는 HTML 캔버스

분류에서Dev

자바 스크립트를 사용하여 HTML 페이지에서 캔버스 크기 변경

분류에서Dev

자바 스크립트를 사용하여 사용자의 IP 주소 인쇄

분류에서Dev

자바 스크립트-캔버스에 여러 이미지 타일링

분류에서Dev

고해상도 자바 스크립트를 사용하여 캔버스 차트를 PNG 이미지로 다운로드

분류에서Dev

자바 스크립트에서 클릭 이벤트를 인쇄하는 방법

분류에서Dev

자바 스크립트의 window.print () 함수를 사용하여 인쇄 된 페이지에서 URL 텍스트를 제거하는 방법

분류에서Dev

GreaseMonkey 용 자바 스크립트를 사용하여 웹 사이트의 이미지 위로 버튼 이동

분류에서Dev

자바 스크립트를 사용하여 높이 (센티미터)를 피트 인치로 변환

분류에서Dev

자바 스크립트를 사용하여 이미지 변경 / 순환

분류에서Dev

자바 스크립트를 사용하여 reactjs와 이미지 모달

분류에서Dev

확장 자바 스크립트를 사용하여 이미지 변경

분류에서Dev

자바 스크립트를 사용하여 회전 된 이미지 비교

분류에서Dev

자바 스크립트를 사용하여 배경 이미지 전환

분류에서Dev

자바 스크립트를 사용하여 다른 이미지 추가

분류에서Dev

자바 스크립트를 사용하여 HTML을 이미지로 변환

분류에서Dev

자바 스크립트를 사용하여 커서 이미지 (CSS URL) 변경

분류에서Dev

마우스 오버시 자바 스크립트 또는 CSS를 사용하여 배경 이미지 페이딩

분류에서Dev

자바 스트림을 사용하여 A부터 Z까지 문자를 인쇄

분류에서Dev

자바 스크립트를 사용하여 div 캔버스 중첩

분류에서Dev

자바 스크립트 / JQuery 및 HTML (캔버스 없음)을 사용하여 라인으로 노드 연결

분류에서Dev

자바 스크립트를 사용하여 텍스트를 이미지로 바꾸기

분류에서Dev

자바 스크립트를 사용하여 코드에서 인쇄 페이지 설정을 설정하는 방법

분류에서Dev

자바 스크립트 캔버스-사각형 클릭 여부 확인

분류에서Dev

자바 스크립트에서 for 루프를 사용하여 할당없이 1 ... 10 숫자를 인쇄하는 방법

분류에서Dev

자바 스크립트를 사용하여 src 업데이트

Related 관련 기사

  1. 1

    자바 스크립트를 사용하여 두 페이지에 인쇄

  2. 2

    자바 스크립트를 사용하여 캔버스에 들어 가지 않는 Blob 이미지

  3. 3

    자바 스크립트를 사용하여 이미지 이동

  4. 4

    자바 스크립트를 사용하여 배경 이미지를 이동하지 않고 텍스트를 회전하는 HTML 캔버스

  5. 5

    자바 스크립트를 사용하여 HTML 페이지에서 캔버스 크기 변경

  6. 6

    자바 스크립트를 사용하여 사용자의 IP 주소 인쇄

  7. 7

    자바 스크립트-캔버스에 여러 이미지 타일링

  8. 8

    고해상도 자바 스크립트를 사용하여 캔버스 차트를 PNG 이미지로 다운로드

  9. 9

    자바 스크립트에서 클릭 이벤트를 인쇄하는 방법

  10. 10

    자바 스크립트의 window.print () 함수를 사용하여 인쇄 된 페이지에서 URL 텍스트를 제거하는 방법

  11. 11

    GreaseMonkey 용 자바 스크립트를 사용하여 웹 사이트의 이미지 위로 버튼 이동

  12. 12

    자바 스크립트를 사용하여 높이 (센티미터)를 피트 인치로 변환

  13. 13

    자바 스크립트를 사용하여 이미지 변경 / 순환

  14. 14

    자바 스크립트를 사용하여 reactjs와 이미지 모달

  15. 15

    확장 자바 스크립트를 사용하여 이미지 변경

  16. 16

    자바 스크립트를 사용하여 회전 된 이미지 비교

  17. 17

    자바 스크립트를 사용하여 배경 이미지 전환

  18. 18

    자바 스크립트를 사용하여 다른 이미지 추가

  19. 19

    자바 스크립트를 사용하여 HTML을 이미지로 변환

  20. 20

    자바 스크립트를 사용하여 커서 이미지 (CSS URL) 변경

  21. 21

    마우스 오버시 자바 스크립트 또는 CSS를 사용하여 배경 이미지 페이딩

  22. 22

    자바 스트림을 사용하여 A부터 Z까지 문자를 인쇄

  23. 23

    자바 스크립트를 사용하여 div 캔버스 중첩

  24. 24

    자바 스크립트 / JQuery 및 HTML (캔버스 없음)을 사용하여 라인으로 노드 연결

  25. 25

    자바 스크립트를 사용하여 텍스트를 이미지로 바꾸기

  26. 26

    자바 스크립트를 사용하여 코드에서 인쇄 페이지 설정을 설정하는 방법

  27. 27

    자바 스크립트 캔버스-사각형 클릭 여부 확인

  28. 28

    자바 스크립트에서 for 루프를 사용하여 할당없이 1 ... 10 숫자를 인쇄하는 방법

  29. 29

    자바 스크립트를 사용하여 src 업데이트

뜨겁다태그

보관