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 输出图片的类型，NcImageType，可选值：'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 []; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHRtbDJjYW52YXMuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvaHRtbDJjYW52YXMtc2VydmljZS9odG1sMmNhbnZhcy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sV0FBVyxNQUFNLGFBQWEsQ0FBQzs7QUFXdEMsTUFBTSxPQUFPLG9CQUFvQjtJQUUvQixnQkFBZ0IsQ0FBQztJQUVqQjs7Ozs7Ozs7Ozs7T0FXRztJQUNHLFdBQVcsQ0FBQyxHQUFnQixFQUFFLE9BQThCOztZQUNoRSxPQUFPLElBQUksT0FBTyxDQUFNLENBQU8sT0FBTyxFQUFFLE1BQU0sRUFBRSxFQUFFO2dCQUNoRCxtQkFBbUI7Z0JBQ25CLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUE7Z0JBQy9DLE9BQU87Z0JBQ1AsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO2dCQUMxQyxVQUFVO2dCQUNWLE1BQU0sS0FBSyxHQUFHLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxXQUFXLENBQUM7Z0JBQ2xFLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxNQUFNLENBQUMsR0FBRyxXQUFXLENBQUM7Z0JBQ3BFLFFBQVE7Z0JBQ1IsTUFBTSxTQUFTLEdBQUcsQ0FBQSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsS0FBSyxLQUFJLENBQUMsQ0FBQztnQkFDdEMsWUFBWTtnQkFDWixNQUFNLENBQUMsS0FBSyxHQUFHLEtBQUssR0FBRyxTQUFTLENBQUM7Z0JBQ2pDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTSxHQUFHLFNBQVMsQ0FBQztnQkFDbkMsTUFBTTtnQkFDTixNQUFNLEdBQUcsR0FBUSxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUN6Qyx1Q0FBdUM7Z0JBQ3ZDLEdBQUcsQ0FBQyxLQUFLLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO2dCQUNoQyxhQUFhO2dCQUNiLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUM7Z0JBQ2xDLE1BQU0sQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLE1BQU0sR0FBRyxJQUFJLENBQUM7Z0JBRXBDLGtEQUFrRDtnQkFDbEQsOEJBQThCO2dCQUM5QixtQ0FBbUM7Z0JBRW5DLE1BQU0sTUFBTSxHQUFRO29CQUNsQixlQUFlLEVBQUUsQ0FBQSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsZUFBZSxLQUFJLE9BQU87b0JBQ3BELE1BQU0sRUFBRSxNQUFNO29CQUNkLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUE7Z0JBQ0QsTUFBTSxJQUFJLEdBQXNCLE1BQU0sV0FBVyxDQUFDLEdBQUcsRUFBRSxNQUFNLENBQUMsQ0FBQztnQkFDL0QsTUFBTSxJQUFJLEdBQUcsQ0FBQSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsSUFBSSxLQUFJLFFBQVEsQ0FBQztnQkFDdkMsSUFBSSxJQUFJLElBQUksTUFBTSxFQUFFO29CQUNsQixJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsSUFBaUIsRUFBRSxFQUFFO3dCQUNoQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7b0JBQ2hCLENBQUMsQ0FBQyxDQUFBO2lCQUNIO3FCQUFNLElBQUksSUFBSSxJQUFJLFFBQVEsRUFBRTtvQkFDM0IsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztpQkFDdEM7cUJBQU07b0JBQ0wsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO2lCQUNmO1lBQ0gsQ0FBQyxDQUFBLENBQUMsQ0FBQztRQUNMLENBQUM7S0FBQTtJQUVELGFBQWE7SUFDTCxjQUFjO1FBQ3BCLElBQUksV0FBVyxHQUFHLENBQUMsQ0FBQztRQUNwQixJQUFJLE1BQU0sR0FBUSxNQUFNLENBQUMsTUFBTSxDQUFDO1FBQ2hDLElBQUksRUFBRSxHQUFHLFNBQVMsQ0FBQyxTQUFTLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDM0MsT0FBTztRQUNQLElBQUksTUFBTSxDQUFDLGdCQUFnQixLQUFLLFNBQVMsRUFBRTtZQUN6QyxXQUFXLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDO1lBQ3RDLGFBQWE7U0FDZDthQUFNLElBQUksRUFBRSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRTtZQUNsQyxJQUFJLE1BQU0sQ0FBQyxVQUFVLElBQUksTUFBTSxDQUFDLFdBQVcsRUFBRTtnQkFDM0MsV0FBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQzthQUN0RDtZQUNELFNBQVM7U0FDVjthQUFNLElBQUksTUFBTSxDQUFDLFVBQVUsS0FBSyxTQUFTLElBQUksTUFBTSxDQUFDLFVBQVUsS0FBSyxTQUFTLEVBQUU7WUFDN0UsV0FBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQztTQUNyRDtRQUNELElBQUksV0FBVyxFQUFFO1lBQ2YsV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsQ0FBQztTQUNuRDtRQUNELE9BQU8sV0FBVyxDQUFDO0lBQ3JCLENBQUM7O2lIQWxGVSxvQkFBb0I7cUhBQXBCLG9CQUFvQjsyRkFBcEIsb0JBQW9CO2tCQURoQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgaHRtbDJjYW52YXMgZnJvbSBcImh0bWwyY2FudmFzXCI7XHJcblxyXG5leHBvcnQgdHlwZSBOY0ltYWdlVHlwZSA9ICdjYW52YXMnIHwgJ2Jhc2U2NCcgfCAnYmxvYic7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIE5jSHRtbDJjYW52YXNPcHRpb25zIHtcclxuICB0eXBlPzogTmNJbWFnZVR5cGU7Ly8g6L6T5Ye65Zu+54mH55qE57G75Z6LXHJcbiAgc2NhbGU/OiBudW1iZXI7Ly8g6L6T5Ye65Zu+54mH55qE57yp5pS+5q+U5L6LXHJcbiAgYmFja2dyb3VuZENvbG9yPzogc3RyaW5nOy8vIOi+k+WHuuWbvueJh+eahOiDjOaZr+minOiJslxyXG59XHJcblxyXG5ASW5qZWN0YWJsZSgpXHJcbmV4cG9ydCBjbGFzcyBOY0h0bWwyY2FudmFzU2VydmljZSB7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIC8qKlxyXG4gICAqIOaIquWbvlxyXG4gICAqIEBwYXJhbSBkb20g6KaB5oiq5Zu+55qERE9N5YWD57SgXHJcbiAgICogQHBhcmFtIG9wdGlvbnMg5oiq5Zu+6YWN572uXHJcbiAgICogQHBhcmFtIG9wdGlvbnMudHlwZSDovpPlh7rlm77niYfnmoTnsbvlnovvvIxOY0ltYWdlVHlwZe+8jOWPr+mAieWAvO+8midjYW52YXMnIHwgJ2Jhc2U2NCcgfCAnYmxvYifvvIzpu5jorqTlgLzvvJonY2FudmFzJ1xyXG4gICAqIEBwYXJhbSBvcHRpb25zLnNjYWxlIOi+k+WHuuWbvueJh+eahOe8qeaUvuavlOS+i++8jOWAvOi2iuWkp+a4heaZsOW6pui2iumrmO+8jOm7mOiupOWAvO+8mjFcclxuICAgKiBAcGFyYW0gb3B0aW9ucy5iYWNrZ3JvdW5kQ29sb3Ig6L6T5Ye65Zu+54mH55qE6IOM5pmv6aKc6Imy77yM6buY6K6k5YC877yaJ3doaXRlJ1xyXG4gICAqIEByZXR1cm5zIOagueaNrnR5cGXov5Tlm57kuI3lkIznsbvlnovvvJpcclxuICAgKiAgICAgICAgICAtICdjYW52YXMnOiDov5Tlm54gSFRNTENhbnZhc0VsZW1lbnRcclxuICAgKiAgICAgICAgICAtICdiYXNlNjQnOiDov5Tlm54gYmFzZTY0IOWtl+espuS4slxyXG4gICAqICAgICAgICAgIC0gJ2Jsb2InOiDov5Tlm54gQmxvYiDlr7nosaFcclxuICAgKi9cclxuICBhc3luYyBodG1sMmNhbnZhcyhkb206IEhUTUxFbGVtZW50LCBvcHRpb25zPzogTmNIdG1sMmNhbnZhc09wdGlvbnMpIHtcclxuICAgIHJldHVybiBuZXcgUHJvbWlzZTxhbnk+KGFzeW5jIChyZXNvbHZlLCByZWplY3QpID0+IHtcclxuICAgICAgLy8g5omL5Yqo5Yib5bu65LiA5LiqIGNhbnZhcyDmoIfnrb5cclxuICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudChcImNhbnZhc1wiKVxyXG4gICAgICAvL+Wxj+W5lee8qeaUvuavlFxyXG4gICAgICBjb25zdCBzY3JlZW5TY2FsZSA9IHRoaXMuZ2V0U2NyZWVuU2NhbGUoKTtcclxuICAgICAgLy8g6I635Y+W54i257qn55qE5a696auYXHJcbiAgICAgIGNvbnN0IHdpZHRoID0gcGFyc2VJbnQoZ2V0Q29tcHV0ZWRTdHlsZShkb20pLndpZHRoKSAqIHNjcmVlblNjYWxlO1xyXG4gICAgICBjb25zdCBoZWlnaHQgPSBwYXJzZUludChnZXRDb21wdXRlZFN0eWxlKGRvbSkuaGVpZ2h0KSAqIHNjcmVlblNjYWxlO1xyXG4gICAgICAvL+eUu+W4g+e8qeaUvuavlOS+i1xyXG4gICAgICBjb25zdCBiYXNlU2NhbGUgPSBvcHRpb25zPy5zY2FsZSB8fCAxO1xyXG4gICAgICAvL+eUu+W4g+WunumZheWuvemrmO+8iOWDj+e0oO+8iVxyXG4gICAgICBjYW52YXMud2lkdGggPSB3aWR0aCAqIGJhc2VTY2FsZTtcclxuICAgICAgY2FudmFzLmhlaWdodCA9IGhlaWdodCAqIGJhc2VTY2FsZTtcclxuICAgICAgLy/nlJ/miJDnlLvnrJRcclxuICAgICAgY29uc3QgY3R4OiBhbnkgPSBjYW52YXMuZ2V0Q29udGV4dChcIjJkXCIpO1xyXG4gICAgICAvL+iuvue9rue7mOWbvuS4iuS4i+aWh+eahOe8qeaUvuavlOS+i++8jOehruS/nee7mOWItueahOWGheWuueS4jiBjYW52YXMg55qE5a6e6ZmF5bC65a+45Yy56YWN44CCXHJcbiAgICAgIGN0eC5zY2FsZShiYXNlU2NhbGUsIGJhc2VTY2FsZSk7XHJcbiAgICAgIC8v55S75biD5Zyo6aG16Z2i5LiK5pi+56S655qE5a696auYXHJcbiAgICAgIGNhbnZhcy5zdHlsZS53aWR0aCA9IHdpZHRoICsgJ3B4JztcclxuICAgICAgY2FudmFzLnN0eWxlLmhlaWdodCA9IGhlaWdodCArICdweCc7XHJcblxyXG4gICAgICAvLyDlgYflpoJkb23lrr3pq5g0MDAqNDAwLGJhc2VTY2FsZT0y5pe2LGNhbnZhc+eahOWunumZheWuvemrmOS4ujgwMCo4MDBcclxuICAgICAgLy8g5L2G5piv6L+U5Zue55qEY2FudmFz55qEc3R5bGXlrr3pq5jkuLo0MDAqNDAwXHJcbiAgICAgIC8vIOi/meagt+WPr+S7peaPkOmrmOa4heaZsOW6pu+8jGJhc2VTY2FsZei2iuWkp++8jOa4heaZsOW6pui2iumrmO+8jOaWh+S7tui2iuWkp1xyXG5cclxuICAgICAgY29uc3QgY29uZmlnOiBhbnkgPSB7XHJcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBvcHRpb25zPy5iYWNrZ3JvdW5kQ29sb3IgfHwgJ3doaXRlJyxcclxuICAgICAgICBjYW52YXM6IGNhbnZhcyxcclxuICAgICAgICB1c2VDT1JTOiB0cnVlXHJcbiAgICAgIH1cclxuICAgICAgY29uc3QgZGF0YTogSFRNTENhbnZhc0VsZW1lbnQgPSBhd2FpdCBodG1sMmNhbnZhcyhkb20sIGNvbmZpZyk7XHJcbiAgICAgIGNvbnN0IHR5cGUgPSBvcHRpb25zPy50eXBlIHx8ICdjYW52YXMnO1xyXG4gICAgICBpZiAodHlwZSA9PSAnYmxvYicpIHtcclxuICAgICAgICBkYXRhLnRvQmxvYigoYmxvYjogQmxvYiB8IG51bGwpID0+IHtcclxuICAgICAgICAgIHJlc29sdmUoYmxvYik7XHJcbiAgICAgICAgfSlcclxuICAgICAgfSBlbHNlIGlmICh0eXBlID09ICdiYXNlNjQnKSB7XHJcbiAgICAgICAgcmVzb2x2ZShkYXRhLnRvRGF0YVVSTChcImltYWdlL3BuZ1wiKSk7XHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgcmVzb2x2ZShkYXRhKTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICAvLyDojrflj5blsY/luZXnvKnmlL7mr5Tkvovmlrnms5VcclxuICBwcml2YXRlIGdldFNjcmVlblNjYWxlKCkge1xyXG4gICAgdmFyIHNjcmVlblNjYWxlID0gMTtcclxuICAgIHZhciBzY3JlZW46IGFueSA9IHdpbmRvdy5zY3JlZW47XHJcbiAgICB2YXIgdWEgPSBuYXZpZ2F0b3IudXNlckFnZW50LnRvTG93ZXJDYXNlKCk7XHJcbiAgICAvL+iuvuWkh+WDj+e0oOavlFxyXG4gICAgaWYgKHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvICE9PSB1bmRlZmluZWQpIHtcclxuICAgICAgc2NyZWVuU2NhbGUgPSB3aW5kb3cuZGV2aWNlUGl4ZWxSYXRpbztcclxuICAgICAgLy9JRTEx5Lul5LiL54mI5pys5rWP6KeI5ZmoXHJcbiAgICB9IGVsc2UgaWYgKHVhLmluZGV4T2YoJ21zaWUnKSA+IC0xKSB7XHJcbiAgICAgIGlmIChzY3JlZW4uZGV2aWNlWERQSSAmJiBzY3JlZW4ubG9naWNhbFhEUEkpIHtcclxuICAgICAgICBzY3JlZW5TY2FsZSA9IHNjcmVlbi5kZXZpY2VYRFBJIC8gc2NyZWVuLmxvZ2ljYWxYRFBJO1xyXG4gICAgICB9XHJcbiAgICAgIC8v5rWP6KeI5Zmo6Ieq6Lqr57yp5pS+XHJcbiAgICB9IGVsc2UgaWYgKHdpbmRvdy5vdXRlcldpZHRoICE9PSB1bmRlZmluZWQgJiYgd2luZG93LmlubmVyV2lkdGggIT09IHVuZGVmaW5lZCkge1xyXG4gICAgICBzY3JlZW5TY2FsZSA9IHdpbmRvdy5vdXRlcldpZHRoIC8gd2luZG93LmlubmVyV2lkdGg7XHJcbiAgICB9XHJcbiAgICBpZiAoc2NyZWVuU2NhbGUpIHtcclxuICAgICAgc2NyZWVuU2NhbGUgPSBNYXRoLnJvdW5kKHNjcmVlblNjYWxlICogMTAwKSAvIDEwMDtcclxuICAgIH1cclxuICAgIHJldHVybiBzY3JlZW5TY2FsZTtcclxuICB9XHJcbn1cclxuXHJcbiJdfQ==