ng-cw-v12
Version:
Angular UI component library
95 lines • 13.3 kB
JavaScript
import { __awaiter } from "tslib";
import { Injectable } from '@angular/core';
import html2canvas from "html2canvas";
import * as i0 from "@angular/core";
export 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(window.getComputedStyle(dom).width) * screenScale;
const height = parseInt(window.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 []; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHRtbDJjYW52YXMuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvaHRtbDJjYW52YXMtc2VydmljZS9odG1sMmNhbnZhcy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sV0FBVyxNQUFNLGFBQWEsQ0FBQzs7QUFTdEMsTUFBTSxPQUFPLG9CQUFvQjtJQUUvQixnQkFBZ0IsQ0FBQztJQUVqQjs7Ozs7Ozs7Ozs7T0FXRztJQUNHLFdBQVcsQ0FBQyxHQUFnQixFQUFFLE9BQThCOztZQUNoRSxPQUFPLElBQUksT0FBTyxDQUFNLENBQU8sT0FBTyxFQUFFLE1BQU0sRUFBRSxFQUFFO2dCQUNoRCxtQkFBbUI7Z0JBQ25CLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUE7Z0JBQy9DLE9BQU87Z0JBQ1AsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO2dCQUMxQyxVQUFVO2dCQUNWLE1BQU0sS0FBSyxHQUFHLFFBQVEsQ0FBQyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsV0FBVyxDQUFDO2dCQUN6RSxNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLEdBQUcsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxHQUFHLFdBQVcsQ0FBQztnQkFDM0UsUUFBUTtnQkFDUixNQUFNLFNBQVMsR0FBRyxDQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxLQUFLLEtBQUksQ0FBQyxDQUFDO2dCQUN0QyxZQUFZO2dCQUNaLE1BQU0sQ0FBQyxLQUFLLEdBQUcsS0FBSyxHQUFHLFNBQVMsQ0FBQztnQkFDakMsTUFBTSxDQUFDLE1BQU0sR0FBRyxNQUFNLEdBQUcsU0FBUyxDQUFDO2dCQUNuQyxNQUFNO2dCQUNOLE1BQU0sR0FBRyxHQUFRLE1BQU0sQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ3pDLHVDQUF1QztnQkFDdkMsR0FBRyxDQUFDLEtBQUssQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDLENBQUM7Z0JBQ2hDLGFBQWE7Z0JBQ2IsTUFBTSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQztnQkFDbEMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsTUFBTSxHQUFHLElBQUksQ0FBQztnQkFFcEMsa0RBQWtEO2dCQUNsRCw4QkFBOEI7Z0JBQzlCLG1DQUFtQztnQkFFbkMsTUFBTSxNQUFNLEdBQVE7b0JBQ2xCLGVBQWUsRUFBRSxDQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxlQUFlLEtBQUksT0FBTztvQkFDcEQsTUFBTSxFQUFFLE1BQU07b0JBQ2QsT0FBTyxFQUFFLElBQUk7aUJBQ2QsQ0FBQTtnQkFDRCxNQUFNLElBQUksR0FBc0IsTUFBTSxXQUFXLENBQUMsR0FBRyxFQUFFLE1BQU0sQ0FBQyxDQUFDO2dCQUMvRCxNQUFNLElBQUksR0FBRyxDQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxJQUFJLEtBQUksUUFBUSxDQUFDO2dCQUN2QyxJQUFJLElBQUksSUFBSSxNQUFNLEVBQUU7b0JBQ2xCLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFpQixFQUFFLEVBQUU7d0JBQ2hDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztvQkFDaEIsQ0FBQyxDQUFDLENBQUE7aUJBQ0g7cUJBQU0sSUFBSSxJQUFJLElBQUksUUFBUSxFQUFFO29CQUMzQixPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO2lCQUN0QztxQkFBTTtvQkFDTCxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7aUJBQ2Y7WUFDSCxDQUFDLENBQUEsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztLQUFBO0lBRUQsYUFBYTtJQUNMLGNBQWM7UUFDcEIsSUFBSSxXQUFXLEdBQUcsQ0FBQyxDQUFDO1FBQ3BCLElBQUksTUFBTSxHQUFRLE1BQU0sQ0FBQyxNQUFNLENBQUM7UUFDaEMsSUFBSSxFQUFFLEdBQUcsU0FBUyxDQUFDLFNBQVMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUMzQyxPQUFPO1FBQ1AsSUFBSSxNQUFNLENBQUMsZ0JBQWdCLEtBQUssU0FBUyxFQUFFO1lBQ3pDLFdBQVcsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUM7WUFDdEMsYUFBYTtTQUNkO2FBQU0sSUFBSSxFQUFFLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFO1lBQ2xDLElBQUksTUFBTSxDQUFDLFVBQVUsSUFBSSxNQUFNLENBQUMsV0FBVyxFQUFFO2dCQUMzQyxXQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDO2FBQ3REO1lBQ0QsU0FBUztTQUNWO2FBQU0sSUFBSSxNQUFNLENBQUMsVUFBVSxLQUFLLFNBQVMsSUFBSSxNQUFNLENBQUMsVUFBVSxLQUFLLFNBQVMsRUFBRTtZQUM3RSxXQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDO1NBQ3JEO1FBQ0QsSUFBSSxXQUFXLEVBQUU7WUFDZixXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxXQUFXLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxDQUFDO1NBQ25EO1FBQ0QsT0FBTyxXQUFXLENBQUM7SUFDckIsQ0FBQzs7aUhBbEZVLG9CQUFvQjtxSEFBcEIsb0JBQW9COzJGQUFwQixvQkFBb0I7a0JBRGhDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCBodG1sMmNhbnZhcyBmcm9tIFwiaHRtbDJjYW52YXNcIjtcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgTmNIdG1sMmNhbnZhc09wdGlvbnMge1xyXG4gIHR5cGU/OiAnY2FudmFzJyB8ICdiYXNlNjQnIHwgJ2Jsb2InOy8vIOi+k+WHuuWbvueJh+eahOexu+Wei1xyXG4gIHNjYWxlPzogbnVtYmVyOy8vIOi+k+WHuuWbvueJh+eahOe8qeaUvuavlOS+i1xyXG4gIGJhY2tncm91bmRDb2xvcj86IHN0cmluZzsvLyDovpPlh7rlm77niYfnmoTog4zmma/popzoibJcclxufVxyXG5cclxuQEluamVjdGFibGUoKVxyXG5leHBvcnQgY2xhc3MgTmNIdG1sMmNhbnZhc1NlcnZpY2Uge1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICAvKipcclxuICAgKiDmiKrlm75cclxuICAgKiBAcGFyYW0gZG9tIOimgeaIquWbvueahERPTeWFg+e0oFxyXG4gICAqIEBwYXJhbSBvcHRpb25zIOaIquWbvumFjee9rlxyXG4gICAqIEBwYXJhbSBvcHRpb25zLnR5cGUg6L6T5Ye65Zu+54mH55qE57G75Z6L77yM5Y+v6YCJ5YC877yaJ2NhbnZhcycgfCAnYmFzZTY0JyB8ICdibG9iJ++8jOm7mOiupOWAvO+8midjYW52YXMnXHJcbiAgICogQHBhcmFtIG9wdGlvbnMuc2NhbGUg6L6T5Ye65Zu+54mH55qE57yp5pS+5q+U5L6L77yM5YC86LaK5aSn5riF5pmw5bqm6LaK6auY77yM6buY6K6k5YC877yaMVxyXG4gICAqIEBwYXJhbSBvcHRpb25zLmJhY2tncm91bmRDb2xvciDovpPlh7rlm77niYfnmoTog4zmma/popzoibLvvIzpu5jorqTlgLzvvJond2hpdGUnXHJcbiAgICogQHJldHVybnMg5qC55o2udHlwZei/lOWbnuS4jeWQjOexu+Wei++8mlxyXG4gICAqICAgICAgICAgIC0gJ2NhbnZhcyc6IOi/lOWbniBIVE1MQ2FudmFzRWxlbWVudFxyXG4gICAqICAgICAgICAgIC0gJ2Jhc2U2NCc6IOi/lOWbniBiYXNlNjQg5a2X56ym5LiyXHJcbiAgICogICAgICAgICAgLSAnYmxvYic6IOi/lOWbniBCbG9iIOWvueixoVxyXG4gICAqL1xyXG4gIGFzeW5jIGh0bWwyY2FudmFzKGRvbTogSFRNTEVsZW1lbnQsIG9wdGlvbnM/OiBOY0h0bWwyY2FudmFzT3B0aW9ucykge1xyXG4gICAgcmV0dXJuIG5ldyBQcm9taXNlPGFueT4oYXN5bmMgKHJlc29sdmUsIHJlamVjdCkgPT4ge1xyXG4gICAgICAvLyDmiYvliqjliJvlu7rkuIDkuKogY2FudmFzIOagh+etvlxyXG4gICAgICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KFwiY2FudmFzXCIpXHJcbiAgICAgIC8v5bGP5bmV57yp5pS+5q+UXHJcbiAgICAgIGNvbnN0IHNjcmVlblNjYWxlID0gdGhpcy5nZXRTY3JlZW5TY2FsZSgpO1xyXG4gICAgICAvLyDojrflj5bniLbnuqfnmoTlrr3pq5hcclxuICAgICAgY29uc3Qgd2lkdGggPSBwYXJzZUludCh3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShkb20pLndpZHRoKSAqIHNjcmVlblNjYWxlO1xyXG4gICAgICBjb25zdCBoZWlnaHQgPSBwYXJzZUludCh3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShkb20pLmhlaWdodCkgKiBzY3JlZW5TY2FsZTtcclxuICAgICAgLy/nlLvluIPnvKnmlL7mr5TkvotcclxuICAgICAgY29uc3QgYmFzZVNjYWxlID0gb3B0aW9ucz8uc2NhbGUgfHwgMTtcclxuICAgICAgLy/nlLvluIPlrp7pmYXlrr3pq5jvvIjlg4/ntKDvvIlcclxuICAgICAgY2FudmFzLndpZHRoID0gd2lkdGggKiBiYXNlU2NhbGU7XHJcbiAgICAgIGNhbnZhcy5oZWlnaHQgPSBoZWlnaHQgKiBiYXNlU2NhbGU7XHJcbiAgICAgIC8v55Sf5oiQ55S756yUXHJcbiAgICAgIGNvbnN0IGN0eDogYW55ID0gY2FudmFzLmdldENvbnRleHQoXCIyZFwiKTtcclxuICAgICAgLy/orr7nva7nu5jlm77kuIrkuIvmlofnmoTnvKnmlL7mr5TkvovvvIznoa7kv53nu5jliLbnmoTlhoXlrrnkuI4gY2FudmFzIOeahOWunumZheWwuuWvuOWMuemFjeOAglxyXG4gICAgICBjdHguc2NhbGUoYmFzZVNjYWxlLCBiYXNlU2NhbGUpO1xyXG4gICAgICAvL+eUu+W4g+WcqOmhtemdouS4iuaYvuekuueahOWuvemrmFxyXG4gICAgICBjYW52YXMuc3R5bGUud2lkdGggPSB3aWR0aCArICdweCc7XHJcbiAgICAgIGNhbnZhcy5zdHlsZS5oZWlnaHQgPSBoZWlnaHQgKyAncHgnO1xyXG5cclxuICAgICAgLy8g5YGH5aaCZG9t5a696auYNDAwKjQwMCxiYXNlU2NhbGU9MuaXtixjYW52YXPnmoTlrp7pmYXlrr3pq5jkuLo4MDAqODAwXHJcbiAgICAgIC8vIOS9huaYr+i/lOWbnueahGNhbnZhc+eahHN0eWxl5a696auY5Li6NDAwKjQwMFxyXG4gICAgICAvLyDov5nmoLflj6/ku6Xmj5Dpq5jmuIXmmbDluqbvvIxiYXNlU2NhbGXotorlpKfvvIzmuIXmmbDluqbotorpq5jvvIzmlofku7botorlpKdcclxuXHJcbiAgICAgIGNvbnN0IGNvbmZpZzogYW55ID0ge1xyXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogb3B0aW9ucz8uYmFja2dyb3VuZENvbG9yIHx8ICd3aGl0ZScsXHJcbiAgICAgICAgY2FudmFzOiBjYW52YXMsXHJcbiAgICAgICAgdXNlQ09SUzogdHJ1ZVxyXG4gICAgICB9XHJcbiAgICAgIGNvbnN0IGRhdGE6IEhUTUxDYW52YXNFbGVtZW50ID0gYXdhaXQgaHRtbDJjYW52YXMoZG9tLCBjb25maWcpO1xyXG4gICAgICBjb25zdCB0eXBlID0gb3B0aW9ucz8udHlwZSB8fCAnY2FudmFzJztcclxuICAgICAgaWYgKHR5cGUgPT0gJ2Jsb2InKSB7XHJcbiAgICAgICAgZGF0YS50b0Jsb2IoKGJsb2I6IEJsb2IgfCBudWxsKSA9PiB7XHJcbiAgICAgICAgICByZXNvbHZlKGJsb2IpO1xyXG4gICAgICAgIH0pXHJcbiAgICAgIH0gZWxzZSBpZiAodHlwZSA9PSAnYmFzZTY0Jykge1xyXG4gICAgICAgIHJlc29sdmUoZGF0YS50b0RhdGFVUkwoXCJpbWFnZS9wbmdcIikpO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHJlc29sdmUoZGF0YSk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgLy8g6I635Y+W5bGP5bmV57yp5pS+5q+U5L6L5pa55rOVXHJcbiAgcHJpdmF0ZSBnZXRTY3JlZW5TY2FsZSgpIHtcclxuICAgIHZhciBzY3JlZW5TY2FsZSA9IDE7XHJcbiAgICB2YXIgc2NyZWVuOiBhbnkgPSB3aW5kb3cuc2NyZWVuO1xyXG4gICAgdmFyIHVhID0gbmF2aWdhdG9yLnVzZXJBZ2VudC50b0xvd2VyQ2FzZSgpO1xyXG4gICAgLy/orr7lpIflg4/ntKDmr5RcclxuICAgIGlmICh3aW5kb3cuZGV2aWNlUGl4ZWxSYXRpbyAhPT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgIHNjcmVlblNjYWxlID0gd2luZG93LmRldmljZVBpeGVsUmF0aW87XHJcbiAgICAgIC8vSUUxMeS7peS4i+eJiOacrOa1j+iniOWZqFxyXG4gICAgfSBlbHNlIGlmICh1YS5pbmRleE9mKCdtc2llJykgPiAtMSkge1xyXG4gICAgICBpZiAoc2NyZWVuLmRldmljZVhEUEkgJiYgc2NyZWVuLmxvZ2ljYWxYRFBJKSB7XHJcbiAgICAgICAgc2NyZWVuU2NhbGUgPSBzY3JlZW4uZGV2aWNlWERQSSAvIHNjcmVlbi5sb2dpY2FsWERQSTtcclxuICAgICAgfVxyXG4gICAgICAvL+a1j+iniOWZqOiHqui6q+e8qeaUvlxyXG4gICAgfSBlbHNlIGlmICh3aW5kb3cub3V0ZXJXaWR0aCAhPT0gdW5kZWZpbmVkICYmIHdpbmRvdy5pbm5lcldpZHRoICE9PSB1bmRlZmluZWQpIHtcclxuICAgICAgc2NyZWVuU2NhbGUgPSB3aW5kb3cub3V0ZXJXaWR0aCAvIHdpbmRvdy5pbm5lcldpZHRoO1xyXG4gICAgfVxyXG4gICAgaWYgKHNjcmVlblNjYWxlKSB7XHJcbiAgICAgIHNjcmVlblNjYWxlID0gTWF0aC5yb3VuZChzY3JlZW5TY2FsZSAqIDEwMCkgLyAxMDA7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gc2NyZWVuU2NhbGU7XHJcbiAgfVxyXG59XHJcblxyXG4iXX0=