zoukankan      html  css  js  c++  java
  • js把通过图片路径生成base64

    主要思想:

      使用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

  • 相关阅读:
    python模块—socket
    mac os系统的快捷键
    教你如何将UIImageView视图中的图片变成圆角
    关于ASP.NET MVC
    iOS 日期格式的转换
    将App通过XCode上传到AppStore 出现这个错误“An error occurred uploading to the iTunes Store”的解决方法
    关于MAC OS下面两个软件的功能改进——Dictionary和Fit 输入法
    分享一下上个星期的香港行程
    【博客园IT新闻】博客园IT新闻 iPhone 客户端发布
    解决Entity Framework Code First 的问题——Model compatibility cannot be checked because the database does not contain model metadata
  • 原文地址:https://www.cnblogs.com/LChenglong/p/7691548.html
Copyright © 2011-2022 走看看