html2canvas

html2canvas to render document PDF with css styling using angular2/typescript

由 眉间皱痕 提交于 2019-11-29 18:35:57
问题 How to generate an output file PDF using html2canvas with angular2 I tried to import the file html2canvas typescript and made a declaration like this to use it declare let html2canvas: Html2CanvasStatic; but I get html2canvas is not defined html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); I found this file typescript on github html2canvas typescript how can use this for my application angular2 回答1: I could use html2canvas with the followings

jsPdf using html2canvas.js for export pdf from html is not working for large data

由 我怕爱的太早我们不能终老 提交于 2019-11-29 17:19:35
Hi I am using jsPdf for making pdf of html content, it is going fine for short content and creating pdf , but when I am trying to use it on large content with html2canvas.js (for rendering css), it is not creating pdf. Any suggestions or sample code for this would be helpful.Thank you. It is possible to create pdf for large files. There are primarily two ways to do this : 1. html -> canvas -> image -> pdf (I assume you are trying this approach) 2. html -> pdf (does not work if html contains svg) I would suggest you to go for (2) unless you have a good reason to go for (1) (like if you are have

html2canvas error: Uncaught Error: IndexSizeError: DOM Exception 1

由 这一生的挚爱 提交于 2019-11-29 10:10:50
I am using html2canvas to convert a div on a canvas. Like this: <script src="js/libs/jquery-1.7.1.min.js"></script> <script src="js/libs/jquery-ui-1.8.17.custom.min.js"></script> <script src="js/html2canvas/html2canvas.js"></script> ... <body id="body"> <div id="demo"> ... </div> </body> <script> $('#demo').html2canvas({ onrendered: function( canvas ) { var img = canvas.toDataURL() window.open(img); } }); </script> and I get this error: "Uncaught Error: IndexSizeError: DOM Exception 1" in html2canvas.js: ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds

html2canvas以及domtoimage的使用踩坑总结

由 十年热恋 提交于 2019-11-29 09:58:40
前言 首先做个自我介绍，我是成都某企业的一名刚刚入行约一年的前端，在之前的开发过程中，遇到了问题，也解决了问题，但是在下一次解决相同问题的时候，只对这个问题有一丝丝的印象，还需要从新去查找，于是，我注册了segmemtfault，便于搜集我的问题总结，以及将踩坑经验分享给每一个开发人员，好了，闲话不多说。 需求 需求：要求能够实现根据后端返回的数据生成一张image，便于用户将图片分享到朋友或者朋友圈，取得用户的关注。 开始踩坑 一.html2canvas对于跨域图片，转换的时候会将跨域图片识别为空白。 问题分析： 既然是由于跨域引起的问题，那我们让资源不跨域不就可以访问了吗？ 解决办法： 将图片放置服务器，通过nginx进行代理资源，前端访问图片便不涉及到跨域问题。 二.html2canvas动态加载内容，通过canvas转换出来的数据，图片为空 问题分析： 内容是动态加载进来的，转换肯定是在请求完毕之后再去转换，但是在请求完毕之后去转换，按理说所需要的所有数据都已经到达前端，应该可以转换，经过思考，发现图片内容从后台读取需要一定时间去解析，才能够完整的将图片资源展示出来，html2canvas是将页面上显示的dom元素，经过解析将dom画在canvas上在转换为image图片格式。 解决办法： 1.让html2canvas转换代码等待一定时间，在进行转换操作，可进行转换

how to capture screenshot in html using js or jquery [duplicate]

由 点点圈 提交于 2019-11-29 09:33:00
问题 This question already has an answer here: Using HTML5/Canvas/JavaScript to take in-browser screenshots 4 answers How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD) [duplicate] 2 answers I'm need my clients be able to capture screenshot of any page of my website using button like this: <button>Take screenshot</button> I tried to use html2canvas but it's doesn't work properly for me because i have iframe's in my website and it's cause some session

HTML2Canvas converting overflowed content to image

由 烈酒焚心 提交于 2019-11-29 03:04:36
问题 I have a div which is pretty overflowed. It basically includes a big organization chart. What I want to do is exporting whole content of div rather than visible part with html2canvas library but I couldn't achieve it so far. Following piece of code doesn't render full content. Is there a way to achieve it? function export(){ html2canvas( [ document.getElementById('diagram') ], { onrendered: function(canvas) { var dataUrl = canvas.toDataURL(); window.open(dataUrl, "toDataURL() image", "width

图片下载

由 て烟熏妆下的殇ゞ 提交于 2019-11-28 19:52:29
图片下载 图片源需要允许跨域 getUrlBase64 = (url,name)=> { var img = url; var image = new Image(); var _t = this; image.crossOrigin = '*'//设置img.crossOrigin image.src = img; image.onload = function () { var base64 = _t.getBase64Image(image); const a = document.createElement('a')//创建a标签下载 a.download = name a.style.display = 'none' a.href = base64 document.body.appendChild(a) a.click() a.remove() window.URL.revokeObjectURL(base64) } } getBase64Image=(img)=> { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage

Arabic Encoding with html2canvas

由 元气小坏坏 提交于 2019-11-28 12:13:38
I am using html2canvas to take an image of a div, the content is from the same page, same domain, but it shows the Arabic letters disconnected, it seems that html2canvas doesn't support Arabic. While I am reading the available details about it on its webpage, I didn't find any useful information. Here is the simple code I used: $("#import").click(function(){ // send the contents of the email :) html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); }, letterRendering:true }); }); any clue? i thought of trying some code manipulation & It unblivably worked

Using html2Canvas with HighCharts

由 [亡魂溺海] 提交于 2019-11-28 04:11:06
问题 I want to use html2canvas discussed at http://html2canvas.hertzen.com/documentation.html to convert the html content to image. However I am not getting image of HighCharts properly. On IE10 It renders blank image and on Chrome it renders a part of it. Is it possible to use html2canvas for this purpose. 回答1: Highcharts uses svg to draw charts. You will need to use canvg library for drawing this svg to a temporary canvas and then remove that canvas once you take the screenshot using html2canvas

vue+jspdf+html2canvas导出PDF文件，并将字体放大

由 大憨熊 提交于 2019-11-28 00:13:55
今天开始实现日结单这个功能，日结单是允许打印的，所以我们需要将日结单以PDF的形式导出，我做的是Vue单页应用，于是查找了一番Vue如何导出PDF，看了几篇博客，实现了PDF的导出。主要实现思路是通过html2canvas和jspdf这两个模块，先将页面转换成图片，再将图片放入PDF文件中。 一、首先添加两个模块： cnpm install html2canvas --save cnpm install jspdf --save 二、定义全局函数..创建一个htmlToPdf.js文件在指定位置，比如你可以放在('@/components/utils/htmlToPdf')，该文件内容如下 // 导出页面为PDF格式 import html2canvas from "html2canvas" import JSPDF from "jspdf" export default { install(Vue, options) { Vue.prototype.ExportSavePdf = function(htmlTitle, currentTime) { var element = document.getElementById("pdfCentent") html2canvas(element, { logging: false }).then(function(canvas) {
订阅 html2canvas