canvas pictures and canvas Export Download

In a recent study on the canvas knowledge, exporting pictures on canvas,

When you export images in jpeg format, you will find the picture background color became black because the canvas is transparent to the local default turned into black

 <! - a canvas page is a rectangular box, drawn by <canvas> element. -> 
    <! - the HTML5 <canvas> element is used to draw graphics, be accomplished by a script (typically JavaScript). -> 
    <-! <Canvas> tag is just a graphical container, you must use a script to draw graphics. -> 
    < Canvas ID = "Canvas" > </ Canvas > 
    < Button class = "Button-Balanced" ID = "Save" > Conversion </ Button > 
    < A the href = "" downloads = "canvas_love.jpeg" ID = "save_herf" > 
        < alt=""> </a>
 var c = document.getElementById("canvas");
        function drawLove(canvas) {
            let 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("save");
        console.log(butSave)
         butSave.onclick = function () {
            // alert('123')

            var svaeHref = document.getElementById("save_herf");

            / * 
        
             * Incoming mime type corresponds to the format you want to save the picture 
        
             * Common: Image / PNG, Image / GIF, Image / JPG, Image / jpeg 
        
             * / 

            var img = document.getElementById ( "save_img" ); 

            var tempSrc = canvas.toDataURL ( "Image / JPEG" );
             // the console.log (tempSrc) 

            svaeHref.href = tempSrc; 

            img.src = tempSrc; 

        };

 

Guess you like

Origin www.cnblogs.com/lpp-11-15/p/11316727.html