2022-06-15 来源：华纳网 责任编辑：谷雨 人气：
核心提示：知识点： 在H5将网页内容直接生成图片

知识点：

在H5将网页内容直接生成图片

 

本课内容：

大家好，欢迎来到谷雨课堂，

 

用程序生成图片，

包括用H5直接画图片，

我们已经学习并掌握了，

那么对于网页中已经存在的元素，

有没有可能实现截屏、抓图的可能呢？

用普通的方法当然是不行l，

不过，

本节我们用html2canvas可以实现这个功能，

这个JS可以把网页中的全部或部分，

在canvas里重绘出来，

来实现刚才所说的功能

 

以下是本节用到的所有源代码：

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!DOCTYPE html><html><head><title>No.21 在H5将网页内容直接生成图片</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><script src="./js/html2canvas.min.js"></script><script>function gen_img(){html2canvas(document.querySelector("#capture")).then(canvas => {document.body.appendChild(canvas)    });}   </script></head><body><div id="capture" style="padding: 10px; background: #f5da55;width:300px;border-radius: 20px;;"><img src="1.webp" style="width:100%;"><h4 style="color: #ff0000; ">谷雨课堂</h4><h4 style="color: #000; ">Hello world!</h4><h1>我是标题</h1></div><div onclick="gen_img()">生成图片</div></body></html>


其中，最重要一句就是：

  •  
  •  
  •  
  •  
html2canvas($dom).then(canvas => {        //在这里的canvas就是画布了        //怎么用都可以了    });

 

没错，

功能已经实现了。

 

扩展阅读：

 

JavaScript HTML renderer

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

 

How does it work?

The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

 

It does not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs. It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.

 

The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.

 

Browser compatibility

The library should work fine on the following browsers (with Promise polyfill):

 

Firefox 3.5+

Google Chrome

Opera 12+

IE9+

Safari 6+

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

 

Usage

The html2canvas library utilizes Promises and expects them to be available in the global context. If you wish to support older browsers that do not natively support Promises, please include a polyfill such as es6-promise before including html2canvas.

 

To render an element with html2canvas, simply call: html2canvas(element[, options]);

 

完整的源代码可以登录【华纳网】下载。

 

https://www.worldwarner.com/






 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
精彩推荐