HTMLCanvasElement

属性

width

元素的宽,没有设置的话默认300

height

元素的高,没有设置的话默认150

方法

toBlob

返回 Blob 对象，用以展示 canvas 上的信息.

语法

toBlob(callback, type, quality)

参数

callback

toBlob方法执行后的回调函数,得一个 Blob 对象参数。如果图像未被成功创建，可能会获得 null 值。

type(可选)

指定图片格式，默认格式为 image/png 也可以为image/webp。

quality(可选)

值在 0 与 1 之间(Number类型)，当请求图片格式为 image/jpeg 或者 image/webp 时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值(0.92)。

示例

这里将canvas元素转为blob对象，由于blob对象无法直接作为img元素的src属性使用,所以要使用URL.createObjectURL()方法处理成一个URL对象作为img的src属性使用,最后使用revokeObjectURL释放掉已经创建的URL对象。

const canvas = document.getElementById('canvas')

canvas.toBlob((blob) => {
  const newImg = document.createElement('img')
  const url = URL.createObjectURL(blob)

  newImg.onload = () => URL.revokeObjectURL(url)

  newImg.src = url
  document.body.appendChild(newImg)
})

toDataURL

返回一个data URI

语法

canvas.toDataURL(type, encoderOptions);

参数

type(可选)

指定图片格式，默认格式为 image/png 也可以为image/webp(safari不支持webp格式)。

encoderOptions(可选)

在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92.

示例

<canvas id="canvas" width="5" height="5"></canvas>

const canvas = document.getElementById("canvas");
const dataURL = canvas.toDataURL();
console.log(dataURL);
//"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

toBlob与toDataURL的区别

info

1. 输出格式toBlob返回的是Blob对象,而toDataURL是Data URL也就是base64编码的字符串.
2. toBlob需要在他的回调函数里面拿到Blob数据进行操作(适用于需要处理二进制数据的情况,比如上传到服务器),toDataURL是同步的可以直接使用返回的dataURL(适用于直接在浏览器中显示图像或保存图像到本地).