调用CanvasContext.toDataURL获取画布指定区域的dataURL数据-阿里云帮助中心

获取画布指定区域的 data URL 数据。

入参

Object 类型，属性如下：

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

返回值

Promise

类型	说明
Promise	提取的data URL字符串

示例代码

const ctx = my.createCanvasContext('awesomeCanvas')；

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();
})