把图片存储 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 ...
随机推荐
- EXCEL数据处理-经纬度转换:度分秒转换为小数
背景:工作中遇见此问题,整理了一下,花点时间随便总结下,希望能帮助到大家! 业务描述:红框内110°10′15"这种格式的经度,我想转换为110.36534这种格式. 步骤: 1.现将110 ...
- 先知xss挑战赛学习笔记
xss游戏 游戏地址:http://ec2-13-58-146-2.us-east-2.compute.amazonaws.com/ LEMON参考wp地址 1. 文件上传 源码如下 <?php ...
- windows server 2008r2 在vmware里自动关机
虚拟机没有激活所以导致自动关机,试试激活它.<wiz_tmp_tag id="wiz-table-range-border" contenteditable="fa ...
- S7-1200学习记录
型号:CPU 1212C DC/DC/DC 硬件包括CPU模块.信号模块(输入输出).通信模块.屏幕面板 1.通信模块 S7-1200最多可以添加3块通信模块,可以使用点对点通信模块.PROFIBUS ...
- bzoj4032/luoguP4112 [HEOI2015]最短不公共子串(后缀自动机+序列自动机上dp)
bzoj4032/luoguP4112 [HEOI2015]最短不公共子串(后缀自动机+序列自动机上dp) bzoj Luogu 题解时间 给两个小写字母串 $ A $ , $ B $ ,请你计算: ...
- CF1504X Codeforces Round #712
CF1504D Flip the Cards(找规律+贪心) 题目大意:给你n张牌,正反面都有数字,保证所有牌上的数字在$[1,2n]$内且互不相同.你可以翻转任意张牌,接下来需要把牌按正面的数字从小 ...
- 如何看待malloc产生内存碎片
上代码直接研究: int main() { int *heap_d; int *heap_e; int *heap_f; heap_d = (int *)malloc(10); heap_e = (i ...
- jQuery--基本过滤选择器
1.基本过滤选择器介绍 基本过滤器: :first 获取数组中第一个元素 :last 获取数组中最后一个 :eq(selector) 获取指定索引 :gt(index) 大于 ...
- C语言中的bool类型 stdbool.h
C语言的C99标准中已经可以使用bool类型了,但有些小伙伴可能受制于编译器等原因还无法使用,我就从最新版的VS2019 中,找到了stdbool.h这个头文件的定义,其实就是一堆宏的定义,代码如下: ...
- 使用Visual Studio查看C++类内存分布
书上类继承相关章节到这里就结束了,这里不妨说下C++内存分布结构,我们来看看编译器是怎么处理类成员内存分布的,特别是在继承.虚函数存在的情况下. 工欲善其事,必先利其器,我们先用好Visual Stu ...