CanvasContext.toDataURL

Get the data URL of specified area of canvas

Parameters

It is Object type.

FieldTypeMandatoryDefault ValueDescription
xNumberNo0The abscissa of the left-upper corner of the rectangular region to be extracted
yNumberNo0The left-upper ordinate of the rectangular region to be extracted
widthNumberNoThe horizontal distance from the upper left corner of the extracted rectangle to the lower right corner of the canvasThe width of the rectangular area to be extracted
heightNumberNoThe vertical distance from the upper left corner of the extracted rectangle to the lower right corner of the canvasThe height of the rectangular area to be extracted
destWidthNumberNoEquals to width by defaultThe dest width of the rectangular area to be extracted
destHeightNumberNoEquals to height by defaultThe dest height of the rectangular area to be extracted
fileTypeStringNopngThe type of the picture, png or jpg
qualityNumberNo-The quality of the image corresponding to the data URL when the image format is JPG. Values range from 0 to 1, and will default to 1 if exceeded. Other image formats this parameter is ignored

Return Value

Promis

TypeDescription
PromiseThe extracted String for data URL

Sample Code

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