dom-to-image Background-Image not displayed after capture

Expected behavior

When I capture div with background-image, display this image in the captured image

Actual behavior (stack traces, console logs etc)

No image is displayed, but the div contents displayed

Library version

2.6.0

Browsers

[x] Chrome 49+
[ ] Firefox 45+

Feb 05 '18 14:02 MatanYadaev

+1

Feb 08 '18 15:02 leonardoResendeLima

+1

Feb 08 '18 19:02 mwierzba

+1

Feb 15 '18 04:02 vishal-px

+1

Feb 16 '18 02:02 SwatiJadhav46

+1

Apr 19 '18 09:04 ZhuRuiHeng

+1, any workaround ?

Jun 28 '18 15:06 alexmootassem

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

Jul 13 '18 15:07 Raven-T

same isssue in reactjs, background color is not displaying but elements are displaying

Feb 12 '19 05:02 abhisheksdm

@Raven-T Whats that 'dom-to-image-chrome-fix'?

Feb 14 '19 10:02 rafaeldcastro

+1

Mar 02 '19 06:03 terry623

+1

Apr 25 '19 10:04 prettyboyweiwei

+1, if set background with BASE64 type , it`s ok! But set background with imageURL were not OK.

Sep 27 '19 09:09 rebitco

+1

Mar 20 '20 18:03 rylax

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

doesnt seem to work properly. It worked a couple of times. However, doesnt render well on mobile and browsers other than Chrome.

Mar 20 '20 18:03 rylax

在我们的项目中使用了此插件（h5ds.com），最终我们将background图片修改成base64即可解决此问题，修改大概600行方法：inlineAll

function getBase64(src) {
    console.log('urlurlurlurl', src);
    return new Promise((resolve, reject) => {
      var img = new Image();
      img.crossOrigin = 'Anonymous'; // 允许跨域
      img.onload = () => {
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        var canvas = $('<canvas width="' + width + '" height="' + height + '"></canvas>')[0];
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
        resolve(canvas.toDataURL());
      };
      img.onerror = err => {
        console.error('图片转base64失败！');
        reject(err);
      };
      img.src = src;
    });
  }

  async function inlineAll(string, baseUrl, get) {
    if (nothingToInline()) return Promise.resolve(string);

    // 背景图转化成base64解决浏览器不能截取的问题
    var url = string.split(' ')[0];
    if (url.indexOf('url(') !== -1) {
      url = url.replace(/"|'|url|\(|\)/g, '');
      var base64 = await getBase64(url + '?dom-to-image');
      string = string.replace(url, base64);
    }

    return Promise.resolve(string)
      .then(readUrls)
      .then(function (urls) {
        var done = Promise.resolve(string);
        urls.forEach(function (url) {
          if (!urlsCache[url]) {
            done = done.then(function (string) {
              return inline(string, url, baseUrl, get);
            });
            urlsCache[url] = done;
          }
        });
        return done;
      });

    function nothingToInline() {
      return !shouldProcess(string);
    }
  }