js实现html转图片并下载保存_js将网页保存为图片,html点击保存图片资源-CSDN下载

共6个文件

js：4个

html：1个

css：1个

html

canvas

5星 · 超过95%的资源需积分: 50 29 浏览量 2019-03-13 14:06:25 上传评论 2 收藏 167KB ZIP 举报

在JavaScript的世界里，将HTML页面转换为图片并允许用户下载保存是一种常见的需求，例如用于屏幕截图、页面预览或者数据可视化。本篇文章将详细介绍如何利用`html2canvas.js`和`canvas2image.js`这两个库来实现这个功能。 `html2canvas`是一个JavaScript库，它能够将DOM树渲染为一个Canvas元素，从而实现HTML到Canvas的转换。它的核心原理是模拟浏览器的渲染过程，将HTML元素及其样式转换为可绘制在Canvas上的内容。在实际应用中，我们首先需要引入`html2canvas`库： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> ``` 接下来，我们需要编写JavaScript代码来调用`html2canvas`，传入要转换的DOM元素： ```javascript html2canvas(document.body).then(function(canvas) { // 在这里处理canvas元素 }); ``` `html2canvas`返回一个Promise，当Promise解析时，会提供一个Canvas元素，这是HTML内容的图形表示。然后，为了将Canvas元素转换为图片，我们可以使用`canvas2image.js`库。这个库可以将Canvas转换为Blob对象，然后进一步转化为Data URL或File对象，最后可以下载保存。首先引入`canvas2image.js`： ```html <script src="canvas2image.js"></script> ``` 现在，我们可以将Canvas转换为Image，并保存到本地： ```javascript html2canvas(document.body).then(function(canvas) { var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height); img.id = "generatedImage"; document.body.appendChild(img); // 将生成的图片添加到页面 // 下载图片 var link = document.createElement('a'); link.download = 'output.png'; link.href = canvas.toDataURL("image/png"); // 获取Data URL link.click(); // 触发下载 }); ``` 在上述代码中，`convertToImage`方法将Canvas转换为Image，然后将其添加到文档中。`toDataURL`方法用于获取Canvas的内容作为Data URL，最后创建一个`<a>`标签模拟点击事件触发下载。需要注意的是，`html2canvas`并不能完美地处理所有HTML特性，比如CSS3的某些属性、Web字体、SVG等，可能会导致转换后的图片效果与原页面有差异。同时，由于同源策略的限制，跨域资源可能无法正常渲染。对于这些问题，开发者需要根据实际情况进行调整或寻找替代方案。此外，为了提高用户体验，可以考虑添加进度提示、错误处理机制，以及自定义图片质量、尺寸等参数。例如，`html2canvas`提供了配置选项来控制渲染行为： ```javascript html2canvas(document.body, { onrendered: function(canvas) { /*...*/ }, allowTaint: false, // 是否允许跨域图像污染canvas useCORS: true, // 是否尝试使用CORS加载跨域图像 imageTimeout: 5000, // 图像加载超时时间 logging: true, // 是否开启日志输出 backgroundColor: null, // 背景颜色，默认透明 scale: 2 // 缩放比例，提高画质 }).then(function(canvas) { /*...*/ }); ``` 总结，利用`html2canvas.js`和`canvas2image.js`库，可以轻松地将HTML页面转换为图片并下载保存。然而，实际应用中需要考虑到各种兼容性问题和性能优化，确保在不同的浏览器和场景下都能稳定工作。

资源推荐

资源详情

资源评论

收起资源包目录

html2image.zip （6个子文件）

html2image

index.html 6KB

Chart-2.7.3.js 393KB

canvas2image.js 8KB

jquery-3.3.1.min.js 85KB

html2canvas.min.js 162KB

css

index.css 281B

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/index.css"> </head> <body> <h2>原始HTML</h2> <div style="background:red;width: 600px;" id="container"> <div style="background:green;"> <div style="background:blue;"> <div style="background:yellow;"> <div style="background:white;"> <canvas id="myChart" width="400" height="400"></canvas> </div> </div> </div> </div> </div> <h2 id="toCanvasBtn"> <a href="javascript:void(0);">第一步：点击转成canvas </a></h2> <h2 id="toImageBtn"><a href="javascript:void(0);">第二步：点击转成图片 </a></h2> <section id="saveBox"> <h2>第三步：保存图片</h2> <h5> <label for="imgW">宽度:</label> <input type="number" value="" id="imgW" placeholder="默认是原图宽度" /> <label for="imgH">高度:</label> <input type="number" value="" id="imgH" placeholder="默认是原图高度" /> <label for="imgFileName">文件名:</label> <input type="text" placeholder="文件名" id="imgFileName" /> <select id="sel"> <option value="png">png</option> <option value="jpeg">jpeg</option> <option value="bmp">bmp</option> </select> <button id="saveImageBtn">保存</button> </h5> </section> <br><br> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/html2canvas.min.js"></script> <script src="js/canvas2image.js"></script> <script src="js/Chart-2.7.3.js"></script> <script> /** * 例子 * */ class Index { constructor(domId) { this.$container = $('#container'); //需要转换为图片的容器 this.$toCanvasBtn = $('#toCanvasBtn'); //点击转换容器为画布的元素 this.$toImageBtn = $('#toImageBtn'); //点击转换画布为图片的元素 this.$saveImageBtn = $('#saveImageBtn'); //点击转换画布为图片的元素 this.$saveBox = $('#saveBox'); //点击保存图片的容器 this.init(); //初始化 } /* 初始化 */ init() { this.createChart(); //创建图表 this.toCanvas(); //容器转图片系列功能 } /* 创建图表 */ createChart() { let ctx = document.getElementById("myChart").getContext('2d'); let myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); } /* 元素转canvas */ toCanvas() { this.$toCanvasBtn.click(e => { html2canvas(this.$container[0]).then(canvas => { this.$toCanvasBtn.after(canvas); //渲染canvas this.$toImageBtn.show(1000);//显示‘转成图片’按钮 this.toImage(canvas); }); }); } /* canvas转图片 */ toImage(canvas) { this.$toImageBtn.click( e => { let canvasWidth = canvas.width; //canvas宽度 let canvasHeight = canvas.height; //canvas高度 let img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); //调用Canvas2Image插件 this.$toImageBtn.after(img); //渲染图片 this.$saveBox.show(1000); //显示保存图片的容器 this.saveImage(canvas); //保存图片 }); } /* 保存图片 */ saveImage(canvas) { this.$saveImageBtn.click( e => { let type = $('#sel').val(); //图片类型 let w = $('#imgW').val(); //图片宽度 let h = $('#imgH').val(); //图片高度 let f = $('#imgFileName').val(); //图片文件名 w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值 h = (h === '') ? canvasHeight : h; Canvas2Image.saveAsImage(canvas, w, h, type, f); //调用Canvas2Image插件 }); } }; new Index(); </script> </body> </html>

评论收藏

内容反馈