canvas 출력 이미지 코드 흐름 배경색 설정

2252 단어

문제


이전에 프로젝트에서 d3로 트리 그림 등svg 도형을 그렸고, 그 다음에 png 형식으로 이 그림을 서버에 업로드하여 다른 곳에서 호출할 수 있도록 저장해야 한다. 이것은svg 코드 흐름을 만들고 canvas에 그림을 그리고 마지막에 canvas를 이용한다.DataUrl () 은 png 코드 흐름을 생성하여 서버에 업로드하지만 업로드한 결과 문제가 발견되었습니다. png 코드 흐름이 생성한 그림이 canvas의 배경색을 잃어버리고 배경색이 투명하게 변했습니다.

문제의 원인


질문 조회 후 canvas 초안에서 발견된 원인은 다음과 같습니다.
For image types that do not support an alpha channel, the image must be composited onto a solid black background using the source-over operator, and the resulting image must be the one used to create the data: URL.
toDataUrl에서 출력한 코드 흐름을 이용하여 그림을 만들 때 그림 형식에 따라 투명하거나 검은색이 됩니다.

솔루션


직접 코드:
//Returns contents of a canvas as a png based data url, with the specified
//background color
function canvasToImage(backgroundColor)
{
    //cache height and width        
    var w = canvas.width;
    var h = canvas.height;

    var data;       

    if(backgroundColor)
    {
        //get the current ImageData for the canvas.
        data = context.getImageData(0, 0, w, h);

        //store the current globalCompositeOperation
        var compositeOperation = context.globalCompositeOperation;

        //set to draw behind current content
        context.globalCompositeOperation = "destination-over";

        //set background color
        context.fillStyle = backgroundColor;

        //draw background / rect on entire canvas
        context.fillRect(0,0,w,h);
    }

    //get the image data from the canvas
    var imageData = this.canvas.toDataURL("image/png");

    if(backgroundColor)
    {
        //clear the canvas
        context.clearRect (0,0,w,h);

        //restore it with original / cached ImageData
        context.putImageData(data, 0,0);        

        //reset the globalCompositeOperation to what it was
        context.globalCompositeOperation = compositeOperation;
    }

    //return the Base64 encoded data url string
    return imageData;
}

주요 몇 단계
  • canvas에서 ImageData 제공
  • globalCompositeOperation 속성을 destination-over로 설정합니다.그러면 현재 도면 아래에 새 도면이 그려집니다
    • .
  • rectangle을 그려서 원하는 배경색을 채워주세요
  • 이때 코드 흐름 생성
  • 뒤에 canvas를 지우고 초기 상태로 회복하면 됩니다

    • 참고 자료

  • 솔루션
  • MDN
    • 푸른 신비한 빌딩의 건설
    ldap 인증

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage