캔버스 요소 만 인쇄 할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/172365

  •  05-07-2019
  •  | 
  •  

문제

정보를 입력 한 다음 해당 정보를 기반으로 캔버스 요소에 이미지를 그릴 수있는 웹 페이지를 만들었습니다. 나는 인쇄를 제외하고는 내가 원하는 방식으로 거의 일하고 있습니다.

캔버스 요소를 인쇄 할 수있는 방법이 있습니까?

업데이트:

대답은 매우 간단했습니다. 나는 훨씬 더 복잡한 솔루션을 생각하고있었습니다.

나는 1 개 이상의 답변을 선택할 수 있으면 좋겠다. 디스플레이를 비활성화하는 데 사용했을 때 캔버스를 인쇄 할 수 없었습니다. 가장 간단한 솔루션은 @Media print {} 내부의 CSS에서 양식 {display : none;}을 사용하여 입력에 사용중인 양식을 끄는 것이 었습니다. 빠른 응답 감사합니다.



    @media print {
           form {
         display:none;
       }
    }
도움이 되었습니까?

해결책

당신은 다음과 같은 것을 시도 할 수 있습니다 :

@media print {
  * {
    display:none;
  }

  #SOME-CANVAS-ID {
    display:block;
  }
}

캔버스가 기본적으로 블록인지 확실하지 않지만 그 선을 따라 무언가를 시도하고 그것이 작동하는지 확인할 수 있습니다. 아이디어는 규칙의 우선 순위가 더 높으면 (ID 선택기를 사용한 이유)를 제외하고는 인쇄 매체의 모든 것을 숨길 것입니다.

편집 : CSS3 인 경우 (특히 부정 의사 클래스) 더 많은 지원을 받았으며 규칙은 다음과 같이 간단 할 수 있습니다.

*:not(canvas) {
  display:none;
}

그러나 이것은 발생할 수 있습니다u003Chtml> 그리고u003Cbody> 숨겨져있는 태그, 캔버스도 효과적으로 숨기고 ...

다른 팁

나는 지원을 100% 확신하지 못하지만 CSS를 사용하고 속성을 <link> 태그 media="print". 이 CSS 파일에서 인쇄하는 동안 표시하지 않으려는 요소를 숨기십시오. display:none;

인쇄를 위해 캔버스를 만들 수 있습니다.

this.Print = function () {
    var printCanvas = $('#printCanvas');
    printCanvas.attr("width", mainCanvas.width);
    printCanvas.attr("height", mainCanvas.height);
    var printCanvasContext = printCanvas.get(0).getContext('2d');
    window.print();
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top