Canvas图像数据导出详解，掌握toDataURL、toBlob、图像下载等核心功能。Canvas提供了多种方式将画布内容导出为图像数据。
| 方法 | 说明 |
|---|---|
| toDataURL(type, quality) | 导出为Base64数据URL |
| toBlob(callback, type, quality) | 导出为Blob对象 |
| mozGetAsFile() | Firefox专用，导出为File对象 |
将画布内容转换为Base64编码的数据URL：
const canvas = document.getElementById('canvas')
// 默认PNG格式
const dataURL = canvas.toDataURL()
// 指定格式
const pngURL = canvas.toDataURL('image/png')
const jpegURL = canvas.toDataURL('image/jpeg')
const webpURL = canvas.toDataURL('image/webp')
// 指定质量（0-1，仅对JPEG和WebP有效）
const jpegURL = canvas.toDataURL('image/jpeg', 0.8)
异步导出为Blob对象：
const canvas = document.getElementById('canvas')
canvas.toBlob(function(blob) {
// blob为Blob对象
console.log('Blob大小:', blob.size)
console.log('Blob类型:', blob.type)
// 创建下载链接
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'canvas-image.png'
a.click()
URL.revokeObjectURL(url)
}, 'image/png')
function downloadCanvas(canvas, filename, format = 'image/png', quality = 1) {
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = filename
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
}, format, quality)
}
// 使用示例
downloadCanvas(canvas, 'my-image.png')
downloadCanvas(canvas, 'my-image.jpg', 'image/jpeg', 0.8)
function exportRegion(canvas, x, y, width, height) {
const tempCanvas = document.createElement('canvas')
tempCanvas.width = width
tempCanvas.height = height
const tempCtx = tempCanvas.getContext('2d')
tempCtx.drawImage(canvas, x, y, width, height, 0, 0, width, height)
return tempCanvas.toDataURL()
}
| 格式 | MIME类型 | 支持情况 |
|---|---|---|
| PNG | image/png | 所有浏览器 |
| JPEG | image/jpeg | 所有浏览器 |
| WebP | image/webp | Chrome, Firefox |
// JPEG质量对比
const highQuality = canvas.toDataURL('image/jpeg', 1.0) // 高质量
const mediumQuality = canvas.toDataURL('image/jpeg', 0.5) // 中等质量
const lowQuality = canvas.toDataURL('image/jpeg', 0.1) // 低质量
跨域限制
画布包含跨域图像时无法导出。
画布污染
使用crossOrigin属性避免画布污染。
内存管理
及时释放Blob URL避免内存泄漏。