html2canvas图片截图截屏功能,附demo地址

来源:互联网 发布:php cookie 路径 编辑:程序博客网 时间:2024/06/02 05:55

下载地址:https://github.com/ybx13579/html2Canvas-demo

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>html2canvas-demo</title>    <meta charset="utf-8" />    <style>        #gallery {            width: 200px;            height: 200px;            background: url('1.JPG') no-repeat center center;            background-size:100%;            font-size:30px;            color:#fff;            text-align:center;            /*line-height:200px;*/        }    </style></head><body>    <div id="gallery">截屏后我就归图片了</div>    <button>点我截屏</button>    <div id="box"></div></body></html><script src="js/jquery-2.1.1.min.js"></script><script src="js/html2canvas.js"></script><script>    $(document).ready(function () {        html2canvas(document.getElementById('gallery'), {             onrendered: function (canvas) {                 var canvasData = canvas.toDataURL();                 var eg = new Image();                 eg.src = canvasData;                $("button").on("click", function () {                    $box = $("#box");                    $box.prepend(eg);                })            },             // useCORS: true// 此代码针对跨域问题         });    })</script>
1 0
原创粉丝点击