js把通過圖片路徑生成base64

本文轉載自查看原文 2017-10-19 11:29 12953 通過圖片路徑生成base64/ js特效類/ WEB類

主要思想：

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

一、圖片在本地服務器：

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);
        });

二、跨域

<!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>

最近做了一個項目用到了這個，

html代碼生成canvas然后生成圖片。但是html里面的圖片路徑必須用base64.所以就找了這個東西。

這個測試分享給大家：鏈接：http://pan.baidu.com/s/1gfGPhkf 密碼：8e34

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js把通過圖片路徑生成base64 vue圖片路徑與base64圖片 js 選擇圖片生成base64數據根據圖片的路徑（絕對路徑/相對路徑都可以），生成base64的圖片路徑轉為base64 js base64圖片下載 base64之js壓縮圖片 base64圖片旋轉代碼js 前端JS base64與圖片互轉 JS 圖片轉Base64