1.LocalStorage有什么用?

2.LocalStorage的普通用法以及如何存储图片。

首先介绍下什么是LocalStorage

它是HTML5的一种最新储存技术。但它只能储存字符串。以前的这部分工作一直是由cookie来完成。但是,cookie只能存储5k左右的数据。而localstorage可以存储5M!! 这无论是PC端还是移动端,都非常的令人激动!

既然有这样轻微的了解之后。我们大概就能明白它的用途了。

这两天我刚好做了个移动端的项目,页面没什么内容,却有两张大大的图片。(把页面直逼200多KB)为了提升页面的加载效果,我非常渴望的试用了下localstorage来缓存图片。

但是由于localstorage只能存储字符串,那用什么办法能让它存储一张图片呢?

这时我们能想到图片的格式是能转换的,我们能使用canvas来做到这点。接着,我们看代码。

我们写了这样的一个函数,我们只需要自己定义 初始img所需的src 把src的路径字符串 作为第二个参数传入函数。

这样我们就能set每一个localstorage的key。

然后如果我们要取出这个图片的话。那我们就直接用localstorage.getItem(‘key’)的API  把取出来的base64的一堆字符。赋予到src上,或者是background的url里。这样下次打开页面就是直接取出该图片了。是不是很酷?!

 

我们可以看看这个的效果。这也解决了我以前F12看别人网站的疑惑。

把图片存储 canvas原生API转成base64的更多相关文章

  1. Canvas原生API(纯CPU)计算并渲染三维图

    Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...

  2. canvas将图片转成base64格式 以及 验证图片是否透明

    logoImgUpload:function(file) { let self = this; self.formatUpload(file); let reader = new FileReader ...

  3. Canvas将图片转换成base64形式展示的常见问题及解决方案

    导航1:https://blog.csdn.net/weixin_30668887/article/details/98822699 导航2:https://stackoverflow.com/que ...

  4. PHP数据库操作:从MySQL原生API到PDO

    本文将举详细例子向大家展示PHP是如何使用MySQL原生API.MySQLi面向过程.MySQLi面向对象.PDO操作MySQL数据库的. 为了后面的测试,先建立数据库表test.包含表名user,s ...

  5. 使用IOS7原生API进行二维码条形码的扫描

    使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析 ...

  6. 玩转nodeJS系列:使用原生API实现简单灵活高效的路由功能(支持nodeJs单机集群),nodeJS本就应该这样轻快

    前言: 使用nodeJS原生API实现快速灵活路由,方便与其他库/框架进行整合: 1.原生API,简洁高效的轻度封装,加速路由解析,nodeJS本就应该这样轻快 2.不包含任何第三方库/框架,可以灵活 ...

  7. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  8. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  9. JS 如何将“在线图片资源”转换成“base64”

    在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...

随机推荐

  1. Mybatis执行流程浅析

    从三个主要的对象SqlSessionFactoryBuilder->SqlSessionFactory->SqlSession说起 inputStream = Resources.getR ...

  2. 4月12日 python学习总结 继承和派生

    一.继承 什么是继承:   继承是一种新建类的方式,在python中支持一个子类继承多个父类   新建类称为子类或派生类   父类可以称之为基类或者超类   子类会遗传父类的属性 2.  为什么继承 ...

  3. 实现一个cache

    实现一个LRU cache,定义get函数和set函数,cache是固定长度的,当cache已经满,那么就删除一直没有被更新的记录,然后将新的记录放进去. LRU: 全称是Least Recently ...

  4. 反射操作dll类库之普通类和各种方法调用

    一.使用方法 查找DLL文件, 通过Reflection反射类库里的各种方法来操作dll文件 二.步骤 加载DLL文件 Assembly assembly1 = Assembly.Load(" ...

  5. 使用SpringDataJdbc的@Query注解实现自动映射结果集 ----- RowMapper接口

    使用@Query注解的时候,常常需要写sql来映射非域类的实例,通常的做法就是 实现 RowMapper接口,然后new实例一个一个的设置值进去...为此.出世了自动映射工具类 注意事项:此抽象类只是 ...

  6. NULL 是什么意思 ?

    NULL 这个值表示 UNKNOWN(未知):它不表示""(空字符串).对 NULL 这 个值的任何比较都会生产一个 NULL 值.您不能把任何值与一个 NULL 值进行比 较,并 ...

  7. java-StringBuilder

    一个可变的字符序列. String类的对象内容不可以改变,所以每当进行字符串恶拼接时,总是会在内存中创建一个新的对象,所以经常改变内容的字符串 所以最好不要用String,因为每次生成的对象都会对系统 ...

  8. http和https到底区别在哪

    一.Http和Https的基本概念 Http:超文本传输协议(Http,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.设计Http最初的目的是为了提供一 ...

  9. 学习openldap02

    III (二十二)OpenLDAP 目录服务: 目录是一类为了浏览和搜索数据而设计的特殊的数据库,目录服务是按照树状形式存储信息,目录包含基于属性的描述性信息,并且支持高级的过滤功能,如microso ...

  10. JavaScript中函数节流的理解

    函数节流的原理 函数节流,就是对会频繁触发的函数事件做一些限制,让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发.一般我们会给他起一个名字throttle.也就是节流的意思.一般这样的函数 ...