图片转canvas，canvas转png，下载png图片
程序员文章站
2022-05-15 18:18:19
...
<!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 -> 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>
推荐阅读