整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML背景色教程–如何更改Div背景色,并通過代碼示例進行了說明

          為Web開發人員,最常見的事情之一就是更改HTML元素的背景顏色。但是,如果您不了解如何使用CSS background-color屬性,可能會產生混淆。在本文中,我們討論以下幾點

          1.HTML元素的默認背景色值

          2.如何更改div的背景顏色,這是非常常見的元素

          3.該background-color屬性會影響CSS盒子模型的哪些部分,以及

          4.此屬性可以采用的不同值。

          元素的默認背景色

          div的默認背景顏色是transparent。因此,如果您不指定div的背景色,它將顯示其父元素的背景色。

          更改Div的背景顏色

          在此示例中,我們將更改以下div的背景顏色。

          <div class="div-1"> I love HTML </div>
          <div class="div-2"> I love CSS </div>
          <div class="div-3"> I love JavaScript </div>

          沒有任何樣式,它將在視覺上轉換為以下內容。

          讓我們通過向類中添加樣式來更改div的背景顏色。您可以通過嘗試HTML文件中的示例進行操作。

          <style>
              .div-1 {
                  background-color: #EBEBEB;
              }
              
              .div-2 {
              	background-color: #ABBAEA;
              }
              
              .div-3 {
              	background-color: #FBD603;
              }
          </style>
          
          <body>
              <div class="div-1"> I love HTML </div>
              <div class="div-2"> I love CSS </div>
              <div class="div-3"> I love JavaScript </div>
          </body>

          這將導致以下結果:

          看!我們已成功更改了該div的背景顏色。接下來,讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個部分。

          背景顏色和CSS Box模型

          根據CSS框模型,所有HTML元素都可以建模為矩形框。每個盒子由4個部分組成,如下圖所示。

          如果您不熟悉Box模型,則可以查閱相關資料。問題是,當您更改div的背景顏色時,Box模型的哪一部分會受到影響?簡單的答案是填充區域和內容區域。讓我們通過一個例子來確認這一點。

          <style>
              body {
                  background-color: #ABBAEA;
              }
              div {
                  height: 200px;
                  margin: 20px;
                  border: 5px solid;
                  background-color: #FBD603;
              }
          </style>
          <body>
              <div>
                  <p>This is the parent div which contains the div we are testing</p>
          
                  <div>
                      <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
                  </div>
              </div>
          </body>

          這將導致:

          從上面的示例中,我們可以看到空白區域和邊框區域不受背景顏色變化的影響。我們可以使用border-color屬性更改邊框的顏色。邊距區域保持透明,并反映父容器的背景色。

          最后,讓我們討論background-color屬性可以采用的值。

          背景色值

          就像color屬性一樣,background-color屬性可以采用六個不同的值。讓我們通過一個示例考慮三個最常見的值。在示例中,我們將div的背景色設置為具有不同值的紅色。

          <style>
              /* Keyword value/name of color */
              .div-1 {
                  background-color: red;
              }
              
              /* Hexadecimal value */
              .div-2 {
                 background-color: #FF0000;	 
              }
              
              /* RGB value */
              .div-3 {
              	background-color: rgb(255,0,0);
              }
              
          </style>
          
          <body>
              <div class="div-1">
                  <p>The background property can take six different values.</p>
              </div>
          
              <div class="div-2">
                  <p>The background property can take six different values.</p>
              </div>
          
              <div class="div-3">
                  <p>The background property can take six different values.</p>
              </div>
          </body>

          注意,它們的結果都是相同的背景色。

          該background-color屬性可以采用的其他值包括HSL值,特殊關鍵字值和全局值。這是每個例子。

          /* HSL value */
          background-color: hsl(0, 100%, 25%;
          
          /* Special keyword values */
          background-color: currentcolor;
          background-color: transparent;
          
          /* Global values */
          background-color: inherit;
          background-color: initial;
          background-color: unset;

          額外注意

          設置元素的背景色時,重要的是要確保背景色和其包含的文本顏色的對比度足夠高。這是為了確保弱視人士可以輕松閱讀文本。

          第一個div的背景顏色與文本顏色之間的對比度不夠高,每個人都看不到。因此,除非您是唯一正在使用的網站,并且您的視力非常好,否則應避免這種顏色組合。

          第二個div在背景顏色和文本顏色之間具有更好的對比度。因此,它使人們更容易閱讀和閱讀。

          結論

          在本文中,我們看到了如何更改div的背景顏色。我們還討論了CSS Box模型的哪些部分受背景顏色變化的影響。最后,我們討論了background-color屬性可以采用的值。

          希望本文對您有所幫助。謝謝閱讀。

          篇文章主要講述了CSS的基礎用法,講述了如何定義頭文件,導入CSS文件,id和class選擇器,元素選擇器,后代選擇器,子元素選擇器,兄弟選擇器,偽類選擇器等等,讓大家對CSS選擇器有個簡單的認識和了解。這篇接上篇文章,繼續講解CSS的基礎用法。

          背景Background

          背景可以設置很多,比如背景顏色,背景圖片,背景定位,背景重復,背景關聯,

          1)).背景顏色

          <div style='background-color='red'></div>

          2)).背景圖片

          <div style='background-image: url('1.png');'></div>

          3)).背景定位

          <div style='background-position:center'></div>
          center   中間
          top      頂部
          bottom   底部
          right    右邊
          left     左邊
          還可以使用百分比來設置定位:
          <div style='background-position:40% 50%'></div>
          或者設置像素值:
          <div style='background-position:100px 100px'></div>

          4)).背景顯示方式

          <div style=' background-repeat:repeat-x'></div>
          repeat-x 水平平鋪圖片
          repeat-y 垂直平鋪圖片
          no-repeat 不平鋪圖片

          5)).背景滾動條

          <div style='background-attachment:fixed'></div>
          fixed   固定 不出現滾動條
          scroll  出現滾動條
          no      沒有滾動條

          6)).背景大小

          <div style='background-size:50px 50px'></div>

          7)).背景圖片的定位區域

          <div style='background-origin:content-box'></div>
          content-box  文本內容區域
          padding-box   內邊距區域
          border-box    外邊框區域

          8)).背景裁剪區域

          <div style='background-clip:content-box'></div>
          content-box  裁剪文本內容區域
          padding-box  裁剪內邊距區域
          border-box   裁剪外邊框區域

          總結

          這篇文章主要介紹了CSS樣式更改篇中的背景Background的基本設置,希望讓大家對CSS選擇器有個簡單的認識和了解。
          ****看完本文有收獲?請轉發分享給更多的人****


          想要學習更多,請前往Python爬蟲與數據挖掘專用網站:http://pdcfighting.com/

          om-to-image庫可以幫你把dom節點轉換為圖片,它的核心原理很簡單,就是利用svg的foreignObject標簽能嵌入html的特性,然后通過img標簽加載svg,最后再通過canvas繪制img實現導出,好了,本文到此結束。

          另一個知名的html2canvas庫其實也支持這種方式。

          雖然原理很簡單,但是dom-to-image畢竟也有1000多行代碼,所以我很好奇它具體都做了哪些事情,本文就來詳細剖析一下,需要說明的是dom-to-image庫已經六七年前沒有更新了,可能有點過時,所以我們要看的是基于它修改的dom-to-image-more庫,這個庫修復了一些bug,以及增加了一些特性,接下來我們就來詳細了解一下。

          將節點轉換成圖片

          我們用的最多的api應該就是toPng(node),所以以這個方法為入口:

          function toPng(node, options) {
              return draw(node, options).then(function (canvas) {
                  return canvas.toDataURL();
              });
          }
          

          toPng方法會調用draw方法,然后返回一個canvas,最后通過canvas的toDataURL方法獲取到圖片的base64格式的data:URL,我們就可以直接下載為圖片。

          看一下draw方法:

          function draw(domNode, options) {
              options = options || {};
              return toSvg(domNode, options)// 轉換成svg
                  .then(util.makeImage)// 轉換成圖片
                  .then(function (image) {// 通過canvas繪制圖片
                      // ...
                });
          }
          

          一共分為了三個步驟,一一來看。

          將節點轉換成svg

          toSvg方法如下:

          function toSvg(node, options) {
              const ownerWindow = domtoimage.impl.util.getWindow(node);
              options = options || {};
              copyOptions(options);
              let restorations = [];
              return Promise.resolve(node)
                  .then(ensureElement)// 檢查和包裝元素
                  .then(function (clonee) {// 深度克隆節點
                      return cloneNode(clonee, options, null, ownerWindow);
                  })
                  .then(embedFonts)// 嵌入字體
                  .then(inlineImages)// 內聯圖片
                  .then(makeSvgDataUri)// svg轉data:URL
                  .then(restoreWrappers)// 恢復包裝元素
          }
          

          node就是我們要轉換成圖片的DOM節點,首先調用了getWindow方法獲取window對象:

          function getWindow(node) {
              const ownerDocument = node ? node.ownerDocument : undefined;
              return (
                  (ownerDocument ? ownerDocument.defaultView : undefined) ||
                  global ||
                  window
              );
          }
          

          說實話前端寫了這么多年,但是ownerDocument和defaultView兩個屬性我完全沒用過,ownerDocument屬性會返回當前節點的頂層的 document對象,而在瀏覽器中,defaultView屬性會返回當前 document 對象所關聯的 window 對象,如果沒有,會返回 null。

          所以這里優先通過我們傳入的DOM節點獲取window對象,可能是為了處理iframe嵌入之類的情況把。

          接下來合并了選項后,就通過Promise實例的then方法鏈式的調用一系列的方法,一一來看。

          檢查和包裝元素

          ensureElement方法如下:

          function ensureElement(node) {
              // ELEMENT_NODE:1
              if (node.nodeType === ELEMENT_NODE) return node;
              const originalChild = node;
              const originalParent = node.parentNode;
              const wrappingSpan = document.createElement('span');
              originalParent.replaceChild(wrappingSpan, originalChild);
              wrappingSpan.append(node);
              restorations.push({
                  parent: originalParent,
                  child: originalChild,
                  wrapper: wrappingSpan,
              });
              return wrappingSpan;
          }
          

          html節點的nodeType有如下類型:

          值為1也就是我們普通的html標簽,其他的比如文本節點、注釋節點、document節點也是比較常用的,如果我們傳入的節點的類型為1,ensureElement方法什么也不做直接返回該節點,否則會創建一個span標簽替換掉原節點,并把原節點添加到該span標簽里,可以猜測這個主要是處理文本節點,畢竟應該沒有人會傳其他類型的節點進行轉換了。

          同時它還把原節點,原節點的父節點,span標簽都收集到restorations數組里,很明顯,這是為了后面進行還原。

          克隆節點

          接下來執行了cloneNode方法:

          cloneNode(clonee, options, null, ownerWindow)
          
          // 參數:需要克隆的節點、選項、父節點的樣式、所屬window對象
          function cloneNode(node, options, parentComputedStyles, ownerWindow) {
              const filter = options.filter;
              if (
                  node === sandbox ||
                  util.isHTMLScriptElement(node) ||
                  util.isHTMLStyleElement(node) ||
                  util.isHTMLLinkElement(node) ||
                  (parentComputedStyles !== null && filter && !filter(node))
              ) {
                  return Promise.resolve();
              }
              return Promise.resolve(node)
                  .then(makeNodeCopy)// 處理canvas元素
                  .then(function (clone) {// 克隆子節點
                      return cloneChildren(clone, getParentOfChildren(node));
                  })
                  .then(function (clone) {// 處理克隆的節點
                      return processClone(clone, node);
                  });
          }
          

          先做了一堆判斷,如果是script、style、link標簽,或者需要過濾掉的節點,那么會直接返回。

          sandbox、parentComputedStyles后面會看到。

          接下來又調用了幾個方法,沒辦法,跟著它一起入棧把。

          處理canvas元素的克隆

          function makeNodeCopy(original) {
              if (util.isHTMLCanvasElement(original)) {
                  return util.makeImage(original.toDataURL());
              }
              return original.cloneNode(false);
          }
          

          如果元素是canvas,那么會通過makeImage方法將其轉換成img標簽:

          function makeImage(uri) {
              if (uri === 'data:,') {
                  return Promise.resolve();
              }
              return new Promise(function (resolve, reject) {
                  const image = new Image();
                  if (domtoimage.impl.options.useCredentials) {
                      image.crossOrigin = 'use-credentials';
                  }
                  image.onload = function () {
                      if (window && window.requestAnimationFrame) {
                          // 解決 Firefox 的一個bug (webcompat/web-bugs#119834) 
                          // 需要等待一幀
                          window.requestAnimationFrame(function () {
                              resolve(image);
                          });
                      } else {
                          // 如果沒有window對象或者requestAnimationFrame方法,那么立即返回
                          resolve(image);
                      }
                  };
                  image.onerror = reject;
                  image.src = uri;
              });
          }
          

          crossOrigin屬性用于定義一些元素如何處理跨域請求,主要有兩個取值:

          anonymous:元素的跨域資源請求不需要憑證標志設置。

          use-credentials:元素的跨域資源請求需要憑證標志設置,意味著該請求需要提供憑證。

          除了use-credentials,給crossOrigin設置其他任何值都會解析成anonymous,為了解決跨域問題,我們一般都會設置成anonymous,這個就相當于告訴服務器,你不需要返回任何非匿名信息過來,例如cookie,所以肯定是安全的。不過在使用這兩個值時都需要服務端返回Access-Control-Allow-Credentials響應頭,否則肯定無法跨域使用的。

          非canvas元素的其他元素,會直接調用它們的cloneNode方法進行克隆,參數傳了false,代表只克隆自身,不克隆子節點。

          克隆子節點

          接下來調用了cloneChildren方法:

          cloneChildren(clone, getParentOfChildren(node));
          

          getParentOfChildren方法如下:

          function getParentOfChildren(original) {
              // 如果該節點是Shadow DOM的附加節點,那么返回附加的Shadow DOM的根節點
              if (util.isElementHostForOpenShadowRoot(original)) {
                  return original.shadowRoot; 
              }
              return original;
          }
          function isElementHostForOpenShadowRoot(value) {
              return isElement(value) && value.shadowRoot !== null;
          }
          

          這里涉及到了shadow DOM,有必要先簡單了解一下。

          shadow DOM是一種封裝技術,可以將標記結構、樣式和行為隱藏起來,比如我們熟悉的video標簽,我們看到的只是一個video標簽,但實際上它里面有很多我們看不到的元素,這個特性一般會和Web components結合使用,也就是可以創建自定義元素,就和Vue和React組件一樣。

          先了解一些術語:

          Shadow host:一個常規 DOM 節點,Shadow DOM 會被附加到這個節點上。

          Shadow tree:Shadow DOM 內部的 DOM 樹。

          Shadow boundary:Shadow DOM 結束的地方,也是常規 DOM 開始的地方。

          Shadow root: Shadow tree 的根節點。

          一個普通的DOM元素可以使用attachShadow方法來添加shadow DOM:

          let shadow = div.attachShadow({ mode: "open" });
          

          這樣就可以給div元素附加一個shadow DOM,然后我們可以和創建普通元素一樣創建任何元素添加到shadow下:

          let para = document.createElement('p');
          shadow.appendChild(para);
          

          當mode設為open,我們就可以通過div.shadowRoot獲取到Shadow DOM,如果設置的是closed,那么外部就獲取不到。

          所以前面的getParentOfChildren方法會判斷當前節點是不是一個Shadow host節點,是的話就返回它內部的Shadow root節點,否則返回自身。

          回到cloneChildren方法,它接收兩個參數:克隆的節點、原節點。

          function cloneChildren(clone, original) {
              // 獲取子節點,如果原節點是slot節點,那么會返回slot內的節點,
              const originalChildren = getRenderedChildren(original);
              let done = Promise.resolve();
              if (originalChildren.length !== 0) {
                  // 獲取原節點的計算樣式,如果原節點是shadow root節點,那么會獲取它所附加到的普通元素的樣式
                  const originalComputedStyles = getComputedStyle(
                      getRenderedParent(original)
                  );
                  // 遍歷子節點
                  util.asArray(originalChildren).forEach(function (originalChild) {
                      done = done.then(function () {
                          // 遞歸調用cloneNode方法
                          return cloneNode(
                              originalChild,
                              options,
                              originalComputedStyles,
                              ownerWindow
                          ).then(function (clonedChild) {
                              // 克隆完后的子節點添加到該節點
                              if (clonedChild) {
                                  clone.appendChild(clonedChild);
                              }
                          });
                      });
                  });
              }
              return done.then(function () {
                  return clone;
              });
          }
          

          首先通過getRenderedChildren方法獲取子節點:

          function getRenderedChildren(original) {
              // 如果是slot元素,那么通過assignedNodes方法返回該插槽中的節點
              if (util.isShadowSlotElement(original)) {
                  return original.assignedNodes();
              }
              // 普通元素直接通過childNodes獲取子節點
              return original.childNodes;
          }
          // 判斷是否是html slot元素
          function isShadowSlotElement(value) {
              return (
                  isInShadowRoot(value) && value instanceof getWindow(value).HTMLSlotElement
              );
          }
          // 判斷一個節點是否處于shadow DOM樹中
          function isInShadowRoot(value) {
              // 如果是普通節點,getRootNode方法會返回document對象,如果是Shadow DOM,那么會返回shadow root
              return (
                  value !== null &&
                  Object.prototype.hasOwnProperty.call(value, 'getRootNode') &&
                  isShadowRoot(value.getRootNode())
              );
          }
          // 判斷是否是shadow DOM的根節點
          function isShadowRoot(value) {
              return value instanceof getWindow(value).ShadowRoot;
          }
          

          這一連串的判斷,如果對于shadow DOM不熟悉的話大概率很難看懂,不過沒關系,跳過這部分也可以,反正就是獲取子節點。

          獲取到子節點后又調用了如下方法:

          const originalComputedStyles = getComputedStyle(
              getRenderedParent(original)
          );
          function getRenderedParent(original) {
              // 如果該節點是shadow root,那么返回它附加到的普通的DOM節點
              if (util.isShadowRoot(original)) {
                  return original.host;
              }
              return original;
          }
          

          調用getComputedStyle獲取原節點的樣式,這個方法其實就是window.getComputedStyle方法,會返回節點的所有樣式和值。

          接下來就是遍歷子節點,然后對每個子節點再次調用cloneNode方法,只不過會把原節點的樣式也傳進去。對于子元素又會遞歸處理它們的子節點,這樣就能深度克隆完整棵DOM樹。

          處理克隆的節點

          對于每個克隆節點,又調用了processClone(clone, node)方法:

          function processClone(clone, original) {
              // 如果不是普通節點,或者是slot節點,那么直接返回
              if (!util.isElement(clone) || util.isShadowSlotElement(original)) {
                  return Promise.resolve(clone);
              }
              return Promise.resolve()
                  .then(cloneStyle)// 克隆樣式
                  .then(clonePseudoElements)// 克隆偽元素
                  .then(copyUserInput)// 克隆輸入框
                  .then(fixSvg)// 修復svg
                  .then(function () {
                      return clone;
                  });
          }
          

          又是一系列的操作,穩住,我們繼續。

          克隆樣式

          function cloneStyle() {
              copyStyle(original, clone);
          }
          

          調用了copyStyle方法,傳入原節點和克隆節點:

          function copyStyle(sourceElement, targetElement) {
              const sourceComputedStyles = getComputedStyle(sourceElement);
              if (sourceComputedStyles.cssText) {
                 // ...
              } else {
                 // ...
              }
          }
          

          window.getComputedStyle方法返回的是一個CSSStyleDeclaration對象,和我們使用div.style獲取到的對象類型是一樣的,但是div.style對象只能獲取到元素的內聯樣式,使用div.style.color = '#fff'設置的也能獲取到,因為這種方式設置的也是內聯樣式,其他樣式是獲取不到的,但是window.getComputedStyle能獲取到所有css樣式。

          div.style.cssText屬性我們都用過,可以獲取和批量設置內聯樣式,如果要設置多個樣式,比單個調用div.style.xxx方便一點,但是cssText會覆蓋整個內聯樣式,比如下面的方式設置的字號是會丟失的,內聯樣式最終只有color:

          div.style.fontSize = '23px'
          div.style.cssText = 'color: rgb(102, 102, 102)'
          

          但是window.getComputedStyle方法返回的對象的cssText和div.style.cssText不是同一個東西,即使有內聯樣式,window.getComputedStyle方法返回對象的cssText值也是空,并且它無法修改,所以不清楚什么情況下它才會有值。

          假設有值的話,接下來的代碼我也不是很能理解:

          if (sourceComputedStyles.cssText) {
              targetElement.style.cssText = sourceComputedStyles.cssText;
              copyFont(sourceComputedStyles, targetElement.style);
          }
          
          function copyFont(source, target) {
              target.font = source.font;
              target.fontFamily = source.fontFamily;
              // ...
          }
          

          為什么不直接把原節點的style.cssText復制給克隆節點的style.cssText呢,另外為啥文本相關的樣式又要單獨設置一遍呢,無法理解。

          我們看看另外一個分支:

          else {
              copyUserComputedStyleFast(
                  options,
                  sourceElement,
                  sourceComputedStyles,
                  parentComputedStyles,
                  targetElement
              );
              // ...
          }
          

          先調用了copyUserComputedStyleFast方法,這個方法內部非常復雜,就不把具體代碼放出來了,大致介紹一下它都做了什么:

          1.首先會獲取原節點的所謂的默認樣式,這個步驟也比較復雜:

          1.1.先獲取原節點及祖先節點的元素標簽列表,其實就是一個向上遞歸的過程,不過存在終止條件,就是當遇到塊級元素的祖先節點。比如原節點是一個span標簽,它的父節點也是一個span,再上一個父節點是一個div,那么獲取到的標簽列表就是[span, span, div]。

          ? 1.2.接下來會創建一個沙箱,也就是一個iframe,這個iframe的DOCTYPE和charset會設置成和當前頁面的一樣。

          ? 1.3.再接下來會根據前面獲取到的標簽列表,在iframe中創建對應結構的DOM節點,也就是會創建這樣一棵DOM樹:div -> span -> span。并且會給最后一個節點添加一個零寬字符的文本,并返回這個節點。

          ? 1.4.使用iframe的window.getComputedStyle方法獲取上一步返回節點的樣式,對于width和height會設置成auto。

          ? 1.5.刪除iframe里前面創建的節點。

          ? 16.返回1.4步獲取到的樣式對象。

          2.遍歷原節點的樣式,也就是sourceComputedStyles對象,對于每一個樣式屬性,都會獲取到三個值:sourceValue、defaultValue、parentValue,分別來自原節點的樣式對象sourceComputedStyles、第一步獲取到的默認樣式對象、父節點的樣式對象parentComputedStyles,然后會做如下判斷:

          if (
              sourceValue !== defaultValue ||
              (parentComputedStyles && sourceValue !== parentValue)
          ) {
              // 樣式優先級,比如important
              const priority = sourceComputedStyles.getPropertyPriority(name);
              // 將樣式設置到克隆節點的style對象上
              setStyleProperty(targetStyle, name, sourceValue, priority);
          }
          

          如果原節點的某個樣式值和默認的樣式值不一樣,并且和父節點的也不一樣,那么就需要給克隆的節點手動設置成內聯樣式,否則其實就是繼承樣式或者默認樣式,就不用管了,不得不說,還是挺巧妙的。

          copyUserComputedStyleFast方法執行完后還做了如下操作:

          if (parentComputedStyles === null) {
              [
                  'inset-block',
                  'inset-block-start',
                  'inset-block-end',
              ].forEach((prop) => targetElement.style.removeProperty(prop));
              ['left', 'right', 'top', 'bottom'].forEach((prop) => {
                  if (targetElement.style.getPropertyValue(prop)) {
                      targetElement.style.setProperty(prop, '0px');
                  }
              });
          }
          

          對于我們傳入的節點,parentComputedStyles是null,本質相當于根節點,所以直接移除它的位置信息,防止發生偏移。

          克隆偽元素

          克隆完樣式,接下來就是處理偽元素了:

          function clonePseudoElements() {
              const cloneClassName = util.uid();
              [':before', ':after'].forEach(function (element) {
                  clonePseudoElement(element);
              });
          }
          

          分別調用clonePseudoElement方法處理兩種偽元素:

          function clonePseudoElement(element) {
              // 獲取原節點偽元素的樣式
              const style = getComputedStyle(original, element);
              // 獲取偽元素的content
              const content = style.getPropertyValue('content');
              // 如果偽元素的內容為空就直接返回
              if (content === '' || content === 'none') {
                  return;
              }
              // 獲取克隆節點的類名
              const currentClass = clone.getAttribute('class') || '';
              // 給克隆元素增加一個唯一的類名
              clone.setAttribute('class', `${currentClass} ${cloneClassName}`);
           // 創建一個style標簽
              const styleElement = document.createElement('style');
              // 插入偽元素的樣式
              styleElement.appendChild(formatPseudoElementStyle());
              // 將樣式標簽添加到克隆節點內
              clone.appendChild(styleElement);
          }
          

          window.getComputedStyle方法是可以獲取元素的偽元素的樣式的,通過第二個參數指定要獲取的偽元素即可。

          如果偽元素的content為空就不管了,總感覺有點不妥,畢竟我經常會用偽元素渲染一些三角形,content都是設置成空的。

          如果不為空,那么會給克隆的節點新增一個唯一的類名,并且創建一個style標簽添加到克隆節點內,這個style標簽里會插入偽元素的樣式,通過formatPseudoElementStyle方法獲取偽元素的樣式字符串:

          function formatPseudoElementStyle() {
              const selector = `.${cloneClassName}:${element}`;
              // style為原節點偽元素的樣式對象
              const cssText = style.cssText
              ? formatCssText()
              : formatCssProperties();
          
              return document.createTextNode(`${selector}{${cssText}}`);
          }
          

          如果樣式對象的cssText有值,那么調用formatCssText方法:

          function formatCssText() {
              return `${style.cssText} content: ${content};`;
          }
          

          但是前面說了,這個屬性一般都是沒值的,所以會走formatCssProperties方法:

          function formatCssProperties() {
              const styleText = util
                  .asArray(style)
                  .map(formatProperty)
                  .join('; ');
              return `${styleText};`;
          
              function formatProperty(name) {
                  const propertyValue = style.getPropertyValue(name);
                  const propertyPriority = style.getPropertyPriority(name)
                  ? ' !important'
                  : '';
                  return `${name}: ${propertyValue}${propertyPriority}`;
              }
          }
          

          很簡單,遍歷樣式對象,然后拼接成css的樣式字符串。

          克隆輸入框

          對于輸入框的處理很簡單:

          function copyUserInput() {
              if (util.isHTMLTextAreaElement(original)) {
                  clone.innerHTML = original.value;
              }
              if (util.isHTMLInputElement(original)) {
                  clone.setAttribute('value', original.value);
              }
          }
          

          如果是textarea或者input元素,直接將原節點的值設置到克隆后的元素上即可。但是我測試發現克隆輸入框也會把它的值給克隆過去,所以這一步可能沒有必要。

          修復svg

          最后就是處理svg節點:

          function fixSvg() {
              if (util.isSVGElement(clone)) {
                  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
                  if (util.isSVGRectElement(clone)) {
                      ['width', 'height'].forEach(function (attribute) {
                          const value = clone.getAttribute(attribute);
                          if (value) {
                              clone.style.setProperty(attribute, value);
                          }
                      });
                  }
              }
          }
          

          給svg節點添加命名空間,另外對于rect節點,還把寬高的屬性設置成對應的樣式,這個是何原因,我們也不得而知。

          到這里,節點的克隆部分就結束了,不得不說,還是有點復雜的,很多操作其實我們也沒有看懂為什么要這么做,開發一個庫就是這樣,要處理很多邊界和異常情況,這個只有遇到了才知道為什么。

          嵌入字體

          節點克隆完后接下來會處理字體:

          function embedFonts(node) {
              return fontFaces.resolveAll().then(function (cssText) {
                  if (cssText !== '') {
                      const styleNode = document.createElement('style');
                      node.appendChild(styleNode);
                      styleNode.appendChild(document.createTextNode(cssText));
                  }
                  return node;
              });
          }
          

          調用resolveAll方法,會返回一段css字符串,然后創建一個style標簽添加到克隆的節點內,接下來看看resolveAll方法都做了什么:

          function resolveAll() {
              return readAll()
                  // ...
          }
          

          又調用了readAll方法:

          function readAll() {
              return Promise.resolve(util.asArray(document.styleSheets))
                  .then(getCssRules)
                  .then(selectWebFontRules)
                  .then(function (rules) {
                      return rules.map(newWebFont);
                  });
          }
          

          document.styleSheets屬性可以獲取到文檔中所有的style標簽和通過link標簽引入的樣式,結果是一個類數組,數組的每一項是一個CSSStyleSheet對象。

          function getCssRules(styleSheets) {
              const cssRules = [];
              styleSheets.forEach(function (sheet) {
                  if (
                      Object.prototype.hasOwnProperty.call(
                          Object.getPrototypeOf(sheet),
                          'cssRules'
                      )
                  ) {
                      util.asArray(sheet.cssRules || []).forEach(
                          cssRules.push.bind(cssRules)
                      );
                  }
              });
              return cssRules;
          }
          

          通過CSSStyleSheet對象的cssRules屬性可以獲取到具體的css規則,cssRules的每一項也就是我們寫的一條css語句:

          function selectWebFontRules(cssRules) {
              return cssRules
                  .filter(function (rule) {
                      return rule.type === CSSRule.FONT_FACE_RULE;
                  })
                  .filter(function (rule) {
                      return inliner.shouldProcess(rule.style.getPropertyValue('src'));
                  });
          }
          

          遍歷所有的css語句,找出其中的@font-face語句,shouldProcess方法會判斷@font-face語句的src屬性是否存在url()值,找出了所有存在的字體規則后會遍歷它們調用newWebFont方法:

          function newWebFont(webFontRule) {
              return {
                  resolve: function resolve() {
                      const baseUrl = (webFontRule.parentStyleSheet || {}).href;
                      return inliner.inlineAll(webFontRule.cssText, baseUrl);
                  },
                  src: function () {
                      return webFontRule.style.getPropertyValue('src');
                  },
              };
          }
          

          inlineAll方法會找出@font-face語句中定義的所有字體的url,然后通過XMLHttpRequest發起請求,將字體文件轉換成data:URL形式,然后替換css語句中的url,核心就是使用下面這個正則匹配和替換。

          const URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
          

          繼續resolveAll方法:

          function resolveAll() {
              return readAll()
                  .then(function (webFonts) {
                      return Promise.all(
                          webFonts.map(function (webFont) {
                              return webFont.resolve();
                          })
                      );
                  })
                  .then(function (cssStrings) {
                      return cssStrings.join('\n');
                  });
          }
          

          將所有@font-face語句的遠程字體url都轉換成data:URL形式后再將它們拼接成css字符串即可完成嵌入字體的操作。

          說實話,Promise鏈太長,看著容易暈。

          內聯圖片

          內聯完了字體后接下來就是內聯圖片:

          function inlineImages(node) {
              return images.inlineAll(node).then(function () {
                  return node;
              });
          }
          

          處理圖片的inlineAll方法如下:

          function inlineAll(node) {
              if (!util.isElement(node)) {
                  return Promise.resolve(node);
              }
              return inlineCSSProperty(node).then(function () {
                  // ...
              });
          }
          

          inlineCSSProperty方法會判斷節點background和 background-image屬性是否設置了圖片,是的話也會和嵌入字體一樣將遠程圖片轉換成data:URL嵌入:

          function inlineCSSProperty(node) {
              const properties = ['background', 'background-image'];
              const inliningTasks = properties.map(function (propertyName) {
                  const value = node.style.getPropertyValue(propertyName);
                  const priority = node.style.getPropertyPriority(propertyName);
                  if (!value) {
                      return Promise.resolve();
                  }
                  // 如果設置了背景圖片,那么也會調用inliner.inlineAll方法將遠程url的形式轉換成data:URL形式
                  return inliner.inlineAll(value).then(function (inlinedValue) {
                      // 將樣式設置成轉換后的值
                      node.style.setProperty(propertyName, inlinedValue, priority);
                  });
              });
              return Promise.all(inliningTasks).then(function () {
                  return node;
              });
          }
          

          處理完節點的背景圖片后:

          function inlineAll(node) {
              return inlineCSSProperty(node).then(function () {
                  if (util.isHTMLImageElement(node)) {
                      return newImage(node).inline();
                  } else {
                      return Promise.all(
                          util.asArray(node.childNodes).map(function (child) {
                              return inlineAll(child);
                          })
                      );
                  }
              });
          }
          

          會檢查節點是否是圖片節點,是的話會調用newImage方法處理,這個方法也很簡單,也是發個請求獲取圖片數據,然后將它轉換成data:URL設置回圖片的src。

          如果是其他節點,那么就遞歸處理子節點。

          將svg轉換成data:URL

          圖片也處理完了接下來就可以將svg轉換成data:URL了:

          function makeSvgDataUri(node) {
              let width = options.width || util.width(node);
              let height = options.height || util.height(node);
          
              return Promise.resolve(node)
                  .then(function (svg) {
                      svg.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
                      return new XMLSerializer().serializeToString(svg);
                  })
                  .then(util.escapeXhtml)
                  .then(function (xhtml) {
                      const foreignObjectSizing =
                            (util.isDimensionMissing(width)
                             ? ' width="100%"'
                             : ` width="${width}"`) +
                            (util.isDimensionMissing(height)
                             ? ' height="100%"'
                             : ` height="${height}"`);
                      const svgSizing =
                            (util.isDimensionMissing(width) ? '' : ` width="${width}"`) +
                            (util.isDimensionMissing(height) ? '' : ` height="${height}"`);
                      return `<svg xmlns="http://www.w3.org/2000/svg"${svgSizing}> 
              <foreignObject${foreignObjectSizing}>${xhtml}</foreignObject>
             </svg>`;
                  })
                  .then(function (svg) {
                      return `data:image/svg+xml;charset=utf-8,${svg}`;
                  });
          }
          

          其中的isDimensionMissing方法就是判斷是否是不合法的數字。

          主要做了四件事。

          一是給節點添加命名空間,并使用XMLSerializer對象來將DOM節點序列化成字符串。

          二是轉換DOM字符串中的一些字符:

          function escapeXhtml(string) {
              return string.replace(/%/g, '%25').replace(/#/g, '%23').replace(/\n/g, '%0A');
          }
          

          第三步就是拼接svg字符串了,將序列化后的字符串使用foreignObject標簽包裹,同時會計算一下DOM節點的寬高設置到svg上。

          最后一步是拼接成data:URL的形式。

          恢復包裝元素

          在最開始的【檢查和包裝元素】步驟會替換掉節點類型不為1的節點,這一步就是用來恢復這個操作:

          function restoreWrappers(result) {
              while (restorations.length > 0) {
                  const restoration = restorations.pop();
                  restoration.parent.replaceChild(restoration.child, restoration.wrapper);
              }
              return result;
          }
          

          這一步結束后將節點轉換成svg的操作就結束了。

          將svg轉換成圖片

          現在我們可以回到draw方法:

          function draw(domNode, options) {
                  options = options || {};
                  return toSvg(domNode, options)
                      .then(util.makeImage)
                      .then(function (image) {
                          // ...
                      });
          }
          

          獲取到了svg的data:URL后會調用makeImage方法將它轉換成圖片,這個方法前面我們已經看過了,這里就不重復說了。

          將圖片通過canvas導出

          繼續draw方法:

          function draw(domNode, options) {
                  options = options || {};
                  return toSvg(domNode, options)
                      .then(util.makeImage)
                      .then(function (image) {
                          const scale = typeof options.scale !== 'number' ? 1 : options.scale;
                          const canvas = newCanvas(domNode, scale);
                          const ctx = canvas.getContext('2d');
                          ctx.msImageSmoothingEnabled = false;// 禁用圖像平滑
                          ctx.imageSmoothingEnabled = false;// 禁用圖像平滑
                          if (image) {
                              ctx.scale(scale, scale);
                              ctx.drawImage(image, 0, 0);
                          }
                          return canvas;
                      });
          }
          

          先調用newCanvas方法創建一個canvas:

          function newCanvas(node, scale) {
              let width = options.width || util.width(node);
              let height = options.height || util.height(node);
           // 如果寬度高度都沒有,那么默認設置成300
              if (util.isDimensionMissing(width)) {
                  width = util.isDimensionMissing(height) ? 300 : height * 2.0;
              }
              // 如果高度沒有,那么默認設置成寬度的一半
              if (util.isDimensionMissing(height)) {
                  height = width / 2.0;
              }
           // 創建canvas
              const canvas = document.createElement('canvas');
              canvas.width = width * scale;
              canvas.height = height * scale;
           // 設置背景顏色
              if (options.bgcolor) {
                  const ctx = canvas.getContext('2d');
                  ctx.fillStyle = options.bgcolor;
                  ctx.fillRect(0, 0, canvas.width, canvas.height);
              }
              return canvas;
          }
          

          把svg圖片繪制到canvas上后,就可以通過canvas.toDataURL()方法轉換成圖片的data:URL,你可以渲染到頁面,也可以直接進行下載。

          總結

          本文通過源碼詳細介紹了dom-to-image-more的原理,核心就是克隆節點和節點樣式,內聯字體、背景圖片、圖片,然后通過svg的foreignObject標簽嵌入克隆后的節點,最后將svg轉換成圖片,圖片繪制到canvas上進行導出。

          可以看到源碼中大量的Promise,很多不是異步的邏輯也會通過then方法來進行管道式調用,大部分情況會讓代碼很清晰,一眼就知道大概做了什么事情,但是部分地方串聯了太長,反倒不太容易理解。

          限于篇幅,源碼中其實還要很多有意思的細節沒有介紹,比如為了修改iframe的DOCTYPE和charset,居然寫了三種方式,雖然我覺得第一種就夠了,又比如獲取節點默認樣式的方式,通過iframe創建同樣標簽同樣層級的元素,說實話我是從來沒見過,再比如解析css中的字體的url時用的是如下方法:

          function resolveUrl(url, baseUrl) {
              const doc = document.implementation.createHTMLDocument();
              const base = doc.createElement('base');
              doc.head.appendChild(base);
              const a = doc.createElement('a');
              doc.body.appendChild(a);
              base.href = baseUrl;
              a.href = url;
              return a.href;
          }
          

          base標簽我也是從來沒有見過。等等。

          所以看源碼還是挺有意思的一件事,畢竟平時寫業務代碼局限性太大了,很多東西都了解不到,強烈推薦各位去閱讀一下。


          主站蜘蛛池模板: 日本一区二区三区日本免费| 精品一区二区三区在线视频| 精品国产免费一区二区三区香蕉| 激情啪啪精品一区二区| 日韩一区二区三区四区不卡| 中日韩精品无码一区二区三区| 成人精品一区二区三区电影| 中文字幕无码免费久久9一区9| 在线观看亚洲一区二区| 香蕉久久AⅤ一区二区三区| 亚洲av午夜福利精品一区| 亚洲综合色一区二区三区| 一区二区手机视频| 亚洲熟妇无码一区二区三区导航| 欧洲精品一区二区三区| 亚洲国产精品第一区二区| 中文字幕日韩一区二区三区不| 无码少妇A片一区二区三区| 国产成人无码AV一区二区| 精品少妇人妻AV一区二区三区| 日韩一区二区精品观看| 2022年亚洲午夜一区二区福利| 亚洲AⅤ无码一区二区三区在线 | 精品国产一区二区麻豆| 久久久一区二区三区| 国产成人一区二区三区视频免费| 国产免费一区二区三区VR| 日韩在线视频一区| 免费一区二区视频| 国产在线精品一区二区三区不卡 | AV天堂午夜精品一区| 亚洲一区二区高清| 久久久精品一区二区三区| 中文字幕一区二区人妻| 农村乱人伦一区二区| 精品国产天堂综合一区在线| 日本在线视频一区| 性色AV一区二区三区| 97se色综合一区二区二区| 韩国精品福利一区二区三区| 日韩A无码AV一区二区三区|