原理
HTML5中的canvas允許我們直接對像素進行操作容诬。并且提供了toDataURL方法声诸，供我們將canvas內(nèi)容轉(zhuǎn)化為圖片格式。
示例代碼
<!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
}
/**
* 參數(shù) 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
其他細節(jié)
1.圖片格式選擇不一致勤庐，生成的base64編碼大小不一致边苹。
結(jié)論：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
}
/**
* 參數(shù) 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可以選擇圖片質(zhì)量筝蚕，默認值為0.92锄列。
image.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
}
/**
* 參數(shù) 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>
