将图片转换base64格式,data:image/png;base64是什么?

一、我们在看代码时经常在img或css背景图片中看到:

src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具, 后面跟的一串代码就相当于链接地址。
二、目前,Data URL scheme 支持的类型:

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
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图片数据

三、js将图片转化为base64(2种方法)

  1. 利用canvas 将图片转化为base64 编码格式
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
   img = new Image;
   img.src="./vheider.jpg";
   //img.setAttribute('crossOrigin', 'anonymous')  // 图片跨域时有用
   img.onload = function(){
       canvas.height = img.height;
       canvas.width = img.width;
       ctx.drawImage(img,0,0);
       dataURL =canvas.toDataURL("image/jpeg");

        $('#img').attr('src', dataURL);
        console.log(canvas.toDataURL("image/jpeg"))
  };

注意:
这里要在服务端打开,不然浏览器可能会报index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.错误



2 . 利用 html5 的 FileReader 将图片转化base64格式
FileReader 是H5提供的一个处理文件的API,
① 判断浏览器是否支持FileReader

if(window.FileReader){
    //处理文件
}else{
   return "浏览器不支持FileRedaer"
}

② FileReader 接口有四个方法:

  • readAsBinaryString (file) 将文件读取为二进制码
  • readAsDataURL (file) 将文件读取为 DataURL
  • readAsText (file,encoding) 将文件读取为文本(第二个参数是编码格式,一般默认是UTF-8)
  • about 中断读取

③ FileReader还提供给了一些事件:

  • onabort 中断时触发
  • onerror 出错时触发
  • onload 文件读取成功完成时触发
  • onloadend 读取完成触发,无论成功或失败
  • onloadstart 读取开始时触发
  • onprogress 读取中

注意:重点内容
FileReader 读取后的文件不会返回给FileReader 本身, 而是存储在了 result 中

HTML

<body class="empty">>
</body>       

css

body { word-break: break-all; margin: 0 1em; min-height: 100vh; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;}
.empty::before{position: absolute; font-size: 50px; content: '任意文件\A拖到这里'; white-space: pre; left: 50%; top: 50%; transform: translate(-50%,-50%); color: gray;}

JS

window.addEventListener("dragenter", function(event) { event.preventDefault(); }, false);
window.addEventListener("dragover", function(event) { event.preventDefault(); }, false);
window.addEventListener("drop", function(event) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.body.insertAdjacentHTML("afterBegin", '

' + e.target.result + '

'); document.body.classList.remove('empty'); }; reader.readAsDataURL(event.dataTransfer.files[0]); event.preventDefault(); }, false); var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
本文作者:酷酷的二货

本文链接:https://www.n-1.cn/49.html

版权声明:所有文章均采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。

如果博客部分文章出现空白或异常,请留言或者联系博主修复。
最后修改:2019 年 09 月 01 日 06 : 23 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论