CanvasContext.toDataURL
Get the data URL of specified area of canvas
Parameters
It is Object type.
| Property | Type | Required | Default Value | Description |
| x | Number | No | 0 | The abscissa of the left-upper corner of the rectangular region to be extracted. |
| y | Number | No | 0 | The left-upper ordinate of the rectangular region to be extracted. |
| width | Number | No | The horizontal distance from the upper left corner of the extracted rectangle to the lower right corner of the canvas. | The width of the rectangular area to be extracted. |
| height | Number | No | The vertical distance from the upper left corner of the extracted rectangle to the lower right corner of the canvas. | The height of the rectangular area to be extracted. |
| destWidth | Number | No | Equals to width by default | The dest width of the rectangular area to be extracted. |
| destHeight | Number | No | Equals to height by default | The dest height of the rectangular area to be extracted. |
| fileType | String | No | png | The type of the picture, png or jpg. |
| quality | Number | No | - | 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
| Type | Description |
| Promise | The 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();
})