把DOM节点生成base64图片

1.引用两个第三方js文件：

<script type="text/javascript" src="https://ydcommon.51yund.com/dom-to-image.js"></script>

<script type="text/javascript" src="https://ydcommon.51yund.com/ydjs/html2canvas.min.js?v={{.style_version}}"></script>

其中 html5canvas在ios系统中使用未发现问题及bug 但在android中有兼容性问题（主要表现为对android系统中页面样式无法兼容导致生成样式错误等问题）

反之 domtoimg 在android系统中使用未发现问题及bug 但在ios中有兼容性问题（主要现象为生成的base64中跨域图片无法显示）

于是结合两者实现该功能

2.定义生成成功回调方法和生成失败回调方法

3.调用以下函数传入参数

4.tips: 使用html2canvas 生成海报时 html上的图片节点最好使用img标签生成的base64图片会比较清晰且img标签设置 crossorigin = “Anonymous”支持跨域

<code>

function domToImg(node,succCb,failCb){

    //node = document.getElementById(XXX);

    //生成成功回调函数 succCb

    //生成失败回调函数 failCb

    if(isAndroidWeb()){

        domtoimage.toPng(node)

        .then(function (dataUrl) {

            if (typeof succCb === "function") {

                succCb(dataUrl);

            }

        })

        .catch(function (error) {

            console.error('oops, something went wrong!', error);

            if (typeof failCb === "function") {

                failCb();

            }

        });

    }

    var w = $(node).width();

    var h = $(node).height();

    var canvas = document.createElement("canvas");

    var canvasRadio = 3;

    canvas.width = w * canvasRadio;

    canvas.height = h * canvasRadio;

    canvas.style.width = w * canvasRadio + "px";

    canvas.style.height = h * canvasRadio + "px";

    var context = canvas.getContext("2d");

    //然后将画布缩放，将图像放大三倍画到画布上

    context.scale(canvasRadio,canvasRadio);

    html2canvas(node,{

            canvas:canvas,

            allowTaint: false,

            taintTest: true,

            useCORS: true,

            dpi: window.devicePixelRatio

        }).then(function(canvas){

            var context = canvas.getContext('2d');

            // 【重要】关闭抗锯齿

            context.mozImageSmoothingEnabled = false;

            context.webkitImageSmoothingEnabled = false;

            context.msImageSmoothingEnabled = false;

            context.imageSmoothingEnabled = false;

            var dataUrl = canvas.toDataURL("image/png");

            if (typeof succCb === "function") {

                succCb(dataUrl);

            }

        }

    );

}

</code>

最后编辑于：2019.07.04 16:03:19