html2canvas

孟欣 - 前端生成图片插件

由 。_饼干妹妹 提交于 2020-01-20 08:09:57
前端生成图片功能及相关插件调研 首先丢出几个业务调研的相关插件，后续再详细介绍各个插件的坑 html2canvas https://github.com/niklasvh/html2canvas/ domtoimage https://github.com/tsayen/dom-to-image#readme rasterizehtml https://github.com/cburgmer/rasterizeHTML.js canvg https://github.com/canvg/canvg 序言： 生成图片功能调研 各插件底层逻辑最终都是调用JS原生canvas.toDataURL（）将canva转为image 展示在前端 注：可自行设置图片质量，设置个参数即可，详情看文档（清晰度） MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL Html2canvas 插件调研 star: 19.1K Html2canvas是调研的几款插件github star数最高的插件。 原理是将传入的HTML ---> canvas 再调用canvas.toDataURL转为image 问题 ： 此包问题较多，而最令人心碎的就是每个版本都有不同的坑，呈现的效果都不一样

vue项目转换成pdf文件（简单易懂）

由 老子叫甜甜 提交于 2020-01-19 06:53:47
1，添加两个模块html2canvas和jspdf （1）npm install --save html2canvas（将页面html转换成图片） （2）npm install --save jspdf（将图片生成pdf） 2，创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(‘src/components/utils/htmlToPdf.js’),内容如下 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = function () { var title = this.htmlTitle html2Canvas(document.querySelector('#pdfDom'), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let

How to calculate div height which is converted as image to fit the PDF using jsPDF & html2Canvas?

由 余生长醉 提交于 2020-01-16 02:04:48
问题 I am converting div to image by using html2canvas. I want to calculate height of the div(in px) such that it will fit on the PDF page maintaining the aspect ratio of image It should work on all window sizes(larger screens, IPAD, Desktop, laptop). I am using jsPDF for generating PDF Here is the fiddle example http://jsfiddle.net/akshay1818/ys0z984x/51/ HTML Code <div id="target"> Set div height(in px) such that it will fit on the page maintaing the aspect ratio </div> <button onclick=

How to make screenshot for block with svg elements on the site?

由 痴心易碎 提交于 2020-01-14 04:43:08
问题 I created a constructor on the site whose essence is that it adds the selected elements and their colors (elements in svg) to the background and background color chosen by the visitor (the background in png), and then you must click on the "save result" button and execute screenshot of the workspace only. I wrote this script, BUT it takes a screenshot, but only the background, and ignores selected and installed svg (they are not on the screenshot - just the background), I have some ideas why,

How to make screenshot for block with svg elements on the site?

由 梦想与她 提交于 2020-01-14 04:43:06
问题 I created a constructor on the site whose essence is that it adds the selected elements and their colors (elements in svg) to the background and background color chosen by the visitor (the background in png), and then you must click on the "save result" button and execute screenshot of the workspace only. I wrote this script, BUT it takes a screenshot, but only the background, and ignores selected and installed svg (they are not on the screenshot - just the background), I have some ideas why,

html2canvas code not working IE 11

由 梦想的初衷 提交于 2020-01-11 10:03:41
问题 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'

html2canvas code not working IE 11

由 扶醉桌前 提交于 2020-01-11 10:01:39
问题 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'

How to upload a screenshot using html2canvas?

由 泪湿孤枕 提交于 2020-01-09 03:20:28
问题 Using html2canvas how can I save a screen shot to an object? I've been exploring the demos, and see that the function to generate the screenshot is generated as follows: $(window).ready(function() { ('body').html2canvas(); }); What I've tried doing is $(window).ready(function() { canvasRecord = $('body').html2canvas(); dataURL = canvasRecord.toDataURL("image/png"); dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); upload(dataURL); }); And, I then pass it to my upload() function

html2canvas does not work with Google Maps Pan

由 两盒软妹~` 提交于 2020-01-08 17:15:32
问题 I'm using html2canvas to save my online map as an image (See the Save as Image link). I've tried it in Firefox, Chrome and Opera. It tends to work more often if you do not alter the default map. If you zoom and then pan the map, it is less likely to work. The map will pan, but html2canvas will use the old center point and map bounds. And html2canvas will fail to load map tiles for the new map bounds. The map pans correctly, but html2canvas uses the old center point and map bounds. Why is this

Return canvas (image) in openlayers 4

由 筅森魡賤 提交于 2020-01-07 03:56:12
问题 the example shows how to bind a button click event to the canvas and then it returns the image Example. How can I change it, that when I use a call openlayers with a permalink, that it automatically returns me that image? I would like to use a simple get request from an c++ programm to get the image. I have the e.g. "#map=12/1085115.28/6035092.46/0" as parsing parameters. Any ideas? Thanks and Greetings Melina So far I have the parameter parsing <!DOCTYPE html> <html> <head> <title
订阅 html2canvas