文件上傳使用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,後臺來獲取圖片的寬高等屬性。