html2canvas偏移和模糊

前言

最近接到在前端生成圖片並上傳的需求，選擇html2canvas這個插件。遇到可一些問題和你們分享下

官網：html2canvas.hertzen.com/configurati…

git：github.com/niklasvh/ht…

正文

安裝

安裝過程請見官網此處省略1萬字。。。

配置

此處我想省略2萬字。。。

注意

1. 獲取的元素應該爲原生的dom元素（vue.$ref獲取元素不可取）
2. 開啓useCORS，須要後臺服務的配合
3. 獲取元素的偏移可以使用element.getBoundingClientRect()獲取
4. 在獲取根節點srcollTop.scrollLeft時，注意兼容性

源碼render

github.com/niklasvh/ht…

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);複製代碼