Html5怎么导出图片

Bertha 。 2021-12-22 08:21 290阅读 0赞

其实很简单，

首先需要两个js文件

[jquery.min.js][]

[html2canvas.js][]

直接上代码，几行就解决了

<a  id="example1" οnclick="exportGrid()" >导出图表</a>

//导出图表
          function exportGrid() {
    
              html2canvas($("#exportGrid"), {
                  allowTaint: true,
                  taintTest: false,
                  onrendered: function (canvas) {
                      //canvas.id = "mycanvas";
                      //document.body.appendChild(canvas);
                      //生成base64图片数据
                      var url = canvas.toDataURL();
                      //以下代码为下载此图片功能
                      var triggerDownload = $("<a>").attr("href", url).attr("download", (new Date()).getTime() + "girds.png").appendTo("body");
                      triggerDownload[0].click();
                      triggerDownload.remove();
                  }
              });
          }

解决了你的问题的话，点个赞呗

转载于:https://www.cnblogs.com/yyKong/p/10856721.html

[jquery.min.js]: http://www.jq22.com/jquery-info122
[html2canvas.js]: http://html2canvas.hertzen.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 html插入图片_html网页怎么添加图片

直接在HTML代码中使用img标签来显示图片,比如下面这个代码. 。给你解释一下路径问题images是和你的网页文件在同一个文件夹下的文件夹比如你的网页文件是abc.ht

短命女/ 2023年09月24日 03:48/ 0 赞/ 147 阅读

相关 html图片怎么显示一个转圈,如何用HTML5实现图片转圈的动画效果

如何用HTML5实现图片转圈的动画效果如何用HTML5实现图片转圈的动画效果我们大家都知道让画面动起来就会让画面显得更加的生动好看，今天小编就给大家分享一下如何用HTM

客官°小女子只卖身不卖艺/ 2022年10月12日 05:38/ 0 赞/ 186 阅读

相关 H5导出HTML文件,H5 导出文件的解决办法

FileSaver.js可以实现前端导出文件的需求。使用方法： 1.保存文件 //obj是我们想写入文件的内容。 let blob = new Blob(\[JSON

缺乏、安全感/ 2022年10月07日 15:54/ 0 赞/ 247 阅读

相关 html图片锚点怎么设定,html怎么设置锚点

![5268f80b9b1e01f982625ef6fac83ca1.png][] html设置锚点的方法：1、设置一个锚点链接“...”；2、在页面中需要的位置设置锚点；3

太过爱你忘了你带给我的痛/ 2022年10月07日 13:47/ 0 赞/ 261 阅读

相关 html背景图片css怎么添加,css样式怎么插入背景图片？

css样式怎么插入背景图片？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![4df3888e01ce34942327a39d

╰+攻爆jí腚メ/ 2022年10月06日 08:51/ 0 赞/ 238 阅读

相关 html5 在线编辑图片大小,html5画布编辑图片问题

实现思路：base64Image -> 导入canvas -> 添加水印 -> 生成base64Image Document canvas image ![e57a4c

痛定思痛。/ 2022年10月06日 00:32/ 0 赞/ 237 阅读

相关【HTML5】响应式图片

　　jq width() 、height()获取的是图片加载到页面上的图片显示尺寸（图片标签width、height属性值或max-width后的值）而非图片真实尺寸；所以虽然

谁借莪１个温暖的怀抱￠/ 2022年06月05日 08:55/ 0 赞/ 277 阅读

相关 HTML5 响应式图片

响应式图片的核心目的只写一遍代码，就能适用所有设备。（img 标签等价于 image 标签） 1、通过 srcset 切换分辨率（1）通过分辨率切换

末蓝、/ 2022年05月27日 01:52/ 0 赞/ 237 阅读

相关 Html5怎么导出图片

其实很简单，首先需要两个js文件　　[jquery.min.js][] 　　[html2canvas.js][] 　　直接上代码，几行就解决了 <a i

Bertha 。/ 2021年12月22日 08:21/ 0 赞/ 291 阅读

相关 html里图片怎么居中对齐？

图片的居中方式有很多种吧，算是html基础，下面给大家介绍几种方法。

小灰灰/ 2020年04月23日 08:46/ 0 赞/ 1067 阅读