成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

CSS、SVG、Canvas對(duì)特殊字體的繪制與導(dǎo)出

作者：XboxYan
開發(fā) 前端
簡(jiǎn)單解釋一下：所謂繪制，就是視覺(jué)上可以看到就行（預(yù)覽狀態(tài)），導(dǎo)出呢，就是將看到的轉(zhuǎn)換成圖片（或者Canvas），以便于后續(xù)處理。

最近在項(xiàng)目中需要對(duì)特殊字體進(jìn)行繪制與導(dǎo)出，如下：

圖片

簡(jiǎn)單解釋一下：所謂繪制，就是視覺(jué)上可以看到就行（預(yù)覽狀態(tài)），導(dǎo)出呢，就是將看到的轉(zhuǎn)換成圖片（或者Canvas），以便于后續(xù)處理。

這里總結(jié)了 3 種方式，分別是 CSS 、 SVG、Canvas，來(lái)看看各自有什么差異和優(yōu)缺點(diǎn)吧

一、CSS 的繪制與導(dǎo)出

首先來(lái)看 CSS ，這是最簡(jiǎn)單的繪制方式了。

假設(shè) HTML是這樣的。

<div class="text">前端偵探</div>

加點(diǎn)樣式。

.text{
  display: flex;
  width: 200px;
  height: 200px;
  justify-content: center;
  align-items: center;
  background-color: rebeccapurple;
  color: #fff;
  font-size: 36px;
  font-family: MFMengYuan-Regular;
}

這里給了一個(gè)特殊的字體MFMengYuan-Regular（造字工坊夢(mèng)緣體），當(dāng)然現(xiàn)在肯定是沒(méi)有效果，因?yàn)橄到y(tǒng)并沒(méi)有這樣的字體。

圖片

為了使這個(gè)特殊字體生效，需要手動(dòng)通過(guò)@font-face去定義。

@font-face {
  font-family: "MFMengYuan-Regular";
  src: url("https://webfontsource.yuewen.com/api/v1/yfont/font.eot?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2"); /* IE9 */
  src: local('?'),
    url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff2?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff2"),
    url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff"),
    url("https://webfontsource.yuewen.com/api/v1/yfont/font.ttf?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2");
}

這里引用的是一個(gè)在線生成的字體，對(duì)于 CSS 來(lái)說(shuō)也是小菜一碟，效果如下：

圖片

是不是非常輕松？

CSS 繪制非常容易，但現(xiàn)在僅僅是視覺(jué)上的，那如何將這個(gè)樣式轉(zhuǎn)換成圖片導(dǎo)出呢？

在這里，需要借助 SVG? 中的foreignObject[1]元素，通過(guò)這個(gè)元素，可以將 HTML?嵌入到SVG中，例如：

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="200" height="200">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <div>前端偵探</div>
      </body>
    </foreignObject>
</svg>

一些截圖工具庫(kù)，比如 html2canvas都依賴 foreignObject 這個(gè)特性。

而SVG本質(zhì)上就是圖片，然后就可以將這個(gè)圖片繪制到 Canvas 上，進(jìn)一步進(jìn)行圖片合成和處理了，整體思路如下：

圖片

不過(guò)需要注意的是，SVG?是一個(gè)獨(dú)立的圖片，必須包含繪制內(nèi)容的全部信息，比如這里需要手動(dòng)將style?樣式內(nèi)嵌到div中，就像這樣（代碼結(jié)構(gòu)可能不是很好看）。

<div class="text">
    <style>
    @font-face {
      font-family: "MFMengYuan-Regular";
  src: url("https://webfontsource.yuewen.com/api/v1/yfont/font.eot?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2"); /* IE9 */
  src: local('?'),
    url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff2?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff2"),
    url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff"),
    url("https://webfontsource.yuewen.com/api/v1/yfont/font.ttf?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2");
    }
      .text{
        display: flex;
        width: 200px;
        height: 200px;
        justify-content: center;
        align-items: center;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 36px;
        font-family: MFMengYuan-Regular;
      }
    </style>
    前端偵探
  </div>

接下來(lái)通過(guò)JS將其包裹上foreignObject元素，注意一下特殊字符的轉(zhuǎn)義。

const htmlSvg = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${width/pixelRatio}" height="${height/pixelRatio}">
      <foreignObject x="0" y="0" width="100%" height="100%">
        <body xmlns="http://www.w3.org/1999/xhtml" style="height:100%;margin:0">
          ${dom.outerHTML}
        </body>
      </foreignObject></svg>`.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E");
img.src = htmlSvg

這樣得到的一個(gè)??SVG??字符串就是一個(gè)完整的圖片了。

圖片

等等...圖片是出來(lái)了，不過(guò)字體好像丟失了？

為什么會(huì)這樣呢？原因在于，上面字體使用的是在線字體，在線字體在轉(zhuǎn)成字符后就是普通的字符了，不會(huì)發(fā)出請(qǐng)求，自然也不會(huì)包含字體的真實(shí)信息了，所以要解決這個(gè)問(wèn)題就必須提前將字體轉(zhuǎn)成本地??base64??格式，如下

<div class="text">
    <style>
    @font-face {
      font-family: "MFMengYuan-Regular";
        src: local('?'),
          url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAEPgAAAAAAAAAAAAAAAAAA...==) format('woff');
      }
      .text{
        display: flex;
        width: 200px;
        height: 200px;
        justify-content: center;
        align-items: center;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 36px;
        font-family: MFMengYuan-Regular;
      }
    </style>
    前端偵探
  </div>

這樣就正常了（SVG字符可能會(huì)比較長(zhǎng)）。

圖片

同樣也能將這個(gè)圖片繪制到Canvas上。

const context = canvas.getContext('2d');
context.drawImage(htmlSvg, 0, 0, width, height);

效果如下：

圖片

除此之外，通過(guò)Canvas還能將圖片轉(zhuǎn)成blob地址，相比完整 SVG地址而言，地址更加簡(jiǎn)潔，有時(shí)候圖片過(guò)大，在賦值給圖片src會(huì)造成瀏覽器卡頓，盡量用blob方式。

canvas.toBlob(function(blob){
  img.src = URL.createObjectURL(blob)
})

效果如下：

圖片

完整轉(zhuǎn)換過(guò)程可以查看以下鏈接：

  • CSS font - 碼上掘金 (juejin.cn)[2]
  • CSS font (codepen.io)[3]
  • CSS font (runjs.work)[4]

二、SVG 的繪制與導(dǎo)出

下面來(lái)看SVG方式，相比CSS而言，可能稍微麻煩一點(diǎn)，主要是文本排版方面，同樣需要注意字體base64處理。

<svg id="svg" class="text" xmlns='http://www.w3.org/2000/svg' viewBox="0 0 200 200" width="200" height="200">
  <style>
      @font-face {
      font-family: "MFMengYuan-Regular";
        src: local('?'),
          url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAEPgAAAAAAAAAAAAAAAAAAAAAAAAAAAA...==) format('woff');
      }
      .text{
        background-color: rebeccapurple;
      }
    </style>
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="36" font-family="MFMengYuan-Regular">前端偵探</text>
</svg>

這里需要注意一下 SVG 中的文本居中方式，用到了dominant-baseline（基線對(duì)齊）和text-anchor（錨點(diǎn)對(duì)齊），如下：

圖片

兩者結(jié)合，再配合x=50%和y=50%就實(shí)現(xiàn)了水平垂直居中效果了，如下：

圖片

由于已經(jīng)是SVG了，所以導(dǎo)出圖片或者繪制到Canvas畫布上就更方便，只需要將整個(gè) dom 結(jié)構(gòu)轉(zhuǎn)義一下就可以了，無(wú)需額外包裹。

const htmlSvg = `data:image/svg+xml,${dom.outerHTML}`.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E");
img.src = htmlSvg

效果如下：

圖片

繪制到Canvas上也是同樣的方式。

const context = canvas.getContext('2d');
context.drawImage(htmlSvg, 0, 0, width, height);

效果如下：

圖片

完整轉(zhuǎn)換過(guò)程可以查看以下鏈接：

  • SVG font - 碼上掘金 (juejin.cn)[5]
  • SVG font (codepen.io)[6]
  • SVG font (runjs.work)[7]

三、Canvas 的繪制與導(dǎo)出

最后是 Canvas方式。

這里要繪制的很簡(jiǎn)單，就是一個(gè)矩形和一行文字，主要步驟如下：

const context = canvas.getContext('2d');
context.fillStyle = 'rebeccapurple'// 填充顏色
context.fillRect(0,0,width,height) // 繪制矩形
context.fillStyle = '#fff' // 填充顏色
context.font = `36px MFMengYuan-Regular`; // 設(shè)置字體屬性
context.textAlign = 'center';  // 設(shè)置文本對(duì)齊
context.textBaseline = 'middle'  // 設(shè)置基線對(duì)齊
context.fillText('前端偵探', width/2, height/2); // 繪制文本

效果如下：

? 圖片 ?

不出意料，字體果然沒(méi)有繪制，因?yàn)橄到y(tǒng)并沒(méi)有這種字體，那如何主動(dòng)添加字體呢？

這里有一個(gè)策略，Canvas讀取的是頁(yè)面上已經(jīng)渲染過(guò)的字體，也就是說(shuō)頁(yè)面上如果提前渲染過(guò)該字體，那么在繪制的時(shí)候就可以直接繪制出來(lái)，如果字體是動(dòng)態(tài)的，可以通過(guò)動(dòng)態(tài)創(chuàng)建。

const fontStyle = `
      @font-face {
      font-family: "MFMengYuan-Regular";
        src: local('?'),
          url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAEPgAAAAAAAAAAA...==) format('woff');
      }
      `
const style = document.createElement('style')
style.textContent = fontStyle
document.head.appendChild(style)

現(xiàn)在重新繪制，如下：

圖片

可以看到，起初是沒(méi)有字體的，刷新后才繪制新的字體。

原因是，前面這段代碼僅僅是表示頁(yè)面有這個(gè)字體，但是并沒(méi)有渲染過(guò)，通過(guò)Canvas繪制后，這個(gè)字體才真正被渲染，所以到了第二次字體才生效。

知道原因后，解決就很簡(jiǎn)單了。如果不是實(shí)時(shí)繪制，比如說(shuō)預(yù)覽狀態(tài)通過(guò) CSS 繪制，那么等到 Canvas 繪制的時(shí)候（比如通過(guò)按鈕點(diǎn)擊生成預(yù)覽圖），字體當(dāng)然已經(jīng)渲染過(guò)，自然也不會(huì)有這個(gè)問(wèn)題。如果一定要實(shí)時(shí)繪制，可以采用逐幀比對(duì)的方式，一旦圖像發(fā)生變化，就表示字體渲染成功，實(shí)現(xiàn)如下

該方法參考自張?chǎng)涡窭蠋熯@篇文檔：canvas API中文網(wǎng) - 中文文檔 - CanvasRenderingContext2D.font[8]。

// 先隨便繪制一個(gè)字體
context.font = `36px UNKNOW`;
context.fillText('前端偵探', width/2, height/2);
const dataDefault = context.getImageData(0, 0, width/4, height/2).data;
const detect = function () {
  // 然后繪制實(shí)際字體
  context.font = `36px MFMengYuan-Regular`;
 context.fillText('前端偵探', width/2, height/2);
  // 如果前后數(shù)據(jù)一致，說(shuō)明字體還沒(méi)加載成功，繼續(xù)檢測(cè)
  var dataNow = context.getImageData(0, 0, width/4, height/2).data;
  if ([].slice.call(dataNow).join('') == [].slice.call(dataDefault).join('')) {
    console.log('沒(méi)有變化，重新渲染')
    requestAnimationFrame(detect);
  }
};

這樣就可以實(shí)時(shí)繪制特殊字體了。

圖片

Canvas本身就是圖片了，直接可以轉(zhuǎn)換成圖片或者導(dǎo)出，這里就不多介紹了。

完整實(shí)現(xiàn)過(guò)程可以查看以下鏈接：

  • Canvas font - 碼上掘金 (juejin.cn)[9]
  • Canvas font (codepen.io)[10]
  • Canvas font (runjs.work)[11]

四、總結(jié)一下各自優(yōu)缺點(diǎn)

下面簡(jiǎn)單整理了一下各自實(shí)現(xiàn)的難易程度。

CSS繪制最簡(jiǎn)單，尤其是在文本排版方面，要遠(yuǎn)遠(yuǎn)領(lǐng)先其他兩種方式。

SVG繪制相對(duì)比較簡(jiǎn)單，在矢量圖形處理，比如描邊特效要比 CSS 更有優(yōu)勢(shì)，這兩種方式導(dǎo)出的難點(diǎn)在于一些外鏈資源的額外處理。

而Canvas繪制稍微復(fù)雜一些，在特殊字體需要逐幀去檢測(cè)是否渲染，優(yōu)點(diǎn)是繪制出來(lái)就是圖片，無(wú)需額外導(dǎo)出。


繪制

導(dǎo)出

CSS

??????（簡(jiǎn)單）

????（一般）

SVG

????（一般）

????（一般）

Canvas

??（復(fù)雜）

????????（超級(jí)簡(jiǎn)單）

關(guān)于 CSS 和 SVG 的選擇可以看實(shí)際文本排版需求，比如文本需要換行，字號(hào)大小也不一致，像這種情況 CSS 就比較有優(yōu)勢(shì)了，無(wú)需去精確計(jì)算文本坐標(biāo)。

另外，在實(shí)際工作中，根據(jù)需求可能需要多種方式結(jié)合使用，也就是預(yù)覽狀態(tài)和導(dǎo)出狀態(tài)分別用不同的方式實(shí)現(xiàn)，比如圖片混合，在預(yù)覽狀態(tài)完全可以通過(guò) CSS 實(shí)現(xiàn)，在導(dǎo)出時(shí)才通過(guò) Canvas 去繪制合成。

參考資料

[1]foreignObject: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject?。

[2]CSS font - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7170205919391776801?。

[3]CSS font (codepen.io): https://codepen.io/xboxyan/pen/oNydKrv?。

[4]CSS font (runjs.work): https://runjs.work/projects/62abc5942d9042b5?。

[5]SVG font - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7170214063337635853?。

[6]SVG font (codepen.io): https://codepen.io/xboxyan/pen/zYaaOvb?。

[7]SVG font (runjs.work): https://runjs.work/projects/e2ff8774f0d0463b?。

[8]canvas API中文網(wǎng) - 中文文檔 - CanvasRenderingContext2D.font: https://www.canvasapi.cn/CanvasRenderingContext2D/font#&others?。

[9]Canvas font - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7170227469218218014?。

[10]Canvas font (codepen.io): https://codepen.io/xboxyan/pen/ExRRYMV?。

[11]Canvas font (runjs.work): https://runjs.work/projects/fc8d17a0c2494531?。

責(zé)任編輯：姜華 來(lái)源： 前端偵探
CanvasCSS
相關(guān)推薦

2023-01-09 11:33:25

CSS寫作網(wǎng)格線

2024-04-08 09:11:13

SVG前端CSS

2021-12-13 20:08:28

理論渲染技術(shù)

2010-08-20 14:47:02

IEFirefoxCSS

2010-09-02 13:53:58

CSS Sprites

2024-05-16 10:35:09

SVGCSS背景平鋪

2022-11-14 11:41:13

SVG開發(fā)組件

2017-04-05 16:30:09

Node.jsFFmpeg Canvas

2022-02-28 15:52:07

canvasHarmonyOS鴻蒙

2012-02-22 15:41:50

HTML 5

2010-09-06 10:16:21

CSS字體

2012-05-07 14:25:16

HTML5

2024-01-29 09:33:48

CSS前端SVG

2022-12-18 22:11:46

2022-05-18 20:02:47

SVGcanvasChrome 插件

2010-09-02 09:59:52

CSS SpritesCSS

2012-02-24 15:28:36

ibmdw

2022-07-05 16:21:44

繪制表盤鴻蒙

2023-05-08 09:08:33

CSS前端

2011-11-10 10:00:55

Silverlight
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)

主站蜘蛛池模板： 一级片av | 一区二区三区欧美大片 | 三极网站 | 久久久久久久久久久91 | 国产精品久久久久久久久久久免费看 | 国产一区二区小视频 | 欧美成人一区二区三区 | 欧美日韩最新 | 欧美精品在线一区二区三区 | 精品久久久久久久久久久久久久 | 久久久91 | 久久久久久久久国产 | 欧美中文字幕一区二区三区亚洲 | 国产精品久久久久久久久久久久久 | 成人在线电影网站 | 成人久久18免费网站麻豆 | 久久精品av | 国产探花在线精品一区二区 | 精品视频免费 | 综合久久网 | www.久| 69av在线视频 | 亚洲综合字幕 | а_天堂中文最新版地址 | 综合九九| 国产区在线观看 | 91最新在线视频 | 亚洲精品电影网在线观看 | 在线免费黄色小视频 | 放个毛片看看 | 日韩成人精品一区二区三区 | 久久久成人精品 | 成人在线视频网 | 人人人人人爽 | 丁香婷婷成人 | 北条麻妃一区二区三区在线视频 | 国产精品久久久久久久久久久久 | 四虎成人免费视频 | 国产精品国产三级国产播12软件 | 亚洲一区二区黄 | 久久久精 |