html2canvas解决字体渐变

前言

这两天有个需求,需要保存页面的dom元素为图片到本地,之前没有做过类似的效果,通过github搜索了一下,找到两个github库,

一个为domtoimage:https://github.com/tsayen/dom-to-image; star:3539;

另一个为htmltocanvas:https://github.com/niklasvh/html2canvas/, star12073;

两个都试用后,最后选择了第二个.

使用方法

使用方法很简单:在正常的html中引入html2canvas.js后只需要写如下几行代码;

html2canvas(document.getElementById("container"))
  .then(function (canvas) {
    document.body.appendChild(canvas)
  })

遇到的问题

在使用文本渐变功能的时候,在进行生成图片的时候渐变的文本不能正常的显示渐变内容

明明canvas是支持文本渐变的,这怎么就实现不了了,是官网查了一下and看了github的issues,确实也有很多同学遇到和我同样的问题:https://github.com/niklasvh/html2canvas/issues/1208;作者也在下面回复了,目前暂时不支持:Neither background-clip: text nor box-shadow are currently supported.

在官网上也看到了相关的说明.

需求方这边又要求必须要这样的渐变的效果

解决方案--改源码

首先就得找到渲染文本的函数:

扫描二维码关注公众号，回复： 1124736 查看本文章

{
  key: 'renderNodeContent',
  value: function renderNodeContent(container) {
    var _this = this;
    var callback = function callback() {
      if (container.childNodes.length) {
        container.childNodes.forEach(function (child) {
          if (child instanceof _TextContainer2.default) {
            var style = child.parent.style;
            var xnwWidth = 0;
            var xnwLeft = child.bounds[0].bounds.left;
            for (var xnwi = 0; xnwi < child.bounds.length; xnwi++) {
              xnwWidth += child.bounds[xnwi].bounds.width;
            }
            xnwWidth = xnwLeft + xnwWidth;
            _this.target.renderTextNode(child.bounds, style.color, style.font, style.textDecoration, style.textShadow, xnwWidth,xnwLeft);
          } else {
            _this.target.drawShape(child, container.style.color);
          }
        });
      }
  }
},

这段函数是渲染内容页面内容的,这个函数调用了renderTextNode 这个函数,我们继续走,一看这个函数名就是渲染文本的.在这个函数里我定义了一些变量都是带我名字的首字母,为了防止冲突.

继续走:

{
  key: 'renderTextNode',
  value: function renderTextNode(textBounds, color, font, textDecoration, textShadows, xnwWidth,xnwLeft) {
    var _this4 = this;
    console.log(xnwWidth);
    this.ctx.font = [font.fontStyle, font.fontVariant, font.fontWeight, font.fontSize, font.fontFamily].join(' ');
    console.log(this.options);
    textBounds.forEach(function (text) {
      // _this4.ctx.fillStyle = '#ff0000';
      if (textShadows && text.text.trim().length) {
        textShadows.slice(0).reverse().forEach(function (textShadow) {
          _this4.ctx.shadowColor = textShadow.color.toString();
          _this4.ctx.shadowOffsetX = textShadow.offsetX * _this4.options.scale;
          _this4.ctx.shadowOffsetY = textShadow.offsetY * _this4.options.scale;
          _this4.ctx.shadowBlur = textShadow.blur;

          _this4.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
        });
      } else {
         // 当fontsize的大小为30.1px的时候,才给它加上渐变的效果
        if (font.fontSize === '30.1px') {
          // xnwLeft为渐变的开始位置,xnwWidth为渐变的长度
          var gradientxnw = _this4.ctx.createLinearGradient(xnwLeft, 0, xnwWidth, 0);
          gradientxnw.addColorStop(0, 'black');
          gradientxnw.addColorStop(0.8, 'red');
          gradientxnw.addColorStop(1, 'blue');
          _this4.ctx.fillStyle = gradientxnw;
        } else {
          _this4.ctx.fillStyle = color;
        }
        _this4.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
      }
    });
  }
}

在这里主要定义了渐变的样式,由于不清楚外部的参数是如何传入的,只能通过修改fontsize指定一个特别的数字来确定要使这段文本进行渐变.

OK 大功告成!效果如下:

上面为需要转为图片的dom,下面为转了之后的,因为渐变的颜色是直接写在了html2canvas了,还有很多可以优化的点,目前仅仅是实现了效果.待优化!