【JavaScript】JS使用html2canvas，进行屏幕截图

一、主要使用html2canvas和canvas2images进行屏幕截图

<div id="chooses">
        .........
</div>

<div id="show">
    <div class="show_bg"></div>
    <div class="show_content">
        <!--<img 这里会生成图片 />-->
        <h2 style="text-align: center;">以上是生成的截图</h2>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="canvas2images.js"></script>

<script type="text/javascript">
    function takeScreenshot() {  //触发生成截图的方法，以chooses为截图区域
        var shareContent = document.getElementById('chooses');
        var width = shareContent.offsetWidth;
        var height = shareContent.offsetHeight;
        var canvas = document.createElement("canvas");
        var scale = 1;  //控制图片的大小

        canvas.width = width * scale;
        canvas.height = height * scale;
        canvas.getContext("2d").scale(scale, scale);

        var opts = {
            scale: scale,
            canvas: canvas,
            logging: true,
            width: width,
            height: height
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            var context = canvas.getContext('2d');
            var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
            $('.show_content').prepend(img); //创建img并插入展示div
            $('#show').show();
        });
    }
</script>