@pawgame/dom-to-image

DOM to Image

Fork改动

在函数 makeImage(uri) 添加:

var image = new Image();
image.crossOrigin = "";  // 添加这行

修复在ios设备上图片跨域截取是空白的问题

What is it

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.

Installation

NPM

npm install @pawgame/dom-to-image

移动端

/**
 * @param size
 * 根据设备的DPR，换算750设计稿的逻辑像素
 */
export const getSizeByDPR = (size: number): number => {
    const docFontSize = parseFloat(
        window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'),
    );
    return (size / 100) * docFontSize;
};

domtoimage.toJpeg(nodeRef.current, {
    bgcolor: '#FFFFFF',
    style: {
        'transform-origin': 'top center',
        transform: `scale(${window.devicePixelRatio})`,
    },
    width: 460 * window.devicePixelRatio,
    height: 674 * window.devicePixelRatio,
});

// 460x674 是内容的宽高