文件上传使用canvas做上传前预览 踩坑笔记

1.怎样让canvas兼容ie8?

  (1)浏览器主要分为ie浏览器和普通浏览器，ie9及以上浏览器支持canvas.要想兼容更低版本的浏览器需要调用 html5.js 和 excanvas.js(excanvas.compiled)

<!--[if IE]>
<script type="text/javascript" src="html5.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

资源文件见

链接：https://pan.baidu.com/s/1_K_ERe8pqvql8JvteYkpJQ 
提取码：osj2 

  (2)调用过程中的注意事项 要对canvas做初始化 代码如下

  if(!(document.getElementById("canvas").getContext)){

      G_vmlCanvasManager.initElement(document.getElementById("canvas"));

  }

2.使用canvas中，调用drawImage方法的注意事项

  context.drawImage(img,x,y,width,height); 此方法中 第一个参数只支持 jpg,png,gif 的图片（文件格式是'/images/2.png'或者'/images/1.jpg'或者'/images/3.gif'）
 不支持base64 不支持base64 不支持base64 重要的事情说三遍

3.在ie中上传图片前将图片转成base64的问题

   function ieBase64(file){//file是input type="file" 对象dom
          var realPath, xmlHttp, xml_dom, tmpNode, imgData;
          realPath = file;//获取文件的真实本地路径.
          xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
          xmlHttp.open("POST",realPath, false);
          xmlHttp.send("");
          xml_dom = new ActiveXObject("MSXML2.DOMDocument");
          tmpNode = xml_dom.createElement("tmpNode");
          tmpNode.dataType = "bin.base64";
          tmpNode.nodeTypedValue = xmlHttp.responseBody;
          imgData = "data:image/"+ "bmp" +";base64," + tmpNode.text.replace(/\n/g,"");
          //计算文件大小
          var str=imgData.substring(22);
          var equalIndex= str.indexOf('=');
          if(str.indexOf('=')>0){
              str=str.substring(0, equalIndex);
          }
          var strLength=str.length;
          var fileLength=parseInt(strLength-(strLength/8)*2);
          if(fileLength > 5120000){//图片大于5M
            alert("图片不能大于5M");
            return;
          }
          callback(imgData);
          //return imgData;//渲染图片
  }

  使用此方法在ie下会出现跨域问题 

  解决方案：可以把图片传到后台，后台转base64,后台来获取图片的宽高等属性。