CanvasContext.toDataURL

简介

CanvasContext.toDataURL 用于获取画布指定区域的 data URL 数据。

扫码体验

undefined

效果示例

画布.gif

示例代码

// .js
const ctx = my.createCanvasContext('canvas')；


ctx.setFillStyle('#108ee9');
ctx.arc(50, 50, 50, 0, Math.PI * 2, true);
ctx.fill();
ctx.draw();
ctx.toDataURL({
  x: 50,
  y: 50,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
}).then(dataURL=>{
  ctx.drawImage(dataURL, 0, 0);
  ctx.draw();
})

入参

Object 类型，属性如下：

属性	类型	必填	描述
x	Number	否	将要被提取的矩形区域的左上角横坐标。默认值为 0。
y	Number	否	将要被提取的矩形区域的左上角纵坐标。默认值为 0。
width	Number	否	将要被提取的矩形区域的宽度。默认值为被提取的矩形区域的左上角到画布右下角的横向距离。
height	Number	否	将要被提取的矩形区域的高度。默认值为被提取的矩形区域的左上角到画布右下角的纵向距离。
destWidth	Number	否	将要被提取的矩形区域提取后的宽度。默认等于 width。
destHeight	Number	否	将要被提取的矩形区域提取后的高度。默认等于 height。
fileType	String	否	图片格式，可选值为 jpg 或 png。默认为 png.
quality	Number	否	图片格式为 jpg 的情况下，data URL 对应的图片的质量。取值范围为 0 到 1，如果超出取值范围，将会默认该值为 1。其他图片格式该参数会被忽略。

返回值

属性	类型	描述
Promise	String	提取的 data URL 字符串。