根據圖片的路徑（絕對路徑/相對路徑都可以），生成base64的

本文轉載自查看原文 2017-10-19 10:39 1687 圖片生成base64/ js基礎/ WEB類

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>nick getBase64</title>
</head>
<body>
<div><img id="test" src="" alt=""/></div>
<script src="jquery.min.js"></script>
<script>
//  var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
    var imgSrc = "pic.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);
          $("#test").attr("src",base64)
        },function(err){
          console.log(err);
        });
</script>
</body>
</html>

免責聲明！

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

猜您在找 java相對路徑、絕對路徑及類路徑 HTML相對路徑和絕對路徑 python中的相對路徑和絕對路徑 HTML中的相對路徑與絕對路徑 js 相對路徑轉為絕對路徑 html圖像標簽、絕對路徑和相對路徑 Html圖像標簽、絕對路徑和相對路徑：相對路徑和絕對路徑的區別 linux中絕對路徑和相對路徑 javascript 標簽打開相對路徑，絕對路徑