ng-cw-v12/fesm2015/ng-cw-v12-html2canvas-service.js

Angular UI component library

import * as i0 from '@angular/core';
import { Injectable, NgModule } from '@angular/core';
import { __awaiter } from 'tslib';
import html2canvas from 'html2canvas';

class NcHtml2canvasService {
    constructor() { }
    /**
     * 截图
     * @param dom 要截图的DOM元素
     * @param options 截图配置
     * @param options.type 输出图片的类型，可选值：'canvas' | 'base64' | 'blob'，默认值：'canvas'
     * @param options.scale 输出图片的缩放比例，值越大清晰度越高，默认值：1
     * @param options.backgroundColor 输出图片的背景颜色，默认值：'white'
     * @returns 根据type返回不同类型：
     *          - 'canvas': 返回 HTMLCanvasElement
     *          - 'base64': 返回 base64 字符串
     *          - 'blob': 返回 Blob 对象
     */
    html2canvas(dom, options) {
        return __awaiter(this, void 0, void 0, function* () {
            return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
                // 手动创建一个 canvas 标签
                const canvas = document.createElement("canvas");
                //屏幕缩放比
                const screenScale = this.getScreenScale();
                // 获取父级的宽高
                const width = parseInt(getComputedStyle(dom).width) * screenScale;
                const height = parseInt(getComputedStyle(dom).height) * screenScale;
                //画布缩放比例
                const baseScale = (options === null || options === void 0 ? void 0 : options.scale) || 1;
                //画布实际宽高（像素）
                canvas.width = width * baseScale;
                canvas.height = height * baseScale;
                //生成画笔
                const ctx = canvas.getContext("2d");
                //设置绘图上下文的缩放比例，确保绘制的内容与 canvas 的实际尺寸匹配。
                ctx.scale(baseScale, baseScale);
                //画布在页面上显示的宽高
                canvas.style.width = width + 'px';
                canvas.style.height = height + 'px';
                // 假如dom宽高400*400,baseScale=2时,canvas的实际宽高为800*800
                // 但是返回的canvas的style宽高为400*400
                // 这样可以提高清晰度，baseScale越大，清晰度越高，文件越大
                const config = {
                    backgroundColor: (options === null || options === void 0 ? void 0 : options.backgroundColor) || 'white',
                    canvas: canvas,
                    useCORS: true
                };
                const data = yield html2canvas(dom, config);
                const type = (options === null || options === void 0 ? void 0 : options.type) || 'canvas';
                if (type == 'blob') {
                    data.toBlob((blob) => {
                        resolve(blob);
                    });
                }
                else if (type == 'base64') {
                    resolve(data.toDataURL("image/png"));
                }
                else {
                    resolve(data);
                }
            }));
        });
    }
    // 获取屏幕缩放比例方法
    getScreenScale() {
        var screenScale = 1;
        var screen = window.screen;
        var ua = navigator.userAgent.toLowerCase();
        //设备像素比
        if (window.devicePixelRatio !== undefined) {
            screenScale = window.devicePixelRatio;
            //IE11以下版本浏览器
        }
        else if (ua.indexOf('msie') > -1) {
            if (screen.deviceXDPI && screen.logicalXDPI) {
                screenScale = screen.deviceXDPI / screen.logicalXDPI;
            }
            //浏览器自身缩放
        }
        else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
            screenScale = window.outerWidth / window.innerWidth;
        }
        if (screenScale) {
            screenScale = Math.round(screenScale * 100) / 100;
        }
        return screenScale;
    }
}
NcHtml2canvasService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHtml2canvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NcHtml2canvasService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHtml2canvasService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHtml2canvasService, decorators: [{
            type: Injectable
        }], ctorParameters: function () { return []; } });

class NcHtml2canvasServiceModule {
}
NcHtml2canvasServiceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHtml2canvasServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcHtml2canvasServiceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHtml2canvasServiceModule });
NcHtml2canvasServiceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHtml2canvasServiceModule, providers: [NcHtml2canvasService] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHtml2canvasServiceModule, decorators: [{
            type: NgModule,
            args: [{
                    providers: [NcHtml2canvasService]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { NcHtml2canvasService, NcHtml2canvasServiceModule };
//# sourceMappingURL=ng-cw-v12-html2canvas-service.js.map