<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="change" width="88" height="6"></canvas>
<button onclick="bnt()">按钮</button>
</body>
<script type="text/javascript">
var canvas = document.getElementById("change");
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(26, 207, 185, 0.8)';
context.fillRect(0, 0, 88, 6);
function bnt() {
console.log(888)
// console.log(123,canvas.toDataURL('image/png'))
// let a = document.createElement('a');
// a.download = 'tupian.png';
// a.href = canvas.toDataURL('image/png');
// a.click();
canvas.toBlob(function (blob) {//blob将base64编码的src 以二进制的形式存进了 Blob对象
let a = document.createElement('a');
a.download = 'tupian.png';
a.href = window.URL.createObjectURL(blob);
a.click();
console.log(blob)
}, 'image/png');
}
</script>
</html>
canvas生成图片并下载
最新推荐文章于 2024-06-18 18:04:17 发布