当前位置:Gxlcms > JavaScript > JS之div模块截图并下载功能实现

JS之div模块截图并下载功能实现

时间:2021-07-01 10:21:17 帮助过:99人阅读

本文主要介绍了JS实现p模块的截图并下载功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。

首先我们需要引入2个js文件:


加入css 样式,主要是生成"X"关闭图片图标:


写入随便p 模块,我随便位置给的点击截图按钮


页面效果如下:

js代码如下:


解释说明:这里核心截图代码是

html2canvas(dom, { onrendered: function(canvas) {})方法,是插件提供的。其中:dom是你要截图的元素模块

它的作用是把这个参数canvas形成一个img图片元素。调用的是单另的convertCanvasToImage()方法,

其中: image.src = canvas.toDataURL("image/png");这句就是生成图片的地址。而这个图片就是截取的你的那个元素,有了图片地址就很好办了。我只是把它添加到id=“dw”这个元素中提供展示效果。其实做到这样就够了,但我又用canvas装了一遍。

后面给图片加载方法:onload ()在其中添加属性撒的,自动执行下载方法:区分了ie浏览器(网上找的方法),还有我直接生成的下载方法。关于下载方法很多,你们随意选。

当然自己的这个download(src)下载方法同样适用ie。因为原理很简单,就是用生成个元素自己调用方法。

相关推荐:

PHP调用ffmpeg对视频截图并拼接脚本实例分享

用网页截图API接口自动生成网页截图

html5浏览器截图的示例

以上就是JS之div模块截图并下载功能实现的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行