Open mayschil opened 3 years ago
I'm running my code in Angular 10 where I get svg dataUrl from an element. Sometimes, for no reason the library fails and I don't get the dataUrl. I have no idea why. This is the function where I'm trying to extract image from.
captureBackgroundImage(selectedMap, maps, mapObjects) { const el = document.getElementById('map-background') as HTMLElement; this.blockUI.start(); return new Promise((success, reject) => { return domtoimage.toSvg(el, {quality: 0.9, dpi: 96}) .then(dataUrl => { this.blockUI.stop(); return new Promise((res, rej) => { const img = new Image(); img.src = dataUrl; img.onload = () => { const elem = document.createElement('canvas'); const width = mapObjects.mapType === 'tgm' ? mapObjects.size.width 3 : 768; const height = mapObjects.mapType === 'tgm' ? mapObjects.size.height 3 : 823; elem.width = width; elem.height = height; const ctx = elem.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); const data = ctx.canvas.toDataURL('image/png'); const imgBlob = this.base64ImageToBlob(data); selectedMap.newImageFile = new File([imgBlob], dataUrl.png, {type: 'image/png'}); this.updateMapInService(selectedMap, maps); res(); success(); }; }); }).catch(err => { console.log('*error from domtoimage*****') console.log(err) this.blockUI.stop(); this.notifyService.notifyAlert('error', this.msgs.errorInExportingImage + ' - ' + selectedMap.name, 2000); success(); }); }); }
dataUrl.png
jsfiddle
Library always work
It woks 99%;
2.6.0
Chrome
Use case: description, code
I'm running my code in Angular 10 where I get svg dataUrl from an element. Sometimes, for no reason the library fails and I don't get the dataUrl. I have no idea why. This is the function where I'm trying to extract image from.
captureBackgroundImage(selectedMap, maps, mapObjects) { const el = document.getElementById('map-background') as HTMLElement; this.blockUI.start(); return new Promise((success, reject) => { return domtoimage.toSvg(el, {quality: 0.9, dpi: 96}) .then(dataUrl => { this.blockUI.stop(); return new Promise((res, rej) => { const img = new Image(); img.src = dataUrl; img.onload = () => { const elem = document.createElement('canvas'); const width = mapObjects.mapType === 'tgm' ? mapObjects.size.width 3 : 768; const height = mapObjects.mapType === 'tgm' ? mapObjects.size.height 3 : 823; elem.width = width; elem.height = height; const ctx = elem.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); const data = ctx.canvas.toDataURL('image/png'); const imgBlob = this.base64ImageToBlob(data); selectedMap.newImageFile = new File([imgBlob],
dataUrl.png, {type: 'image/png'}); this.updateMapInService(selectedMap, maps); res(); success(); }; }); }).catch(err => { console.log('*error from domtoimage*****') console.log(err) this.blockUI.stop(); this.notifyService.notifyAlert('error', this.msgs.errorInExportingImage + ' - ' + selectedMap.name, 2000); success(); }); }); }jsfiddle
Expected behavior
Library always work
Actual behavior (stack traces, console logs etc)
It woks 99%;
Library version
2.6.0
Browsers
Chrome