使用 html2canvas 将 HTML 节点转为图片并解决跨域图片

html2canvas 下载链接 https://github.com/niklasvh/html2canvas/releases

<script src="/js/html2canvas/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    //将图片转为 base64
    function getBase64Image(img) {
        img.crossOrigin = 'Anonymous';
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/jpeg");
        return dataURL;

    }

    //递归将要转换的节点中的所有图片的src全部转为base64
    var s = 0;
    image2base64(s);
    function image2base64() {
        var image = new Image();
        image.src = $(".share_b img").eq(s).attr('src');
        console.log(image.src);
        image.onload = function() {
            var base64 = getBase64Image(image);
            $(".share_b img").eq(s).attr('src', base64);
            s++;
            if (s < $(".share_b img").length) {
                image2base64();
            }
        }
    }

    //使用html2canvas将节点转为图片
    $(function(){
        $(".share_a").bind("click", function () {
            html2canvas($(".share_b")).then(function(canvas) {
                var imgUria = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                $(".share_img").attr('src', imgUria);
                $(".share_img").css('display', 'block');
                $(".share_bg").css('display', 'block');
            });
        })
    });

</script>

以上。