`
sailei1
  • 浏览: 124658 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5 离线读取图片

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body >

<img id='xx' src='data:image/gif;base64,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
2pkxuQyiQjtI5U0Fwcjwr1RQFFFFB//Z'/>
<br/>

离线图片：<br/>
<script>








var storage = window.localStorage;
var details = {author:"isaac","description":"fresheggs","rating":100};
storage.setItem("details",JSON.stringify(details));
details = JSON.parse(storage.getItem("details"));
navigator.onLine ? 'online' : 'offline';
var  image=document.getElementById('xx'); 
console.log(image.src);
storage.setItem('src',image.src );

var img = new Image();
img.src =storage.getItem("src");
      img.onload = function(){
    	  //var can = document.getElementById('canvas');
    	  var can =  document.createElement("canvas");
    	  document.body.appendChild(can);
        can.width  = img.width;
        can.height = img.height;
        var ctx = can.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
      
      }
 
</script>

</body>
</html>
分享到：
| Sencha Touch 2 Carousel 模仿list itemt ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    webzip离线浏览器软件

    WebZIP 是著名的离线浏览器软件，在它的帮助下你能够完整下载网站的内容，或者你也可以选择自行设置下载的层数、文件类型、网页与媒体文件的定位以及网址过滤器，以便按己所需地获取网站内容。你下载到本地硬盘中的...

    精品离线浏览器(都含注册码)_5款合集打包下载

    　WebZIP 是著名的离线浏览器软件，在它的帮助下你能够完整下载网站的内容，或者你也可以选择自行设置下载的层数、文件类型、网页与媒体文件的定位以及网址过滤器，以便按己所需地获取网站内容。你下载到本地硬盘中...

    完整版《HTML5高级程序设计》5

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update...

    HTML5高级程序设计

    本书最后探索了离线web 应用并展望了html5 未来的发展前景。 本书面向有一定经验的web 应用开发人员，对html5 及未来web 应用技术发展抱有浓厚兴趣的读者也可以学习参考。 第1章 html5概述 1 1.1 html5发展史 1 ...

    完整版《HTML5高级程序设计》2

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update...

    WebReapter 离线浏览器（将网页整站下载到本地保存）

    WebReaper(离线浏览器)一个不错的离线浏览器，可以使用它将整个网站下载下来，只需要输入这个网站的网址就行了,方便快捷。没网时我们一样可以看自己喜欢的网站。WebReaper是网络爬虫或蜘蛛，它可以工作的方式，通过...

    完整版《HTML5高级程序设计》4

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update...

    Google Maps API v3离线开发包，带本地地图示例数据

    1、本离线开发包内仅实现了功能离线，即js源码和部分控件图片的离线，地图仍然使用Google Tile。 2、从思路上讲，将Google Tile下载到本地，或者自行切割tile，都是一种将地图离线的方法，原则上都可以实现。关于...

    HTML5程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf

    《深入HTML5编程(第 2版)》后探索了离线Web应用并展望了HTML5未来的发展前景。 　《深入HTML5编程(第 2版)》面向有一定经验的Web应用开发人员，对HTML5及未来Web应用技术发展有浓厚兴趣的读者也可以学习参考。 第1...

    HTML5高级程序设计.part5

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为...

    HTML5从入门到精通（第2版）配套光盘资源资源【完整版】.txt

    包括HTML基础、HTML文件基本标记、设计网页文本内容、使用列表、使用超链接、使用图像、表格的应用、层——div标签、编辑表单、多媒体页面、HTML5的新特性、HTML5与HTML4的区别、HTML5的结构、HTML5中的表单、文件与...

    完整版《HTML5高级程序设计》3

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update...

    HTML5高级程序设计.part4

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为...

    HTML5高级程序设计.part1

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为...

    HTML5高级程序设计.part2

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为...

    HTML5高级程序设计.part3

    10.3 使用HTML5离线Web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 10.3.2 创建构成界面的HTML和CSS 208 10.3.3 创建离线JavaScript 209 10.3.4 检查applicationCache的支持情况 210 10.3.5 为...

    DrawR:一个纯HTML5客户端离线绘图应用

    一个纯HTML5客户端离线绘图应用 创建 DrawR 是因为我特别有兴趣为 Web 制作一个真正的绘图（而不是图像编辑）应用程序，而无需 Web 服务器（仅静态文件）能够充当真正的离线应用程序。 目前支持 层与： 不透明度 ...

    从入门到精通HTML5——PDF——网盘链接

    　15.1.2 使用blob接口获取文件的类型与大小 282 　15.1.3 通过类型过滤选择的文件 283 　15.2　使用FileReader接口读取文件 285 　15.2.1 检测浏览器是否支持FileReader接口 285 　15.2.2　FileReader接口的方法 ...

    夸克：离线时保持快乐| 世界上第一个离线搜索引擎

    从获取离线代码搜索引擎 这个出色的扩展使您能够： 将网页作为单个HTML页面保存到本地计算机 将网页保存在浏览器中以供离线阅读 安全地分析您的网络历史记录 离线玩游戏 离线浏览图像 即使您没有连接到互联网，也...

    HTTrack软件，一款C语言开发的离线浏览器，用于网站复制

    HTTrack是一个离线浏览器软件，允许您从 Internet 下载到本地目录，递归构建所有目录，从服务器获取 html、图像和其他文件到您的计算机。 HTTrack安排原始站点的相关链接结构。只需在浏览器中打开“镜像”网站的一个...

Magicbox
Global site tag (gtag.js) - Google Analytics