电脑保存图片html5,html5储存图片方法

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

我们知道Localstorage只能存储字符串，我们可以把图片转换为base64编码的字符串，不就可以存储了吗

图片编码的数据一般以如下开头

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

关键是如何转换呢？

我们canvas中有个toDataURL()方法，可以转换

存储图片函数书写

function saveImg( key ){

var img = new Image,

canvas = document.createElement(“canvas”),

ctx = canvas.getContext(“2d”),

src = “http://b.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=92e00c9b8f5494ee8722081f15ce87c3/29381f30e924b899c83ff41c6d061d950a7bf697.jpg“; // insert image url hereimg.crossOrigin = "Anonymous";

img.onload = function() {

canvas.width = img.width;

canvas.height = img.height;

ctx.drawImage( img, 0, 0 );

localStorage.setItem( key, canvas.toDataURL("image/png") );

}

img.src = src;

// make sure the load event fires for cached images too

if ( img.complete || img.complete === undefined ) {

img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

img.src = src;

}

}

获取图片函数书写

function get(div,key){//读取get(容器,图片)

var srcStr = localStorage.getItem(key);

var imgObj = document.createElement(‘img’);

imgObj.src = srcStr;

div.appendChild(imgObj);

}

应用

window.onload = function(){

saveImg(“savedImageData”);

var haoroomsbtn = document.getElementById(‘haorooms_btn’);

var oDiv = document.getElementById(‘haorooms_div’);

haoroomsbtn.onclick = function(){

get(oDiv,”savedImageData”);

}

}