vue中使用html2canvas及解决html2canvas截屏图片模糊问题

责编:menVScode 2018-10-26 19:00 阅读(84)

最近在项目中用到了html2canvas插件,发现将html代码生成img图片后,特别模糊。

于是查了很多资料,发现有一个直接修改html2canvas源码能达到要求。

html2canvas  官方网站http://html2canvas.hertzen.com/index.html。这是一个js截屏插件,在前台利用h5的canvas  将html的内容显示在canvas上,再利用 js 将canvas转化为图片。

插件的源码修改:

1. 源码第986行 renderWindow 的方法中修改判断条件,增加一个options.scale存在的条件

if (options.type === "view") {
    canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
    canvas = renderer.canvas;
} else {
    canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
}

修改为

if (options.type === "view") {
    canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement) {
    canvas = renderer.canvas;
}else if(options.scale && options.canvas !=null){
    log("放大canvas",options.canvas);
    var scale = options.scale || 1;
    canvas = crop(renderer.canvas, {width: bounds.width * scale, height:bounds.height * scale, top: bounds.top *scale, left: bounds.left *scale, x: 0, y: 0});
}else {
    canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
}

2. 代码第 943 行 html2canvas 的方法中 修改width,height:

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
    if (typeof(options.onrendered) === "function") {
         log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
         options.onrendered(canvas);
    }
     return canvas;
});

修改为

width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width, height, index).then(function(canvas) {
    if (typeof(options.onrendered) === "function") {
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
        options.onrendered(canvas);
    }
    return canvas;
});


使用方式

1、vue 文件中引入 修改完后的 html2canvas.js

2、在vue的方法中添加一个获取设备像素密度的方法 

getPixelRatio(context){
    var backingStore = context.backingStorePixelRatio ||
              context.webkitBackingStorePixelRatio ||
              context.mozBackingStorePixelRatio ||
              context.msBackingStorePixelRatio ||
              context.oBackingStorePixelRatio ||
              context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
},

3、html转图片方法

getImg(){
    let self = this;
    setTimeout(function () {
        var content_html = document.getElementById('content_html');    //要转化的div
        let width = content_html.offsetWidth;
        let height = content_html.offsetHeight;
        let offsetTop = content_html.offsetTop;
        let canvas = document.createElement("canvas");
        let context = canvas.getContext('2d');
        let scaleBy = self.getPixelRatio(context);
        canvas.width = width*scaleBy;
        canvas.height = (height+offsetTop)*scaleBy;
        context.scale(scaleBy,scaleBy);
        var opts = {
            allowTaint:true,//允许加载跨域的图片
            tainttest:true, //检测每张图片都已经加载完成
            scale:scaleBy, // 添加的scale 参数
            canvas:canvas, //自定义 canvas
            logging: true, //日志开关,发布的时候记得改成false
            width:width, //dom 原始宽度
            height:height //dom 原始高度
        };
        html2canvas(content_html,opts).then(function (canvas) {
        canvas.style.width = width+"px";
        canvas.style.height = height+"px";
        var image = new Image();
        image.src = canvas.toDataURL();
        document.getElementById('content_img').appendChild(image);      //将转化好的图片插入到防止图片转换的div中
        content_html.style.display='none'
    });
}
标签: html2canvas
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码