把图片存储 canvas原生API转成base64
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的更多相关文章
- Canvas原生API(纯CPU)计算并渲染三维图
Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...
- canvas将图片转成base64格式 以及 验证图片是否透明
logoImgUpload:function(file) { let self = this; self.formatUpload(file); let reader = new FileReader ...
- Canvas将图片转换成base64形式展示的常见问题及解决方案
导航1:https://blog.csdn.net/weixin_30668887/article/details/98822699 导航2:https://stackoverflow.com/que ...
- PHP数据库操作:从MySQL原生API到PDO
本文将举详细例子向大家展示PHP是如何使用MySQL原生API.MySQLi面向过程.MySQLi面向对象.PDO操作MySQL数据库的. 为了后面的测试,先建立数据库表test.包含表名user,s ...
- 使用IOS7原生API进行二维码条形码的扫描
使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析 ...
- 玩转nodeJS系列:使用原生API实现简单灵活高效的路由功能(支持nodeJs单机集群),nodeJS本就应该这样轻快
前言: 使用nodeJS原生API实现快速灵活路由,方便与其他库/框架进行整合: 1.原生API,简洁高效的轻度封装,加速路由解析,nodeJS本就应该这样轻快 2.不包含任何第三方库/框架,可以灵活 ...
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- js绝对地址图片转换成base64的方法
//将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...
- JS 如何将“在线图片资源”转换成“base64”
在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...
随机推荐
- Mybatis将mapper映射文件配置到recources下
关于为什么要将Mybatis的mappers.xml文件配置到resources目录下的粗浅看法: (1).使文件目录更加清晰.resources文件目录下通常为配置文件,所以将Mappers.xml ...
- Oracle视图(view)传参数教程
废话不多说,直接上例子! 创建包: create or replace package p_view_param is function set_param(num number) return nu ...
- grafana初级入门
grafana初级入门 预备知识 Metrics.Tracing和Logging的区别 监控.链路追踪及日志作为实时监测系统运行状况,这三个领域都有对应的工具和解决方案. Metrics 监控指标的定 ...
- [使用多仓库解决] idea maven 下载源码出现:Cannot download sources Sources not found for: xxx
根本原因 依赖托管仓库的库存不足.有的仓库,就是没有团队上传这个依赖.所以多加几个镜像源,总有一个仓库能找到. 解决方案 修改 maven 默认配置文件 "C:\Users\<user ...
- Python 字典(键值对)
Python 字典(键值对) 创建字典 特性:字典中的键不能变,而且唯一 格式:变量名={"键1":值1,"键2":值2} 函数 作用 dict() 强制转换为 ...
- vue的seo问题?
seo关系到网站排名, vue搭建spa做前后端分离不好做seo, 可通过其他方法解决: SSR服务端渲染: 将同一个组件渲染为服务器端的 HTML 字符串.利于seo且更快. vue-meta-in ...
- 为什么Java中不支持多重继承?
我发现这个 Java 核心问题很难回答,因为你的答案可能不会让面试官满意,在大多数情况下,面试官正在寻找答案中的关键点,如果你提到这些关键点,面试官会很高兴.在 Java 中回答这种棘手问题的关键是准 ...
- char型变量中能不能存贮一个中文汉字?为什么?
char型变量是用来存储Unicode编码的字符的,unicode编码字符集中包含了汉字,所以,char型变量中当然可以存储汉字啦.不过,如果某个特殊的汉字没有被包含在unicode编码字符集中,那么 ...
- 是否使用过 Redis 集群,集群的原理是什么?
1).Redis Sentinal 着眼于高可用,在 master 宕机时会自动将 slave 提升为 master,继续提供服务. 2).Redis Cluster 着眼于扩展性,在单个 redis ...
- 本地连接MySQL云服务器步骤与解决方案
云服务器:aliyun MySQL 版本:mysql8 第一步首先,检查云服务器的 网络与安全 -> 安全组 是否开放了(MySQL)3306端口 第二步,登陆云服务器上的MySQL,检查需要远 ...