全部产品

CanvasContext.toDataURL

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

入参

Object 类型,属性如下:

属性类型必填默认值说明
xNumber0将要被提取的矩形区域的左上角横坐标。
yNumber0将要被提取的矩形区域的左上角纵坐标。
widthNumber被提取的矩形区域的左上角到画布右下角的横向距离。将要被提取的矩形区域的宽度。
heightNumber被提取的矩形区域的左上角到画布右下角的纵向距离。将要被提取的矩形区域的高度。
destWidthNumber默认等于 width将要被提取的矩形区域提取后的宽度。
destHeightNumber默认等于 height将要被提取的矩形区域提取后的高度。
fileTypeStringpng图片格式,值为 'jpg' 或' png' 。
qualityNumber-图片格式为 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();
})