利用 html2canvas 生成文章缩略图

    DoraCMS 文档添加，缩略图一直是自己上传，有时候我也苦于找一张比较合适的缩略图，有时间的时候还可以自己找找，有时候时间紧急又想快速发布文章就很闹心，

近期逛csdn无意看到了他们发布文章可以自动生成缩略图功能，觉得很有意思，也为文章发布者节省了很多时间，于是自己在 DoraCMS 上实现了一下，主要用到了一个js库 html2canvas ,主要作用是将 dom 元素转换为图片，非常方便

基本语法

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

在 vue 中使用

htmlToImage() {
    return new Promise((reslove, reject) => {
    let element = document.getElementsByClassName("preview")[0];
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    var scale = 1;
    var canvas = document.createElement("canvas");
    // 获取元素相对于视窗的偏移量
    var rect = element.getBoundingClientRect();
    canvas.width = width * scale;
    canvas.height = height * scale * 1;
    var context = canvas.getContext("2d");
    context.scale(scale, scale);
    
    // 设置context位置, 值为相对于视窗的偏移量的负值, 实现图片复位
    let canvasHeight = window.scrollY;
    context.translate(0, -canvasHeight);
    
    var options = {
        scale: scale,
        canvas: canvas,
        width: width,
        height: height,
        taintTest: true, //在渲染前测试图片
        useCORS: true, //貌似与跨域有关，但和allowTaint不能共存
        dpi: window.devicePixelRatio, // window.devicePixelRatio是设备像素比
        background: "#fff"
    };
    
    html2canvas(element, options).then(function(canvas) {
        var dataURL = canvas.toDataURL("image/png", 1.0); //将图片转为base64, 0-1 表示清晰度
        var base64String = dataURL
        .toString()
        .substring(dataURL.indexOf(",") + 1); //截取base64以便上传
        let params = { base64: base64String };
        uploadCover(params).then(result => {
        if (result.status === 200) {
            reslove(result.data);
        } else {
            reject(result.message);
        }
    });
    });
    });
},

PS： 自动生成文章缩略图功能会在下个版本发布，有兴趣的童鞋可以下下来试试！