生成一个div的图像并保存为
我想创建一个输入按钮"保存映像": 拍摄Div的屏幕截图 要求在用户的计算机上"保存为" 我找到了如何使用HTML2Canvas创建潜水屏幕并在新标签中打开它,它可以完美地工作: function printDiv2(div) { html2canvas((div), { onrendered: function(canvas) { var img = canvas.toDataURL(); window.open(img); } }); } 但对于您保存的一部分,这是一个艰难的部分...我发现了有趣的话题,因为我是新的JS(和对象)编码,我有点困惑...我想我必须使用filesaver.js并创建一个新的blob http://eligrey.com/blog/post/saving-generated-files - 在客户端/ ,但我没有如何在我的html2ca
4 2024-04-01
编程技术问答社区
html2canvas缺少背景
我正在使用HTML2Canvas从我的HTML页面生成图像. 当我输入我的URL时 http://prompter.rareaps.org/prompt/prompt/prompt/prompt/prompt-save2.php ?p = 123 在html2canvas的网页渲染器中( a>)我的页面用背景呈现. 但是当我生成自己的画布时,我没有背景.这是我的代码 $( document ).ready(function() { html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { window.location.href = canvas.toDataURL('image/jpeg');
4 2024-03-27
编程技术问答社区
iFrame没有出现在屏幕截图中-HTML2Canvas
我已经尝试了很多次使用HTML2Canvas捕获iFrame进入屏幕截图.但是不要来,除了iframe,一切都来了. 我有一个带Bootstrap菜单和简单iframe的网页.我想在按钮上进行全页屏幕. 我可以知道我在代码实现中缺少哪个步骤. $("#btnCapture").on("click", function () { captureAndUpload(); }); function captureAndUpload() { html2canvas(document.body, { onrendered: function (canvas) { $.ajax(
4 2024-03-14
编程技术问答社区
如何在jquery中把html2canvas图像保存到系统文件夹中
我在此表格中有一个带有id =" form1"的表单. $(document).ready(function () { $('#add_button').click(function () { alert("hiii"); $('form1').html2canvas(); var queue = html2canvas.Parse(); var canvas = html2canvas.Renderer(queue, { elements: { length: 1} }); var img = canvas.toDataURL(); window.open(img); alert("Hello"
2 2024-03-09
编程技术问答社区
Esri代理的Angular 7项目的截图
我的团队目前正在使用Angular 7前端和.NET Core 2.1后端进行Web应用程序.我需要做的任务之一是捕获屏幕截图并将其附加到电子邮件中. Web应用程序具有ESRI-MAP. 为了捕获屏幕截图,我正在使用HTML2Canvas软件包.除了没有捕获ESRI地图内容的部分外,它的工作原理.它捕获了除ESRI-MAP以外的所有其他内容. 对于HTML2Canvas函数调用,我将允许属性和USECORS属性设置为true.我进行了一些进一步的研究,并遇到了HTML2Canvas的代理属性.这让我想,这可能是没有生成地图的原因.我似乎找不到有关如何为Arcgis建立代理的任何明确指示.我想知道是否有人可以帮助我. 任何方向或帮助将不胜感激. 摘要之后是我的HTML2Canvas呼叫. html2canvas html2canvas(document.getElementById('mapContainer'), { useCORS: true, logging: t
2 2024-03-03
编程技术问答社区
使用html2canvas,ReactJS元素不能正确转换为canvas?
我已经构建了一个模因生成器应用程序 - 我的应用程序image 我正在使用html2canvas将我的模因图像,顶部文本和底部文本转换为画布,然后我可以下载画布. 下载.js import html2canvas from "html2canvas"; const download = async (capturedData) => { console.log(capturedData); //example- this line of code gives below commented data in console /* world Hello
6 2024-03-02
编程技术问答社区
使用html2canvas将html与highcharts图形转换为图像
我想将HTML页面转换为图像,当我使用以下代码时,我得到的结果与我期望的不太匹配. html2canvas($("#sharedOne"), { onrendered: function (canvas) { console.log("canvas",canvas) var imgsrc = canvas.toDataURL("image/png"); console.log(imgsrc); } }); 这是HTML 的屏幕截图 这是运行上述代码结果的屏幕截图. 当我使用下面的代码时,我会收到一个错误: var canvas = document.getElementById('sharedOne'); console.log("CSSSS",canvas) var t = canvas.toDataURL("image/png"); consol
4 2024-02-24
编程技术问答社区
将SVG转换为PNG格式的图像
我正在使用html2canvas和canvg插件将角度NVD3图表转换为SVG,但是当我将饼图转换为png时,我看起来与图表相同,但是当我转换界限图或区域图表时,它的背景会变成黑色,而某个圆圈却淹没在上面图像. 我的代码是 var svgElements = $("#container").find('svg'); //replace all svgs with a temp canvas svgElements.each(function () { var canvas, xml; // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element. $.each($
38 2024-02-23
编程技术问答社区
html2Canvas/jsPDF仅将视口中的数据转换为pdf?
我正在尝试使用 我已写下以下代码,将同意表格转换为PDF,然后在单独的屏幕中显示. let htmlGrid = document.getElementById('customContent'); const options = {background: "white", height: htmlGrid.clientHeight, width: htmlGrid.clientWidth}; html2canvas(htmlGrid, options).then((canvas) => { let doc = new jsPDF("p", "mm", "a4"); let imgData = canvas.toDataURL("image/PNG"); //Add image Canvas to PDF doc.addImage(imgData, 'PNG', 0, 0); let pdfData = doc.output('datauristring'); 但是,问题在
14 2024-02-22
编程技术问答社区
在第2页的第1页上获取图像 pdf
我正在用HTML2Canvas和带有Angular4的JSPDF创建图像.我想将此图像放在2页生成的PDF的第1页上. ,但似乎这条线, doc.save('test.pdf'); 需要在htm2canvas()之后就在功能内部.因为如果我将其放在此外,它将不会在PDF中包含图像. generatePDF(){ var doc = new jsPDF(); doc.text(50,90,this.problems.length.toString()); doc.text(50,100,'page 1') doc.addPage(); doc.text(50,100,'page 2') html2canvas(document.getElementById('graph')).then(function(canvas) { var img = canvas.toDataURL("
8 2024-02-21
编程技术问答社区
使用angular4下载pdf格式的网页
我是Angular 4的新手.我需要以PDF格式下载HTML网页,而HTML网页包含Angular控件,例如Input [(ngmodel)] ,无线电按钮 [检查] [检查] . 与其显示控制值,它显示 pdf文件中的未定义. 我尝试使用 jspdf&html2pdf ,但它引发了错误 错误: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js at Object.jsPDFAPI.addHTML (jspdf.debug.js?6964:4049) TS文件的代码: import { Component, ViewChild, Compiler, ComponentRef, OnInit, EventEmitter, ElementRef } from "@angular/core";
2 2024-02-21
编程技术问答社区
如何在angular 4中使用addHTML
我正在尝试在Angular中使用JSPDF库的AddHTML函数,并且已经安装了HTML2Canvas,但出现了错误. 这是我的demo.component.ts文件. import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import * as jsPDF from 'jspdf'; import * as html2canvas from "html2canvas"; @Component({ selector: 'app-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.scss'] }) export class DemoComponent implements OnInit { @ViewChild('content') content:ElementRef; co
14 2024-02-21
编程技术问答社区
PDF不显示图像:html2pdf库
我使用Angular 5和HTML2PDF库来帮助创建PDF文件. https://github.com/ekoopmans/html2pdf 这用于我的角度方法. var element = document.getElementById('document'); var opt = { margin: [10, 0, 10, 0], filename: `document.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true }, jsPDF: { unit: 'mm', format: 'letter', orientation: 'portrait' } }; html2pdf().from(element).set(opt).save(); 导出PDF后,我无
6 2024-02-21
编程技术问答社区
angular 4中的html2canvas
我能够使用Angular 4中的HTML2Canvas进行屏幕截图,但我需要使用HTTP Post Call call 将字符串图像发送到服务器端 组件 在 import { Component, OnInit, NgZone } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; import { EventsEmitter } from '../../assets/scripts/services/eventsEmitter'; import { WindowRef } from '../../assets/scripts/services/window'; import { ImagesService } from '../images/images.component.service'; import { DomSanitizer
8 2024-02-21
编程技术问答社区
JSPDF/HTML2Canvas丢失空间和错位文本
我正在使用使用HTML2Canvas和JSPDF生成PDF客户端.无论我选择哪种设置,我都会丢失字母空间,因为html中的文物丢失了pdf渲染. 是否有修复此问题的设置?我已经浏览了API,并改变了我无法想到的所有可能的设置. 显示空间损失的图像 之前(浏览器中的html): (pdf)之后: 代码 代码正在使用HTML2Canvas和JSPDF. async pdfOrder() { const doc = new jsPDF({ orientation: "p", unit: "mm", format: "a4", precision: 5 }); const options = { background: "white", scale: 3 }; for (let i = 0; i
14 2024-02-20
编程技术问答社区
使用angular2/typescript渲染带有css样式的PDF文档的html2canvas
如何使用Angular2 使用HTML2Canvas生成输出文件PDF 我尝试导入文件html2canvas tyscript,并做出这样的声明以使用它 declare let html2canvas: Html2CanvasStatic; 但我得到的HTML2Canvas未定义 html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); 我在github 如何将其用于我的应用程序Angular2 解决方案 我可以使用html2canvas进行以下更改: package.json: "dependencies": { "html2canvas": "0.5.0-beta4", "@types/html2canvas": "0.5.32", } 使用npm ins
10 2024-02-20
编程技术问答社区
Angular2-使用jspdf从HTML生成pdf
对于我正在从事的项目,我需要能够生成用户当前打开的页面的PDF,我将使用jspdf.由于我有一个HTML我需要使用pdf生成pdf,因此我需要addHTML()函数.关于这个话题很多,说 您要么需要使用html2canvas或rasterizehtml. 我选择使用html2canvas.这就是我的代码目前的样子: import { Injectable, ElementRef, ViewChild } from '@angular/core'; import * as jsPDF from 'jspdf'; import * as d3 from 'd3'; import * as html2canvas from 'html2canvas'; @Injectable () export class pdfGeneratorService { @ViewChild('to-pdf') element: ElementRef; GeneratePDF ()
18 2024-02-20
编程技术问答社区