zoukankan      html  css  js  c++  java
  • 根据图片的路径(绝对路径/相对路径都可以),生成base64的

    根据图片的路径(绝对路径/相对路径都可以),生成base64的

    <!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>
  • 相关阅读:
    git常用命令
    代码实现-栈、队列、双端队列
    websocket实现简单的单聊
    websocket实现简单的群聊
    成员
    反射
    类与类之间的关系
    常用模块-02
    模块
    微信小程序表单多页面步骤提交
  • 原文地址:https://www.cnblogs.com/LChenglong/p/7691172.html
Copyright © 2011-2022 走看看