html2canvas

Save hidden DIV as canvas image

由 感情迁移 提交于 2020-02-25 06:53:46
问题 I used the following code to save the visible as image. html2canvas(document.querySelector('.specific'), { onrendered: function(canvas) { theCanvas = canvas; Canvas2Image.saveAsPNG(canvas); } }); Is there any way that I can able to save the hidden 回答1: There are some solutions out there, like for example display property toggle, or render inside hidden element. Solution 1 Quickly toggle visibility property const el = document.querySelector('.specific'); el.style.display = "block"; // or any

js 截屏保存图片

由 坚强是说给别人听的谎言 提交于 2020-02-23 13:50:06
html2canvas.js 这个js有个强大的功能，就是能将html 对应的dom生成canvas。 这样，我们就可以通过生成的canvas转化成 base64 图片，从而实现截屏功能； 核心代码如下（同时也解决了一个bug，生成的图片不高清）： //以下乘以3是将画布和画布的内容放大3被，从而使生成的图片变清晰 var canvas = document.createElement("canvas"); canvas.height = $(window).height()*3 canvas.width = $(window).width()*3 var context = canvas.getContext("2d"); //然后将画布缩放，将图像放大两倍画到画布上 context.scale(3,3); html2canvas(document.getElementById('view'), { canvas: canvas, onrendered: function(canvas) { var _h = $(window).height()*2/3; var _w = $(window).width()*2/3; _src = canvas.toDataURL('image/png'); var img = new Image(); img.src = _src; img

前端使用html2canvas截图，在canvas上绘制图片及保存图片

由 橙三吉。 提交于 2020-02-23 10:24:31
1、使用html2canvas 存在的问题： 不同的机型绘制位置不同的问题。 这个主要因为Html动态设置了html的dpr。（dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字的问题）。 但是在绘制canvas时最好屏蔽这个属性。这个属性确定会导致html2canvas生成的canvas的尺寸不同。导致重新在此canvas里绘制图片时，在不同机型上显示的位置有出入。 使用canvas时一定要注意toDataUrl的跨域问题 2、点击保存图片 目前只有H5的，download方法。但是在手机上通用性不强。 只有和客户端交互的方式来保存图片。 3、生成2维码图片(qr_code) 4、长按保存图片（直接生成图片覆盖在Html，浏览器会自动弹出是否保存图片） 来源： https://www.cnblogs.com/qdcnbj/p/10320007.html

用html2canvas转html为图片遇到的那些问题

由 丶灬走出姿态 提交于 2020-02-21 22:54:43
1.图片跨域问题 在html转化为canvas在转化成图片地址的 时候 canvas.toDataURL("image/png") 遇到报错： Access to image at 'png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 或者 Access to image at 'www.baidu.com/GT/github/hotelAdmin/img/tempalte-top.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 报错原因 就是 图片 跨域 污染了画布，导致画布不能导出img的地址 在网上找方法 设置： useCORS: true, //（图片跨域相关） allowTaint: false, //允许跨域

html2canvas basics

由 强颜欢笑 提交于 2020-02-20 06:17:00
问题 <html> <head> <title>test</title> <script src="external/jquery-1.6.2.js"></script> <script type="text/javascript" src="js/html2canvas.js"></script> <script type="text/javascript"> $(document).ready(function() { $('body').html2canvas(); var queue = html2canvas.Parse(); var canvas = html2canvas.Renderer(queue,{elements:{length:1}}); var img = canvas.toDataURL() window.open(img); }); </script> </head> <body> <h1>Testing</h1> <img src='http://localhost:8080/test/images/1.jpg'> </body> </html>

dom元素转为图片到本地

由 吃可爱长大的小学妹 提交于 2020-02-04 00:22:40
1.场景 最近因为肺炎严重，不能到工作场地办公，所以远程在家工作。领导提出做一个捐赠页面，然后生成证书保存图片到本地，虽然最后因为企业没有权利发起社会捐赠被砍掉了，但是我还是决定写个demo练习下。 2.思路 将dom元素转为canvas，然后canvas转base64图片，通过a标签的download实现下载。 3.代码贴上 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < script src = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" > < / script > < script src = "https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js" > < / script > < title > 图片下载 < / title > < / head > <

react print

由 爷，独闯天下 提交于 2020-01-28 15:15:42
印刷しないエリアId:NonePrintDiv 印刷するエリアId:printDiv //npm install --save html2canvas import html2canvas from 'html2canvas'; //印刷ボタン処理 document.getElementById('NonePrintDiv').style.display = "none"; html2canvas(document.getElementById('printDiv')).then( (canvas) => { this.setState({ printStyle: { visibility: 'hidden' } }, () => { window.print(canvas); this.setState({ printStyle: {} }); document.getElementById('NonePrintDiv').style.display = ""; }); } ); //必要なCSSスタイル //const printTestCss = 'style/printTest.css'; //<link rel="stylesheet" type="text/css" href={printTestCss} /> <link rel="stylesheet" type=

html2canvas 网页截图 下载 上传

由 依然范特西╮ 提交于 2020-01-22 23:50:11
利用html2canvas插件 对网页截图 并下载和上传图片。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <!--此网页演示了html2canvas网页截图下载 --> <head> <!-- base.js实际上是jquery库,html2canvas.js是html2canvas自带的js库 --> <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> <script type="text/javascript" src="http://www.boolaw.com/tpl/default/js/jquery-1.8.3.min.js"></script> <title>html2canvas网页截图</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content

Generate an image of a div and Save as

由 喜欢而已 提交于 2020-01-22 09:30:29
问题 I'd like to create an input button "Save image" that : take a screen shot of a div ask to "Save as" on the user's computer I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly : function printDiv2(div) { html2canvas((div), { onrendered: function(canvas) { var img = canvas.toDataURL(); window.open(img); } }); } But for thee Save as part, is a kind of the tough part... I've found interesting topics, as I'm new in JS (and object) coding, I

Generate an image of a div and Save as

由 我们两清 提交于 2020-01-22 09:29:54
问题 I'd like to create an input button "Save image" that : take a screen shot of a div ask to "Save as" on the user's computer I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly : function printDiv2(div) { html2canvas((div), { onrendered: function(canvas) { var img = canvas.toDataURL(); window.open(img); } }); } But for thee Save as part, is a kind of the tough part... I've found interesting topics, as I'm new in JS (and object) coding, I
订阅 html2canvas