使用html2canvas js 截取网页图片下载

最新推荐文章于 2024-07-02 10:13:04 发布

weixin_30781107

最新推荐文章于 2024-07-02 10:13:04 发布

阅读量380

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jeff151013/p/11158968.html

版权

1.前台使用html2canvas js 截取Div元素转存为图片，下载。效果：

2.前台代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   <meta charset="utf-8" />
    <script src="Html2canvas_JS/html2canvas.min.js"></script>
    <script src="Html2canvas_JS/canvas2image.js"></script>
</head>
<body>
<div id="div1" style="width: 200px; height: 450px; border: silver 1px solid; ">
    <img src="Images/imgDemo.jpg" style="width: 160px; height: 160px; margin-left: 20px; margin-right: 20px; margin-top: 40px;"/>
    <label style="text-align: center;display:block"><b>王二小</b><br/></label>
    <label style="text-align: center;display:block">王二小喜欢放牛<br/></label>
    <div align="center">
        王二小喜欢放牛,<br />
        王二小喜欢放牛,<br />
        王二小喜欢放牛,<br />
        王二小喜欢放牛 <br />
    </div>
</div>

<div id="img" style="display: none; width: 200px; height: 450px; position: absolute; top: 8px; left: 216px;"></div>
<button id="btnCreateImg">生成图片</button>
<button id="btnSaveImg">下载图片</button>
</body>
<script type="text/javascript">
    var content = document.getElementById("div1");
    var btn = document.getElementById("btnCreateImg");
    btn.onclick = function() {
        html2canvas(content, {
            useCORS: true, //允许跨域
            onrendered:function(canvas) {
                canvas.setAttribute("id", "thecanvas");
                document.getElementById("img").innerHTML = "";
                document.getElementById("img").appendChild(canvas);
            }
        });
        window.alert('生成图片成功');
    };

    var btnDownload = document.getElementById("btnSaveImg");
    btnDownload.onclick = function () {
        var timestamp = Date.parse(new Date());
        var fileName = timestamp + ".PNG";

        var oCanvas = document.getElementById("thecanvas");
        var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute("src");

        //下载保存
        saveFile(img_data1, fileName);

        //此种方法将直接下载文件，但是不带有图片后缀名
        //Canvas2Image.saveAsPNG(oCanvas);

        window.alert('下载完成');
    };

    var saveFile = function (data, fileName) {
        var link = document.createElement('a');
        link.href = data;
        link.download = fileName;
        link.title = "";

        var event = document.createEvent("MouseEvents");
        event.initEvent("click", true, true);
        link.dispatchEvent(event);
    };
</script>
</html>

3.需要的js文件：

canvas2image.js

html2canvas.min.js

图片：

转载于:https://www.cnblogs.com/jeff151013/p/11158968.html

weixin_30781107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用html2canvas js 截取网页图片下载

1.前台使用html2canvas js 截取Div元素转存为图片，下载。效果：2.前台代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title&g...
复制链接

扫一扫