04/8
2017
如果我们要在网页上处理图片，对于字符形式接收到的图片（比如用ajax获取的图片）可以将其转换为blob对象。但对于img标签（或通过new Image()对象获取的图片）来说，它们不是字符形式，而是html元素，不能转换成blob对象。
要使用这样的图片，我们可以先将图片绘制到canvas里，再使用canvas对象的toDataURL方法获取图片的base64编码（也就是data: URI）。
ps：blob对象和data: URI都可以用a标签的download属性来下载图片~
1.如下代码展示用image对象获取一张图片并转换为base64：
var dataURL="";
var Img = new Image();
Img.crossOrigin = "Anonymous";
Img.src="/f/head15.jpg";
Img.onload=function(){
var canvas = document.createElement("canvas");
canvas.width=Img.width;
canvas.height=Img.height;
canvas.getContext("2d").drawImage(Img,0,0,Img.width,Img.height); //将图片绘制到canvas中
dataURL=canvas.toDataURL('image/png'); //转换图片为dataURL
};
注意image对象的crossOrigin 属性：
Img.crossOrigin = "Anonymous";
它在下面的情况中是有用的：
图片跨域了，但有个好消息是图片的服务器允许跨域。这时你加上这个crossOrigin属性就ok了，图片可以正常用。
但如果图片跨域了，并且图片的服务器【不允许】跨域，那你加上也没用，无解。
如果没解决跨域限制，canvas.toDataURL方法将报错，导致程序终止：
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
2.如下代码展示从页面上的img标签获取图片内容，并将其转换为base64：
// 记得要在图片加载完成后执行
var image=document.querySelector("img"),
canvas,
dataURL;
image.onload=function () {
canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
dataURL=canvas.toDataURL('image/png'); //转换图片为dataURL
};
3.如果我们是要把图片用于下载的，那么对于色彩复杂、宽高较大的图片，用png格式显然体积会很大，可以转换成jpg的：
dataURL=canvas.toDataURL('image/jpeg',0.5);
经试验完全可用。另外chrome的话还可指定为 image/webp 。
4.扩展：现在各大浏览器只支持转换成png和jpeg格式，如果需要gif格式或bmp格式怎么办呢？可以用canvas2image.js。
canvas2image支持将canvas里的图片数据转换为png、jpeg、gif、bmp格式，并可修改生成的图片的宽高。
你可以仅转换但不下载，也可直接下载。like this：
Canvas2Image.saveAsImage(canvasObj, width, height, type) Canvas2Image.saveAsPNG(canvasObj, width, height) Canvas2Image.saveAsJPEG(canvasObj, width, height) Canvas2Image.saveAsGIF(canvasObj, width, height) Canvas2Image.saveAsBMP(canvasObj, width, height) Canvas2Image.convertToImage(canvasObj, width, height, type) Canvas2Image.convertToPNG(canvasObj, width, height) Canvas2Image.convertToJPEG(canvasObj, width, height) Canvas2Image.convertToGIF(canvasObj, width, height) Canvas2Image.convertToBMP(canvasObj, width, height)
使用canvas将图片转换为base64编码
12/30
2016
本文要做的事情是，用户通过file控件选择一个文件，之后我们使用FileReader将其转换为base64编码，并储存在LocalStorage里。
如下代码，在用户选择一张图片时，程序会将图片以base64编码保存到LocalStorage里，然后把这张图作为网页的背景图片。
<input type="file" name="img">
<br>
<input type="button" name="clearMyBG" value="清除我的设置">
<script>
// 尝试读取localStorage中存储的背景图片，如果有就设置
var myBGStorage = localStorage.getItem("myBG");
if (myBGStorage) {
document.body.style.backgroundImage="url("+myBGStorage+")";
}
// 将选择的文件储存在localStorage里
document.querySelector("input[name=img]").addEventListener("change",function(){
if (!/image\/\w/.test(this.files[0].type)) {
alert("请确保文件为图像类型");
return false;
}
setMyBG(this.files[0]);
})
//清除存储的背景图片
document.querySelector("input[name=clearMyBG]").addEventListener("click",function(){
localStorage.removeItem("myBG");
alert("设置已清除");
location.reload();
})
//转换、存储和设置背景图片
function setMyBG (imgfile){
var fileReader = new FileReader();
fileReader.readAsDataURL(imgfile);
fileReader.onload=function(){
var result = this.result;
document.body.style.backgroundImage="url("+result+")";
try {
localStorage.setItem("myBG", result);
}catch (e) {
console.log("Storage failed: " + e);
}
}
}
</script>
如下图，是localStorage中存储的键值对。注意localStorage的值都会被转换成string类型的。
相关资料：
FileReader localStorage
有一个检测localStorage容量上限的工具：
Test of localStorage
它会在你的localStorage里存储数据，直到塞满为止。chrome约为5M。据说opera和firefox可以自己调整限制，厉害了。
Read More →
