<dl id="umg2o"></dl>
<sup id="umg2o"></sup>
  • <sup id="umg2o"></sup>
  • 課程免費試聽
    網絡營銷培訓專家:新川教育
       著名網絡營銷培訓、淘寶電商培訓機構.
    實力機構,系統實戰!免費試聽.
    網絡營銷,淘寶培訓課程優惠
    URL與圖像數據《HTML5系列教程23》

    來源:新川教育 閱讀數:3285
    添加時間:2017-5-9   類別:網頁設計教程

    URL與圖像數據《HTML5系列教程23》

    URL與圖像數據《HTML5系列教程23》

        傳統的圖像存儲使用img標簽將服務器d圖片引用到頁面,而在Canvas中各種圖像數據都有不一樣的展現和存儲方式,圖片會轉換成Base64編碼的字符串形式,并儲存在URL中,這對于提升網站的加載速度有很大的幫助。現在我們就來介紹URL與圖像數據的一些存儲方法和用法。


    1.存儲圖像數據

        如果希望某些圖像數據與HTML或者CSS文件保存在一起,以便用戶在瀏覽的時候能夠通過緩存快速訪問,這時候就可以使用HTML5中特殊的圖像存儲方式,即使用Base64編碼的字符串形式,將圖像存儲在URL中。下圖的代碼顯示了如何使用這種方式存儲圖像數據:

    HTML5中利用Canvas存儲圖像數據代碼

    2.彩色轉為灰度

        我們通過getlmageData函數和putlmageData函數成功反轉了一個圖像的顏色,使用者兩個函數,通過不同的算法,還可以將彩色圖像轉換成灰度圖像,演示代碼如圖:

    在HTML5利用Canvas元素將彩色圖轉為灰度代碼

    3.圖像數據URL

        如果要將圖像數據以URL的形式保存,首先需要將這些圖像文件轉換成Base64編碼的字符串。在網上有很多的工具可以使用,這里就不做演示了,只要打開百度搜索一下就會有很多的在線生成工具的。


    4.將繪制的圖形保存為圖像文件

        使用Canvas不但可以加載圖像文件,還可以將繪制的圖形文件保存成圖像文件。保存Canvas圖像文件的代碼如圖:

    在HTML中利用Canvas將繪制的圖形保存為圖像文件代碼

        在谷歌瀏覽器中預覽效果

    在HTML中利用Canvas將繪制的圖形保存為圖像文件瀏覽效果

        在HTML5中利用Canvas元素對URL與圖像數據的一些存儲方法和用法就介紹到這里。了解更多精彩資訊請添加我們的官方微信:pyyuanxing!謝謝大家的觀看。祝大家:身體健康、生活愉快!

          友情鏈接

    1. 辦公文秘
    2. 美術培訓
    3. 營銷就業班
    4. 資料下載
    5. 學員作品
    6. 學校圖片
    7. 聯系方式
    8. site map

    地址: 廣州市番禺區市橋街橋東路63號銀座中心7樓全層(番禺中醫院旁邊,百德中心斜對面)   
    電話: 020-84829690   咨詢QQ:522961923  點擊這里給我發消息 
    咨詢微信:18926224142   微信公眾號:新川教育
    Copyright 2005-2020廣州新川教育 All rights reserved.粵ICP備11014454號-6

    贵州11先5开奖结果