原 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.

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

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

解决方案--改源码

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

{
  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了,还有很多可以优化的点,目前仅仅是实现了效果.待优化!

具体代码:https://jsfiddle.net/kaykie/2qnoxdoz/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python3

tkinter -- Spinbox

只是创建了一个 Spinbox,其它的什么也做不了,与 Scale 不同,Scale 使用缺省值就可以控制 值的改变

11130
来自专栏九彩拼盘的叨叨叨

选择器:nth-child使用摘要

IE9+,Firefox,Chrome。 让IE6+支持:nth-child方法是,可以用selectivizr

9330
来自专栏GIS讲堂

OpenLayers3基础教程——OL3之Popup

本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay代替OL2的Popup功能。

16250
来自专栏Golang语言社区

Go语言的标准输入-scan 和bufio

除了f mt 和 os ,我们还需要用到 bufio 来实现带缓冲输入(input)和输出(output)读取用户的输入数据 我们怎样读取用户从键盘(控制台)输...

559110
来自专栏游戏杂谈

关于AS3的事件移除释疑

as3.0中的事件Event(位于包flash.events内,继承至Object,子类有…)

12220
来自专栏Golang语言社区

厚土Go学习笔记 | 23. map字典的使用

map是一组键和值的组合。在map内是无序的。你可以随时加入或删除一个键及键对应的值。 想查看所有键值,使用range遍历好了。 想找到唯一的键值,那要使用键来...

35680
来自专栏前端知识分享

第208天:jQuery框架封装(一)

1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

32240
来自专栏互联网杂技

js事件

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body...

418110
来自专栏编程

Python基础知识6:格式化字符、颜色

字符格式化,有两种方式: 1、通过%占位符方式,%s,%d,% 2、通过format,其中format比较好用,可以居中、可以用%、可以用二进制、可以填充字符自...

24950
来自专栏Golang语言社区

空结构体struct{}解析

本篇文章转自David的"The empty struct"一文,原文地址链接是http://dave.cheney.net/2014/03/25/the-em...

65590

扫码关注云+社区

领取腾讯云代金券