js實(shí)現(xiàn)把圖片的絕對(duì)路徑轉(zhuǎn)為base64字符串、blob對(duì)象再上傳

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

本文主要介紹了JavaScript把項(xiàng)目本地的圖片或者圖片的絕對(duì)路徑轉(zhuǎn)為base64字符串、blob對(duì)象再上傳的方法，具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧

主題：

JavaScript把項(xiàng)目本地的圖片或者圖片的絕對(duì)路徑轉(zhuǎn)為base64字符串、blob對(duì)象在上傳。

用處：

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

主要思想：

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

具體用法：

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

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調(diào)用時(shí)傳入具體像素值，控制大小 ,不傳則默認(rèn)圖像大小
   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();//問(wèn)題要讓onload完成后再return sessionStorage['imgTest']
  }
  }
  getBase64(imgSrc)
  .then(function(base64){
   console.log(base64);
  },function(err){
   console.log(err);
  });

此時(shí)在chrome測(cè)試，運(yùn)行時(shí)會(huì)報(bào)錯(cuò)！

原因：

我們使用的是淘寶服務(wù)器上的圖片，在本地服務(wù)器下訪問(wèn)，結(jié)果出現(xiàn)圖片跨域的問(wèn)題。

處理方案：

一、將圖片放在本地服務(wù)器

var imgSrc = "img/1.jpg";//本地項(xiàng)目文件夾下的圖片
  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();//問(wèn)題要讓onload完成后再return sessionStorage['imgTest']
  }
  }
  getBase64(imgSrc)
  .then(function(base64){
   console.log(base64);
  },function(err){
   console.log(err);
  });

二、跨域

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

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

image.crossOrigin = '';

測(cè)試在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調(diào)用時(shí)傳入具體像素值，控制大小 ,不傳則默認(rèn)圖像大小
   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();//問(wèn)題要讓onload完成后再return sessionStorage['imgTest']
  }
  }
  getBase64(imgSrc)
  .then(function(base64){
   console.log(base64);
  },function(err){
   console.log(err);
  });
</script>
</body>
</html>

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

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

結(jié)語(yǔ)：

想要了解更多的有關(guān)上傳頭像功能，可參考《淺析上傳頭像示例及其注意事項(xiàng)》

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: