Dom-to-image: Background-Image not displayed after capture

[MatanYadaev]

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+

[leonardoResendeLima]

+1

[mwierzba]

+1

[vishal-px]

+1

[SwatiJadhav46]

+1

[ZhuRuiHeng]

+1

[gastounage]

+1, any workaround ?

[Raven-T]

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

[abhisheksdm]

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

[rafaeldcastro]

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

[terry623]

+1

[prettyboyweiwei]

+1

[rebitco]

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

[rylax]

+1

[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.

[mtsee]

在我们的项目中使用了此插件（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);
    }
  }