<dl id="umg2o"></dl>
<sup id="umg2o"></sup>
  • <sup id="umg2o"></sup>
  • 网上教学
    网络营销培训专家新川教育
       著名实战网络营销课程培训机构.
    网络营销,淘宝培训课程优惠
    URL与图像数据《HTML5系列教程23》

    来源:新川教育 阅读数:3549
    添加时间:2017-5-9   类别?#21644;?#39029;设计教程

    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编码的字符串。在网上有很多的工具可以使用,这里就不做演示了,?#28784;?#25171;开百度搜索一下就会有很多的在线生成工具的。


    4.将绘制的图形保存为图像文件

        使用Canvas不但可以加载图像文件,还可以将绘制的图形文件保存成图像文件。保存Canvas图像文件的代码如图:

    在HTML中利用Canvas将绘制的图形保存为图像文件代码

        在谷歌浏览器中预览效果

    在HTML中利用Canvas将绘制的图形保存为图像文件浏览效果

        在HTML5中利用Canvas元素对URL与图像数据的一些存储方法和用法就介绍到这里。了解更多精?#39318;?#35759;请添加我们的官方微信:pyyuanxing!谢谢大家的观看。祝大家:身体健康、生活愉快!

          友情链接

    1. 办公文秘
    2. 美术培训
    3. SEM培训
    4. UI设计
    5. PS图片处理
    6. 营销就业班
    7. 跨境电商
    8. 微信营销
    1. 开班信息
    2. 教学优势
    3. 师?#24335;?#32461;
    4. 资料下载
    5. 工作推荐
    6. 学员作品
    7. 学校图片
    8. site map

    地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医?#21495;员?百德中心斜对面)   
    电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息 
    咨询微信:18926224142     微信公众号:新川教育
    Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6

    粤公网安备 44011302001949号
    贵州11先5开奖结果