效果图:
image.png
导出效果:
image.png
如果canvas设置了背景色,导出的图片就不是透明的了,如:
image.png
代码如下,里面详细写了注释,可以快速看懂:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button id="btn">导出图片</button>
<br/>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas
标签。
</canvas>
</body>
<script>
// base64转blob
function base64ToBlob(code) {
// 截取base64的数据内容(去掉前面的描述信息,类似这样的一段:data:image/png;base64,)
var parts = code.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]); // 解码为2进制数据
var rawLength = raw.length; // 获取解码后的二进制数据的长度,用于后面创建二进制数据容器
// 创建
评论: