原理
HTML5中的canvas允许我们直接对像素进行操作。并且提供了toDataURL方法，供我们将canvas内容转化为图片格式。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
/**
* 返回值 canvas对象
*/
const drawImgFun = () => {
const el = document.getElementById('canvas')
const ctx = el.getContext('2d')
console.log(el, ctx)
ctx.beginPath();
ctx.arc(150, 150, 100, Math.PI * 0, Math.PI * 2)
ctx.fillStyle = "skyblue";
ctx.fill();
return el
}
/**
* 参数 canvas:canvas对象
*/
const screenshots = (canvas) => {
const base64Img = canvas.toDataURL()
console.log(base64Img)
const imgEl = new Image()
imgEl.onload = () => {
window.document.body.appendChild(imgEl)
}
imgEl.src = base64Img
}
screenshots(drawImgFun())
</script>
</body>
</html>
</body>
</html>
img.png
其他细节
1.图片格式选择不一致，生成的base64编码大小不一致。
结论：webp < png < jpeg
23232.png
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
/**
* 返回值 canvas对象
*/
const drawImgFun = () => {
const el = document.getElementById('canvas')
const ctx = el.getContext('2d')
console.log(el, ctx)
ctx.beginPath();
ctx.arc(150, 150, 100, Math.PI * 0, Math.PI * 2)
ctx.fillStyle = "skyblue";
ctx.fill();
return el
}
/**
* 参数 canvas:canvas对象
*/
const screenshots = (canvas) => {
const base64Img_png = canvas.toDataURL('image/png')
const base64Img_jpeg = canvas.toDataURL('image/jpeg', 1.0)
const base64Img_webp = canvas.toDataURL('image/webp', 1.0)
appendImgEl(base64Img_png)
appendImgEl(base64Img_jpeg)
appendImgEl(base64Img_webp)
}
const appendImgEl = (imgSrc) => {
const imgEl = new Image()
imgEl.onload = () => {
window.document.body.appendChild(imgEl)
console.log(imgEl, imgSrc.length)
}
imgEl.src = imgSrc
}
screenshots(drawImgFun())
</script>
</body>
</html>
</body>
</html>
2.webp和jpeg可以选择图片质量，默认值为0.92。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
/**
* 返回值 canvas对象
*/
const drawImgFun = () => {
const el = document.getElementById('canvas')
const ctx = el.getContext('2d')
console.log(el, ctx)
ctx.beginPath();
ctx.arc(150, 150, 100, Math.PI * 0, Math.PI * 2)
ctx.fillStyle = "skyblue";
ctx.fill();
return el
}
/**
* 参数 canvas:canvas对象
*/
const screenshots = (canvas) => {
const base64Img_jpeg0 = canvas.toDataURL('image/jpeg', 0.0)
const base64Img_jpeg1 = canvas.toDataURL('image/jpeg', 0.1)
const base64Img_jpeg2 = canvas.toDataURL('image/jpeg', 0.5)
const base64Img_jpeg3 = canvas.toDataURL('image/jpeg', 1.0)
appendImgEl(base64Img_jpeg0)
appendImgEl(base64Img_jpeg1)
appendImgEl(base64Img_jpeg2)
appendImgEl(base64Img_jpeg3)
}
const appendImgEl = (imgSrc) => {
const imgEl = new Image()
imgEl.onload = () => {
window.document.body.appendChild(imgEl)
console.log(imgEl, imgSrc.length)
}
imgEl.src = imgSrc
}
screenshots(drawImgFun())
</script>
</body>
</html>
</body>
</html>