实战网络营销、淘宝电商、设计培训教程中心
课程免费试听
新川教育
暑期班开班啦!学费大优惠中!仅限前20名.
教学方式任?。?.面授;2.远程在线教育;
URL与图像数据《HTML5系列教程23》

来源:新川教育 阅读数:2337
添加时间:2017-5-9   类别:网页设计教程

福建31选7:URL与图像数据《HTML5系列教程23》

福建31选7开奖时间 www.tzh2.cn 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!谢谢大家的观看。祝大家:身体健康、生活愉快!

培训教程公众号 
扫描左图添加公众号,海量视频教程免费学.
教学任?。?.面授;2.远程教学;
7月25号网络营销远程班准时开班,提交电话,免费试听.

      友情链接

  1. 关于我们
  2. 教学优势
  3. 资料下载
  4. 开班信息
  5. 学员作品
  6. 师资介绍
  7. 工作推荐
  1. 跨境电商
  2. UI设计
  3. 微信营销
  4. 办公文秘
  5. 美术培训
  6. 平面设计
  7. 联系方式
  8. site map

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

  • 临汾市脑卒中急救溶栓地图发布 2018-08-22
  • 少1人战世界杯!克罗地亚锋霸确认被开除 2018-08-22
  • 莎拉-布莱曼新专辑《追梦人》发行 打造奇妙视听盛宴 2018-08-15
  • 《中国教育报》电子版 2018-08-15
  • 人民网评:别再让“600瓶白酒”恶化政治生态 2018-08-12
  • 游戏代练在网吧里卖淫秽视频 被警方逮个正着 2018-08-12
  • 尼玛嘉措:红军走过的地方 2018-07-30
  • 有事没事扎针灸?别这样养生 2018-07-30
  • 延安时期中共领袖红色家风建设研究 2018-07-16
  • 河南宝丰:一位乡村工匠的“汝瓷梦” 2018-07-16
  • 653| 137| 614| 398| 152| 436| 476| 672| 767| 374|