html2img

内容

html内容通过canvas转化为图片

    var app = {
        //设置监听事件
        setListener: function () {
            this.htmlToCanvas(document.querySelector('#content'));
        },
        //获取像素密度
        getPixelRatio: function (context) {
            var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        //绘制dom 元素，生成截图canvas
        htmlToCanvas: function (dom) {
            var shareContent = dom;// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
            var width = shareContent.offsetWidth;  // 获取(原生）dom 宽度
            var height = shareContent.offsetHeight; // 获取(原生）dom 高
            var offsetTop = shareContent.offsetTop;  //元素距离顶部的偏移量

            var canvas = document.createElement('canvas');  //创建canvas 对象
            var context = canvas.getContext('2d');
            var scaleBy = this.getPixelRatio(context);  //获取像素密度的方法 (也可以采用自定义缩放比例)
            canvas.width = width * scaleBy;   //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
            canvas.height = (height + offsetTop) * scaleBy;  // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
            context.scale(scaleBy, scaleBy);

            var opts = {
                allowTaint: true,//允许加载跨域的图片
                tainttest: true, //检测每张图片都已经加载完成
                scale: scaleBy, // 添加的scale 参数
                canvas: canvas, //自定义 canvas
                logging: false, //日志开关，发布的时候记得改成false
                width: width, //dom 原始宽度
                height: height //dom 原始高度
            };
            html2canvas(shareContent, opts).then(function (canvas) {
                canvas.setAttribute('id', 'thecanvas');
                document.getElementById('images').appendChild(canvas);
            });
        }
    };

引用插件

niklasvh/html2canvas