前言

最近接到在前端生成图片并上传的需求，选择html2canvas这个插件。遇到可一些问题和大家分享下

官网：http://html2canvas.hertzen.com/configuration

git：https://github.com/niklasvh/html2canvas/

正文

安装

安装过程请见官网此处省略1万字。。。

配置

此处我想省略2万字。。。

注意

获取的元素应该为原生的dom元素（vue.$ref获取元素不可取）
开启useCORS，需要后台服务的配合
获取元素的偏移可使用element.getBoundingClientRect()获取
在获取根节点srcollTop.scrollLeft时，注意兼容性

源码render

https://github.com/niklasvh/html2canvas/blob/master/src/render/canvas/canvas-renderer.ts

2019-08-07

constructor(options: RenderConfigurations) {
        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
        this.options = options;
        this.canvas.width = Math.floor(options.width * options.scale);
        this.canvas.height = Math.floor(options.height * options.scale);
        this.canvas.style.width = `${options.width}px`;
        this.canvas.style.height = `${options.height}px`;
        this.fontMetrics = new FontMetrics(document);
        this.ctx.scale(this.options.scale, this.options.scale);
        this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
        this.ctx.textBaseline = 'bottom';
        this._activeEffects = [];
        Logger.getInstance(options.id).debug(
            `Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${
                options.scale
            }`
        );
    }

实战运用

let shareContent = document.getElementById('dom') // 需要截图的包裹的（原生的）DOM 对象
let width = shareContent.offsetWidth // 获取dom 宽度
let height = shareContent.offsetHeight // 获取dom 高度
var scale = 1.5 // 定义任意放大倍数 支持小数
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
var rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 获取滚动轴滚动的长度
let opts = {
     x: rect.left,// 绘制的dom元素相对于视口的位置
    y: rect.top,
    // scrollX: scrollTop,// 滚动的长度
    scrollY: -scrollTop,
    scale: scale, // 添加的scale 参数
    //canvas: canvas, // 自定义 canvas
    // logging: true, //日志开关，便于查看html2canvas的内部执行流程
    width: width, // dom 原始宽度
    height: height,
    useCORS: true // 【重要】开启跨域配置
}
html2canvas(shareContent, opts).then(function (canvas) {
    let context = canvas.getContext('2d')
    // 【重要】关闭抗锯齿
    context.mozImageSmoothingEnabled = false
    context.msImageSmoothingEnabled = false
    context.imageSmoothingEnabled = false
    document.body.append(canvas)
})

坑里的挣扎

有的版本不支持 x y scale 参数，或者设置该属性依然会出现图片偏移，和图片模糊建议自己创建canvas

    let canvas = document.createElement('canvas') // 创建一个canvas节点
    var scale = 1.5 // 定义任意放大倍数 支持小数
    canvas.width = Math.floor(width * scale) // 定义canvas 宽度 * 缩放
    canvas.height = Math.floor(height * scale) // 定义canvas高度 *缩放
    var rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的
    canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 如果页面根元素有滚动的话,否则可以忽略此项
    let scrollLeft = document.documentElement.scrollLeft|| document.body.scrollLeft
    canvas.getContext('2d').translate(-rect.left - options.scrollX, -rect.left - options.scrollY);