图片转canvas，canvas转png，下载png图片


<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>JavaScript Canvas Image Conversion Example</title>
    <meta name="description" content="" />
<style>
.demo-frame header, .demo-frame h1, .demo-frame .demo-conversion {
    display: none;
}

.demo-wrapper {
    min-height: 500px;
}

.bsap {
    position: absolute;
    top: 0;
    right: 0;
}
    #carbonads {
position: absolute;
top: 0;
right: 0;
display: block;
overflow: hidden;
padding: 1.5em 1em;
max-width: 230px;
border: solid 1px hsl(0, 0%, 88%);
background-color: hsl(0, 0%, 96%);
text-align: center;
font-size: 18px;
line-height: 1.5;
transition: all .2s ease-in-out;
}

#carbonads:hover {
background-color: hsl(0, 0%, 93%);
}

#carbonads a {
text-decoration: none;
}

#carbonads span {
display: block;
overflow: hidden;
}

.carbon-img img {
display: block;
margin: 0 auto 1em;
}

.carbon-text {
display: block;
margin-bottom: .5em;
}

.carbon-poweredby {
display: block;
font-size: 16px;
}

@media (max-width: 768px) {
    #carbonads { display:none; }
}
</style>

</head>
<body>

<div class=main><div class="center clear">
<main id=main>
<div class="demo-wrapper">

<div id="promoNode"></div>
    <h2>Original Image</h2>
    <p>
        <img src="ringo-ftw.jpg" id="ringoImage" />
    </p>

    <h2>Canvas Image</h2>
    <p id="canvasHolder">

    </p>

    <h2>Canvas -&gt; PNG Image</h2>

    <a id="pngHolder" href="imges/1.jpg" download="图片">
    </a>


</div>

</main>
<script>
        window.onload = function() {

            // Converts image to canvas; returns new canvas element
            function convertImageToCanvas(image) {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.getContext("2d").drawImage(image, 0, 0);

                return canvas;
            }

            // Converts canvas to an image
            function convertCanvasToImage(canvas) {
                var image = new Image();
                image.src = canvas.toDataURL("image/jpg");
                image.crossorigin="Anonymous";
                document.getElementById("pngHolder").href = canvas.toDataURL("image/jpg");
                return image;
            }



            // Get the image
            var sampleImage = document.getElementById("ringoImage"),
                canvas = convertImageToCanvas(sampleImage);


            // Actions
            document.getElementById("canvasHolder").appendChild(canvas);
            document.getElementById("pngHolder").appendChild(convertCanvasToImage(canvas));




        };






</script>



</body>
</html>
图片转canvas，canvas转png，下载png图片

猜你喜欢
