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

  • 相关阅读:
    牛客网 二叉树的镜像 JAVA
    牛客网 反转链表 JAVA
    牛客网 调整数组顺序使奇数位于偶数前面 JAVA
    Integer to Roman LeetCode Java
    Valid Number leetcode java
    Longest Common Prefix
    Wildcard Matching leetcode java
    Regular Expression Matching
    Longest Palindromic Substring
    Add Binary LeetCode Java
  • 原文地址:https://www.cnblogs.com/LChenglong/p/7691548.html
Copyright © 2011-2022 走看看