整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
們使用HTML5的Canvas在畫(huà)布中繪制的圖形都僅限于在畫(huà)布中使用，而無(wú)法在其他位置使用。這實(shí)際上是不理想的，特別是如果你希望導(dǎo)出漂亮的畫(huà)布繪圖作品，并將他保存在其他位置。其實(shí)畫(huà)布還有一個(gè)很有用的toDataURL方法，這個(gè)簡(jiǎn)單的方法能夠?qū)?huà)布繪圖轉(zhuǎn)換為一個(gè)數(shù)據(jù)URL，我們可以通過(guò)它在瀏覽器上顯示一個(gè)圖像。
這個(gè)方法實(shí)際上是很簡(jiǎn)單的，所以下面馬上使用這個(gè)方法來(lái)導(dǎo)出一個(gè)基本圖形，后面會(huì)詳細(xì)講述它的工作原理。
這段代碼將繪制一系列相互疊加的正方形，然后將圖像數(shù)據(jù)URL賦值給dataURL變量。你會(huì)看到這三個(gè)正方形在瀏覽器的顯示效果（參見(jiàn)圖1），但是現(xiàn)在它仍然是畫(huà)布圖像，而不是導(dǎo)出的圖像。下面介紹如何顯示導(dǎo)出的圖像。
圖1 準(zhǔn)備將要導(dǎo)出的畫(huà)布
這個(gè)例子中最關(guān)鍵的部分是dataURL變量，下面是你剛剛存儲(chǔ)到此變量中的值的一個(gè)片段：
實(shí)際的輸出比這些要長(zhǎng)得多，但是實(shí)際上只有前面4個(gè)單詞是我們現(xiàn)在關(guān)心的。前面3個(gè)單詞是data:image/png；它們表示后續(xù)內(nèi)容是一個(gè)PNG格式的圖像的數(shù)據(jù)URL。第4個(gè)單詞是base64，它表示數(shù)據(jù)采用base64編碼格式。這種格式經(jīng)常用于向使用文本數(shù)據(jù)的系統(tǒng)傳輸二進(jìn)制數(shù)據(jù)（例如圖像）。實(shí)際上，在base64后面的所有數(shù)字、字母和符號(hào)是以文本表示的畫(huà)布圖像。
注意：Canvas規(guī)范支持使用toDataURL方法導(dǎo)出其他類(lèi)型的圖像，然而，PNG支持是默認(rèn)的要求，而各個(gè)瀏覽器制造商可以自行決定是否支持其他格式的圖像。
這是一個(gè)不尋常的做法，但是如果復(fù)制dataURL變量中的字符串，然后粘貼到現(xiàn)代瀏覽器的地址欄（只要不超過(guò)輸入U(xiǎn)RL長(zhǎng)度限制），那么你就會(huì)看到在畫(huà)布中繪制的圖像。然后，在需要時(shí)，可以右鍵單擊圖像，將它保存到桌面。或者，你可以在例子中用生成的圖像替換canvas元素：
這段代碼使用jQuery創(chuàng)建了一個(gè)全新的HTML img元素，然后將圖像數(shù)據(jù)賦值給它的src屬性。最后，使用jQuery的replaceWith方法將canvas元素替換成剛剛創(chuàng)建的img元素。這樣，我們就得到一個(gè)圖像，其內(nèi)容與畫(huà)布上繪制的內(nèi)容完全相同。你可以通過(guò)右鍵單擊圖像，然后查看是否有“圖片另存為…”或類(lèi)似選項(xiàng)，從而確定它是否真是一個(gè)圖像（參見(jiàn)圖2）。
圖2 將保存的畫(huà)布圖像數(shù)據(jù)保存為一個(gè)HTML圖像元素
注意：需要指出的是，base64數(shù)據(jù)比它表示的原始二進(jìn)制圖像數(shù)據(jù)大50%。如果你處理的是少量較小的圖像，那么這就不是問(wèn)題，但是如果你處理的是大圖像和大量圖像，它就會(huì)有一些問(wèn)題。
實(shí)際上，你可以自由決定如何使用這些圖像數(shù)據(jù)，但是首先需要知道如何將畫(huà)布導(dǎo)出為圖像。你甚至可以使用畫(huà)布隨意繪制一個(gè)圖像，然后導(dǎo)出圖像，使用它作為CSS背景。
語(yǔ)：有時(shí)候在電腦上網(wǎng)的時(shí)候看見(jiàn)自己喜歡的網(wǎng)站或特別的頁(yè)面，自己已經(jīng)點(diǎn)擊電腦屏幕上方的星號(hào)收藏這個(gè)頁(yè)面了，但有時(shí)候看收藏夾又被密密麻麻的內(nèi)容弄得頭昏眼花，這時(shí)，我的處理方法是把收藏的頁(yè)面導(dǎo)出來(lái)，新建文件夾分類(lèi)整理好，這樣下次想看什么內(nèi)容就不用只看收藏夾里小小的字，而是在文件夾中能夠清楚的，按照自己的習(xí)慣，分好類(lèi)別的，整潔的頁(yè)面了。下面是具體操作，根據(jù)提示的1、2、3······進(jìn)行操作，就可以了。
首先打開(kāi)瀏覽器。找到自己喜歡的頁(yè)面，我打開(kāi)了自己的收藏夾，找到自己喜歡的頁(yè)面。然后點(diǎn)擊文字跳轉(zhuǎn)到具體的那個(gè)喜歡的頁(yè)面。
然后點(diǎn)擊屏幕上方，瀏覽器的三個(gè)點(diǎn)“···”。
然后點(diǎn)擊“更多工具”。
然后點(diǎn)擊“將頁(yè)面另存為”。
選擇文件夾，把頁(yè)面保存下來(lái)。
最后打開(kāi)電腦你保存文件在什么地方，就能在該地方找到保存的喜歡頁(yè)面，該頁(yè)面在文件夾里保存的形式為“html”文件。
分享成果，隨喜正能量】人生，有多少計(jì)較，就有多少痛苦。有多少寬容，就有多少歡樂(lè)。痛苦與歡樂(lè)都是心靈的折射，就像鏡子里面有什么，決定于鏡子面前的事物。心里放不下，自然成了負(fù)擔(dān)，負(fù)擔(dān)越多，人生越不快樂(lè)。計(jì)較的心如同口袋，寬容的心猶如漏斗。復(fù)雜的心愛(ài)計(jì)較，簡(jiǎn)單的心易快樂(lè)。
《VBA信息獲取與處理》教程是我推出第六套教程，目前已經(jīng)是第一版修訂了。這套教程定位于最高級(jí)，是學(xué)完初級(jí)，中級(jí)后的教程。這部教程給大家講解的內(nèi)容有：跨應(yīng)用程序信息獲得、隨機(jī)信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時(shí)操作，剪貼板應(yīng)用、Split函數(shù)擴(kuò)展、工作表信息與其他應(yīng)用交互，F(xiàn)SO對(duì)象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。程序文件通過(guò)32位和64位兩種OFFICE系統(tǒng)測(cè)試。是非常抽象的，更具研究的價(jià)值。
教程共兩冊(cè)，八十四講。今日的內(nèi)容是專(zhuān)題八“VBA與HTML文檔”的第二節(jié)上半部分：HTML文檔元素
大家好，我們這講開(kāi)始HTML的講解，為了認(rèn)識(shí)這種特殊的語(yǔ)言，我們要先看看這種語(yǔ)言中的各種元素個(gè)代表什么意義。上節(jié)中在講這種語(yǔ)言的特征時(shí)講過(guò)，標(biāo)簽是用來(lái)描述網(wǎng)頁(yè)的。瀏覽器讀取HTML文檔，識(shí)別標(biāo)簽，并按標(biāo)簽要求以網(wǎng)頁(yè)進(jìn)行顯示文本。大部分標(biāo)簽都是成隊(duì)出現(xiàn)的。
起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有文本，都叫做元素。也就是這個(gè)格式就是：
<起始標(biāo)簽:也叫元素名>元素的內(nèi)容<結(jié)束標(biāo)簽:/+元素名>
標(biāo)簽是可以擁有屬性的，屬性提供了元素的一些附加信息，起始標(biāo)簽，有時(shí)候格式如下：
<元素名 屬性名稱(chēng)=”屬性值”>
同時(shí)，元素是可以擁有元素的，即某個(gè)元素的內(nèi)容有時(shí)候是一個(gè)子元素。
元素這東西，比較抽象，我們可以把它且當(dāng)作一個(gè)對(duì)象來(lái)理解，例如工作簿對(duì)象，每個(gè)工作簿的名稱(chēng)都不一樣（屬性），每個(gè)工作簿里面都有工作表（子元素），每個(gè)表都有名稱(chēng)（屬性），里面填寫(xiě)的內(nèi)容也不一樣（元素的內(nèi)容）。
在上一講中我們舉了一個(gè)最為簡(jiǎn)單的實(shí)例來(lái)說(shuō)明HTML文檔：
<html>
<body>
<h1>學(xué)習(xí)VBA語(yǔ)言</h1>
<p>為了更好的掌握VBA的各個(gè)知識(shí)點(diǎn)，您可以參考我的第一套教程：VBA代碼解決方案</p>
</body>
</html>
我們將上面的格式修正一下，如下面：
<html>
<head> <!--注釋?zhuān)何臋n頭部，文檔相關(guān)消息，并不提供文檔內(nèi)容-->
<title>
VBA應(yīng)用提高篇
</title>
</head>
<body> <!--注釋?zhuān)何臋n主體-->
<h1>學(xué)習(xí)VBA語(yǔ)言</h1>
<p>為了更好的掌握VBA的各個(gè)知識(shí)點(diǎn)，您可以先參考我的第一套教程：VBA代碼解決方案</p>
</body>
</html>
將上面的內(nèi)容寫(xiě)入記事本中保存為.html文件：HTML基礎(chǔ)學(xué)習(xí)-1.html
然后我們雙擊打開(kāi)這個(gè)文件，看看瀏覽器的翻譯效果：
我們?cè)倏纯淳W(wǎng)頁(yè)的源碼：
從上面的框架代碼，我們可以看出，一般的頁(yè)面，都有html元素，其一般內(nèi)含兩個(gè)元素，一個(gè)是head元素，一個(gè)是body元素。Head元素僅僅說(shuō)明文檔的相關(guān)消息，并不展示文檔實(shí)體，body元素才是真正展示文檔主體的，所有要在頁(yè)面展示的元素，都要在body內(nèi)進(jìn)行書(shū)寫(xiě)。
1）HTML標(biāo)題 <h1> - <h6>
標(biāo)題（Heading）是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。標(biāo)題很重要，將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號(hào)的文本而使用標(biāo)題。因?yàn)橛脩?hù)可以通過(guò)標(biāo)題來(lái)快速瀏覽您的網(wǎng)頁(yè)，所以用標(biāo)題來(lái)呈現(xiàn)文檔結(jié)構(gòu)是很重要的。應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類(lèi)推。在HTML基礎(chǔ)學(xué)習(xí).HTML文件中我們已經(jīng)用到了標(biāo)題的元素
2）HTML水平線(xiàn) <hr />
<hr /> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線(xiàn)。可用于分隔內(nèi)容。
[待續(xù)]
本節(jié)參考文件：HTML基礎(chǔ)學(xué)習(xí)-1.html；HTML基礎(chǔ)學(xué)習(xí)-2.html
我20多年的VBA實(shí)踐經(jīng)驗(yàn)，全部濃縮在下面的各個(gè)教程中，教程學(xué)習(xí)順序：
【分享成果，隨喜正能量】人生，一歲有一歲的味道，一站有一站的風(fēng)景，你的年齡應(yīng)該成為你生命的勛章而不是你傷感的理由。 ??
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
