html2canvas

html2canvas and toDataURL generated image has horizontal line

由 匿名 (未验证) 提交于 2019-12-03 01:00:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am looping through 10-14 html elements, and generating image data in an array for later use for insertion into a PDF. The problem is that these images occasionally have a horizontal line across them, which seems seems to be an existing issue with html2canvas. Happens mostly in FF and IE, and occationally on Chrome, but not as often. function convertElementsToImages(containerSelector) { if (_this.pdfDebug) { window.console.log('convertElementsToImages'); window.console.log(containerSelector); } var eles = $(containerSelector + ' > *'), q =

How to generate “screenshot” of html div with external images?

由 烂漫一生 提交于 2019-12-03 00:25:22
I have a HTML div with external images. (The following is an example, but in the actual case I am using Amazon S3, so downloading and storing the image on the same server is not an option) Currently I am using html2canvas to convert the div to image. However, the external image is always replaced by a blank space. The code I use to capture the image: $(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { onrendered: function(canvas) { theCanvas = canvas; document.body.appendChild(canvas); // Convert and download as image Canvas2Image.saveAsPNG(canvas); $("#img-out").append

html2canvas 实现dashed虚线边框

由 匿名 (未验证) 提交于 2019-12-02 21:53:52
html2canvas是一个将html元素生成canvas的库，绘制的canvas大部分样式和CSS一致。比如截止1.0.0-alpha.12，虚线边框依然绘制为实线，border-collapse依然有问题。 这里根据github issues里的一个思路，模拟实现了dashed边框效果。 适用情况：单独边框较多，即不是完整边框，同时不考虑border-radius 1、首先，在html2canvas绘制前，找出需要绘制canvas的元素中的所有虚线边框的 方向和位置 findDashedBorders = (page) => { const tds = page.querySelectorAll("td"); const borders = []; tds.forEach(td => { const computedStyle = window.getComputedStyle(td); const borderStyle = computedStyle.borderStyle ? computedStyle.borderStyle.split(' ') : []; const dashedIndex = findAll(borderStyle, 'dashed'); if (dashedIndex.length) { const rect = td

将页面的内容导出使用html2canvas+jsPDF

由 匿名 (未验证) 提交于 2019-12-02 20:32:16
第一首先是要引用 import jsPDF from 'jspdf' import html2canvas from 'html2canvas' import PDFJS from 'pdfjs-dist' PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js' 第二页面点击按钮 第三 //要导出的div的id var target = document.getElementById('export_content1') html2canvas(target, { dpi: 172 }).then(function(canvas) { console.log(canvas) var contentWidth = canvas.width var contentHeight = canvas.height //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89 //未生成pdf的html页面高度 var leftHeight = contentHeight //pdf页面偏移 var position = 0 //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89

'Promise' is undefined in IE [closed]

由 风格不统一 提交于 2019-12-02 17:24:55
I'm getting a 'Promise' is undefined error in IE. Why is that and how can I solve this? Add something like <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script> To <head>...</head> This will pull in an external Bluebird Promise Library, so that you will be able to use Promise on IE 来源： https://stackoverflow.com/questions/36831372/promise-is-undefined-in-ie

Download PDF is not rendering the complete list of data from ngFor using html2canvas

由 元气小坏坏 提交于 2019-12-02 08:36:52
I have the below code to download the elements in ngFor as a PDF . My html is a array list of data information rendered using ngFor . I have a downloadPDF function written which accepts the id as a parameter and loops through the array list and has to save entire loop of array data as PDF when I click on the downloadPDF button. I am not s ure why its saving only the first element from the array finalArList . I have attached the JSON response of finalArList and also the pdf file for reference. Any help on this would be really helpful . I am posting this after lot many tries.enter image

html2canvas conflict in mozila firefox

由 一笑奈何 提交于 2019-12-02 08:30:56
I am using html2canvas libary. The code takes a div and save its content as png . It works fine with opera and chrome but while i run the code in firefox it does not save the div as png. No action happens on clicking the download button in firefox. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text

Cross-origin image load denied by Cross-Origin Resource Sharing policy

由 寵の児 提交于 2019-12-02 00:34:09
I use html2canvas (from html2canvas.hertzen.com) to capture screenshot. I got this strange error like this: The code of my webpage is put on one host, say Host A. If my webpage contains an image on another host, say Host B, then I hit this error: Cross-origin image load denied by Cross-Origin Resource Sharing policy However, the confusing part is that if Host B is facebook (my image is a direct link to facebook https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/372701_100000684388457_1551561655_q.jpg ) then the error disappear. My function html2canvas([document.body], { useCORS : true,

html2canvas code not working IE 11

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-01 21:26:22
I am hoping to use the html2canvas library to make a image of one div and put it in another. So far I have it working wonderfully in Safari, Chrome, and Firefox but not IE (11 is the only version I care about right now). I am applying it using the code from this jsfiddle from another Stackoverflow question: var aaaDiv=document.getElementById('aaa'); var ttDiv=document.getElementById('tt'); html2canvas(aaaDiv).then(function(canvas) { // assign id:avatarCanvas to canvas canvas.id='avatarCanvas'; // append canvas to ttDiv ttDiv.appendChild(canvas); }); https://jsfiddle.net/m1erickson/wtchz972/ I

html2canvas and jsPDF : send generated pdf as email attachment

由 一世执手 提交于 2019-12-01 20:48:27
I have created a function to take screenshot of current webpage and save it as PDF using html2canvas and jsPDF. Following is my code for it: <script> function downloadpdf(){ html2canvas(document.body, { onrendered: function(canvas){ var imgData = canvas.toDataURL("image/jpeg"); var a = document.createElement('a'); var doc = new jsPDF('p','mm'); doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); doc.save($.now()+'.pdf'); } }); } </script> By using the above code, I am able to download the file and save it locally. But I want to directly send the generated pdf by email using php script. Following
订阅 html2canvas