`
747017186
  • 浏览: 317163 次
社区版块
存档分类
最新评论

img图片加载完成以及canvas转图片为base64编码

 
阅读更多

之前做项目有个图片转base64编码，我用的是html5的canvas进行转换的。很简单，其中涉及到一个知识点就是必须图片完全加载完成之后才能取到base64编码。

<!DOCTYPE html>

<html>

  <head>

    <title>MyHtml.html</title>

 

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

  </head>

  

  <body>

    <img src="sleep.jpg"/>

    <button onclick="aa('eat.jpg');">惦记我</button>

    <script type="text/javascript">

    //创建一个canvas

var c=document.createElement("canvas");

//设置canvas宽高为图片宽高

c.width=540;c.height=258;

//将图片绘制到canvas，绘制成2D图像

var cxt=c.getContext("2d");

    function aa(imgsrc){

var img=new Image();

img.src=imgsrc;

img.onload=function(){//判断图片完全加载完之后再执行的内联函数，否则得到base64编码会有错误

cxt.drawImage(img,0,0);

//得到图片的base64编码数据

var dd=c.toDataURL();

//log出图片base64数据

$('img').attr("src",dd);//img的src直接输入base64图片则直接显示

//};

    }

    </script>

  </body>

</html>

 

分享到：
| 地址栏传递中文参数到后台乱码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics