把图片存储 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看别人网站的疑惑。

时间： 2024-10-19 17:14:16

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

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

logoImgUpload:function(file) { let self = this; self.formatUpload(file); let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var img = new Image(); img.src = e.target.result; self.isAlphaBackground = false; // 缩放

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

使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析二维码的接口.经过测试,使用原生API扫描和处理的效率非常高,远远高于第三方库. 一.使用方法示例 官方提供的接口非常简单,代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

canvas常用api文件

初识js起便开始接触canvas,总觉得h5是未来发展的趋势,更是门很装逼的艺术.其实canvas并不是html而是js,因为属于html标签,暂时把它放在html里写.个人对于canvas下的原生“弱智”画图api比较感兴趣,而对于cocos2d-html5这样的框架没啥兴趣,曾经也在公司利用cocos2d框架做过游戏,因为终究不是做游戏的料,放弃了,但是对于canvas的爱好,是不会变的.利用canvas,几行代码就能有神奇的装逼效果.已经一年多没接触canvas了,等我有时间补上canva

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

//将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); //为了解决跨域,可以直接img.crossOrigin=''就能解决图片跨域问题 img.crossOrigin = 'xes'; img.onload = function(){ canvas

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

使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析二维码的接口.经过测试,使用原生API扫描和处理的效率非常高,远远高于第三方库. 一.使用方法示例 官方提供的接口非常简单,代码如下: @interface ViewController ()<AVCaptureMetadataOutputObjectsDelegate>//用于处理采集信息的代理

将input type=&quot;file&quot; 类型的图片文件转成base64

带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签还要定义一个onchange事件,并传入一个event参数. <div> <input type="file" id="imgTest" type="file" onchange="imgChange(event)&quo

html5将图片转换成base64的实例代码

这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能. 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http

node中https请求 | 实现https的请求，获取图片，然后转成base64字节码

get请求 下面实现https的请求,获取图片,然后转成base64字节码 this.checkCodeUrl = 'https://www.test.com/kaptcha.jsp'; var https = require('https'); https.get(this.checkCodeUrl,function(res){ var datas = []; var size = 0; res.on('data', function(data){ datas.push(data); size

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

在实现html2canvas截图的功能时,发现不支持"图片跨域",这可伤脑筋了: 偶然发现如果将"在线图片资源"转换成base64后,用base64渲染,这样完美解决问题: 因为图片时跨域的,所以我们在转换过程中需要加一段代码,用来支持跨域: image.crossOrigin = "*"; 完整代码如下: function getBase64Image(img) { var canvas = document.createElement(&qu