캔버스 사진과 캔버스 내보내기 다운로드

캔버스 지식에 대한 최근의 연구에서, 캔버스에 사진을 수출,

당신은 JPEG 형식으로 이미지를 내보낼 때 캔버스는 로컬 기본이 검은 색으로 바뀌에 투명하기 때문에 사진의 배경 색상이 검은 색이되었다 찾을 수

 <! - 캔버스 페이지가 <캔버스> 요소에 의해 그려진 사각형 상자가있다. -> 
    <! - HTML5의 <캔버스> 요소는 스크립트 (일반적으로 자바 스크립트)에 의해 달성 될, 그래픽을 그리는 데 사용됩니다. -> 
    <! - <캔버스> 태그는 단지 그래픽 컨테이너입니다, 당신은 그래픽을 그릴 스크립트를 사용해야합니다. -> 
    < 캔버스 ID = "캔버스" > </ 캔버스 > 
    < 버튼 클래스 = "버튼-균형" ID = "저장" > 변환 </ 버튼 > 
    < href를 = "" 다운로드 = "canvas_love.jpeg" ID = "save_herf" > <
        ALT = "" >  </ >

 var에 C = document.getElementById를 ( "캔버스" );
        기능 drawLove (캔버스) { 
            CTX하자 = canvas.getContext ( "2D" ); 
            ctx.beginPath (); 
            // 背景色转换成白色 
            ctx.fillStyle = "#fff" ; 
            ctx.fillRect ( 0, 0 , c.width, c.height); 

            // ctx.drawImage (IMG, 0, 0); 



            ctx.fillStyle는 = "#의 E992B9" ; 

            ctx.moveTo ( 75, 40 ); 

            ctx.bezierCurveTo ( 75, 37, 70, 25, 50, 25 ); 

            ctx.bezierCurveTo ( 20, 25, 20, 62.5, 20, 62.5 );

            ctx.bezierCurveTo ( 20, 80, 40, 102, 75, 120 ); 

            ctx.bezierCurveTo ( 110, 102, 130, 80, 130, 62.5 ); 

            ctx.bezierCurveTo ( 130, 62.5, 130, 25, 100, 25 ); 

            ctx.bezierCurveTo ( 85, 25, 75, 37, 75, 40 ); 

            ctx.fill (); 
       } 

        drawLove (c); 

        VAR butSave = document.getElementById를 ( "저장" ); 
        CONSOLE.LOG (butSave) 
         butSave.onclick = 함수 () {
             // 경고 ( '123') 

            VAR svaeHref = document.getElementById를 ( "save_herf" );

            / * 
        
             * 들어오는 MIME 형식을 사용하면 사진을 저장할 포맷에 대응 
        
             * 공통 : 이미지 / PNG, 이미지 / GIF, 이미지 / JPG, 이미지 / JPEG 
        
             * / 

            var에 IMG = document.getElementById를 ( "save_img" ); 

            var에 tempSrc = canvas.toDataURL ( "이미지 / JPEG" );
             // 을 console.log (tempSrc) 

            svaeHref.href = tempSrc; 

            img.src = tempSrc; 

        };