Dom-to-image: Bug in rescaling DOM node

[sumigoma]

Use case: description, code

This enhancement was made last year to support using the height and width inputs for rescaling:
https://github.com/tsayen/dom-to-image/issues/21

However, this breaks usage of transform for scaling. Here is a sample codepen:
http://codepen.io/anon/pen/mRjBMY

The borders show the original DOM node bounds and the final image size. The intended result is a screenshot that is 1/2 the size of the original (using width/height, in addition to style -> transform).

The style input has a transform: scale(.5), but the background image has been reduced to a 1/4 of the size. This is because the height and width inputs are applied in addition to the transform.

Expected behavior

Only the style -> transform should be used to rescale the output. Without a transform, the height and width should crop the result, not scale it.

Actual behavior (stack traces, console logs etc)

As above.

The problem is in the following lines:

function applyOptions(clone) {
            if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;

            if (options.width) clone.style.width = options.width + 'px'; // THESE SHOULD BE REMOVED
            if (options.height) clone.style.height = options.height + 'px'; // THESE SHOULD BE REMOVED

            if (options.style)
                Object.keys(options.style).forEach(function (property) {
                    clone.style[property] = options.style[property];
                });

            return clone;
        }

Library version

2.5.2

Browsers

• [ ] Chrome 55

[Brieg]

+1

[vget98]

+1

[AngelineLim]

+1

Any update on this issue? I'm facing a similar issue myself, and am wondering if there's any workaround.

[AngelineLim]

In case anyone else is facing a similar issue, you can workaround this issue using the width and height properties of CSS under style:

var style = {
  transform: 'scale(.5)',
  transform-origin: 'top left',
  width: '500px', // use original width of DOM element to avoid part of the image being cropped out
  height: '500px' // use original height of DOM element
};

Then, when using domtoimage:

domtoimage.toSvg(node, {
    style: style, 
    width:250, // this will be the intended width of your SVG
    height: 250 // this will be the intended height of your SVG
 })

This will work for all .toPng / .toBlob / .toSvg. Here's an updated sample of the working codepen: https://codepen.io/anon/pen/GbypqQ