search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.32k stars 1.68k forks source link

Unreadable image src #217

Open sagarp2901 opened 6 years ago

sagarp2901 commented 6 years ago

Use case: description, code

domtoimage.toPng(element) .then(function (dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch(function (error) { console.error('oops, something went wrong!', error); });

Actual behavior (stack traces, console logs etc)

dataUrl returns a 'data;' which does not render any image.

Browsers

Raven-T commented 6 years ago

I had a similar problem with loading an img HTML tag. The problem was that the Image itself takes longer to generate then the actual DOM element. I fixed the problem after many tries with a Timeout before executing the domtoimage.toPng function.

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; import domtoimage from 'dom-to-image-chrome-fix'; //Use your normal dom to image import

export class EndpageComponent implements OnInit, AfterViewInit { ngAfterViewInit() { setTimeout(() => { var node = document.getElementById('capture');

domtoimage.toPng(node) .then(function (dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch(function (error) { console.error('oops, something went wrong!', error); });

}, 100); }