js實現把圖片的絕對路徑轉為base64字符串、blob對象再上傳

更新時間：2016年12月29日 15:34:21 作者：webNick

本文主要介紹了JavaScript把項目本地的圖片或者圖片的絕對路徑轉為base64字符串、blob對象再上傳的方法，具有一定的參考價值，需要的朋友一起來看下吧

主題：

JavaScript把項目本地的圖片或者圖片的絕對路徑轉為base64字符串、blob對象在上傳。

用處：

從本地選擇圖片上傳，如項目規(guī)定只能選擇本項目文件夾下的圖像上傳為頭像等。

主要思想：

使用canvas.toDataURL()方法將圖片的絕對路徑轉換為base64編碼.

具體用法：

在這我們引用淘寶服務器上的一張圖片舉例：

var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
// var imgSrc = "img/1.jpg";
  function getBase64(img){//傳入圖片路徑，返回base64
  function getBase64Image(img,width,height) {//width、height調用時傳入具體像素值，控制大小 ,不傳則默認圖像大小
   var canvas = document.createElement("canvas");
   canvas.width = width ? width : img.width;
   canvas.height = height ? height : img.height;
 
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   var dataURL = canvas.toDataURL();
   return dataURL;
  }
  var image = new Image();
  image.src = img;
  var deferred=$.Deferred();
  if(img){
   image.onload =function (){
   deferred.resolve(getBase64Image(image));//將base64傳給done上傳處理
   }
   return deferred.promise();//問題要讓onload完成后再return sessionStorage['imgTest']
  }
  }
  getBase64(imgSrc)
  .then(function(base64){
   console.log(base64);
  },function(err){
   console.log(err);
  });

此時在chrome測試，運行時會報錯！

原因：

我們使用的是淘寶服務器上的圖片，在本地服務器下訪問，結果出現圖片跨域的問題。

處理方案：

一、將圖片放在本地服務器

var imgSrc = "img/1.jpg";//本地項目文件夾下的圖片
  function getBase64(img){//傳入圖片路徑，返回base64
  function getBase64Image(img,width,height) {
   var canvas = document.createElement("canvas");
   canvas.width = width ? width : img.width;
   canvas.height = height ? height : img.height;
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   var dataURL = canvas.toDataURL();
   return dataURL;
  }
  var image = new Image();
  image.src = img;
  var deferred=$.Deferred();
  if(img){
   image.onload =function (){
   deferred.resolve(getBase64Image(image));//將base64傳給done上傳處理
   }
   return deferred.promise();//問題要讓onload完成后再return sessionStorage['imgTest']
  }
  }
  getBase64(imgSrc)
  .then(function(base64){
   console.log(base64);
  },function(err){
   console.log(err);
  });

二、跨域

想引用其他服務器下的圖片該如何解決呢？

我們可以使用下面這一句代碼解決跨域。

image.crossOrigin = '';

測試在chrome和firefox，ie9+下生效，在目前safari6以下貌似不支持。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>nick getBase64</title>
</head>
<body>
<div><img id="test" src="" alt=""/></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
// var imgSrc = "img/1.jpg";
  function getBase64(img){//傳入圖片路徑，返回base64
  function getBase64Image(img,width,height) {//width、height調用時傳入具體像素值，控制大小 ,不傳則默認圖像大小
   var canvas = document.createElement("canvas");
   canvas.width = width ? width : img.width;
   canvas.height = height ? height : img.height;
 
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   var dataURL = canvas.toDataURL();
   return dataURL;
  }
  var image = new Image();
  image.crossOrigin = '';
  image.src = img;
  var deferred=$.Deferred();
  if(img){
   image.onload =function (){
   deferred.resolve(getBase64Image(image));//將base64傳給done上傳處理
   }
   return deferred.promise();//問題要讓onload完成后再return sessionStorage['imgTest']
  }
  }
  getBase64(imgSrc)
  .then(function(base64){
   console.log(base64);
  },function(err){
   console.log(err);
  });
</script>
</body>
</html>

上面是本功能的完整代碼，親們，可以測試咯！

這樣就本地圖片和其他服務器上的圖片都可以處理了！

結語：

想要了解更多的有關上傳頭像功能，可參考《淺析上傳頭像示例及其注意事項》

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: