* @param {String} Data URL of the image * @param {Integer} Top left X-coordinate of the crop area * @param {Integer} Top left Y-coordinate of the crop area * @param {Integer} Width of the crop area * @param {Integer} Height of the crop area * @return {String}
(dataUrl, x, y, width, height)
| 1106 | * @return {String} |
| 1107 | */ |
| 1108 | function cropImageDataUrl(dataUrl, x, y, width, height) { |
| 1109 | return new Promise((resolve, reject) => { |
| 1110 | const image = new Image() |
| 1111 | image.src = dataUrl |
| 1112 | |
| 1113 | image.onload = () => { |
| 1114 | const canvas = document.createElement('canvas') |
| 1115 | canvas.width = width |
| 1116 | canvas.height = height |
| 1117 | |
| 1118 | const ctx = canvas.getContext('2d') |
| 1119 | ctx.drawImage(image, x, y, width, height, 0, 0, width, height) |
| 1120 | |
| 1121 | const croppedDataUrl = canvas.toDataURL('image/png') |
| 1122 | resolve(croppedDataUrl) |
| 1123 | } |
| 1124 | |
| 1125 | image.onerror = (error) => { |
| 1126 | reject(error) |
| 1127 | } |
| 1128 | }) |
| 1129 | } |
| 1130 | |
| 1131 | /** |
| 1132 | * @param {String} HTML representing a single element |