根据图片的路径（绝对路径/相对路径都可以），生成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>

根据图片的路径（绝对路径/相对路径都可以），生成base64的的更多相关文章

  1. php远程图片抓取存放到本地路径并生成缩略图

    private function _getcontent($content)    {               $img_dir='../Public/Img/Ycimg'; //远程图片抓取存放 ...

  2. 关于富文本编辑器—UEditor（java版）的使用，以及如何将UEditor的文件/图片上传路径改成绝对路径

    突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...

  3. 织梦dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是:二级域名+图片地址,这是相对路径.但是你的图片是默认上传在uploads里面的.应该使用绝对路径.这 ...

  4. webpack配置：图片处理、css分离和路径问题

    一.CSS中的图片处理: 1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic" ...

  5. dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms5.7(织梦CMS5.7)二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法 dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是: ...

  6. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  7. html中的图片、css、js等路径加载问题

    网页文件的存取路径有3种:物理路径.绝对路径和相对路径. 物理路径就是你的文件放在主机上的具体位置,例如:D:\\image\\1.jpg 这种格式,该方法可以很快确定出你的文件,但是在网页显示路径基 ...

  8. iOS开发——路径篇&混编路径与全局宏路径

    混编路径与全局宏路径 最近在做东西的时候有一个地方要用到一个第三方库的,但是目前swift版的还没有找到,自己又不想写(其实是不会写),所以就想到了混编,但是中间出现了好多问题,其中印象最深的就是桥接 ...

  9. Python主文件路径和当前模块路径

    主执行文件路径sys.argv[0]                                                                                   ...

随机推荐

  1. Sublime text3 代码格式化插件

    使用 Sublime text 3 格式化HTML代码,需要安装插件,具体安装步骤如下: 1. 打开菜单 -> 首选项(Perferences) -> 插件控制(Packpage Cont ...

  2. Python资料汇总（建议收藏）

    整理汇总,内容包括长期必备.入门教程.练手项目.学习视频. 一.长期必备. 1. StackOverflow,是疑难解答.bug排除必备网站,任何编程问题请第一时间到此网站查找. https://st ...

  3. python2.6升级2.7

    1.下载Python-2.7.3 #wget http://python.org/ftp/python/2.7.3/Python-2.7.3.tar.bz2   2.解压 #tar -jxvf Pyt ...

  4. vue——props的两种常用方法

    vue--props的两种常用方法 1.实现父-->子的通信 举例如下: 父组件 parent.vue <children :channel="object1"> ...

  5. kali git 环境配置

    kali 配置很简单,输入apt-get install git 我输入时返回了错误,执行命令dpkg --configure -a 就行了

  6. Python笔记·第六章——字典 (dict) 的增删改查及其他方法

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.python对key进行哈希函数运算,根据计算的结果决定value的存储地址,所以字典是无序存储的,且key必须是可 ...

  7. 中国十大B2C电商站点开发语言调查

    中国B2C电商站点市场占有率排名例如以下 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I ...

  8. 五：Java之Vector类专题

    据说期末考试要考到Vector 这个类,出于复习须要在这里就要好好整理下这个类了. 一.基本概念 Vector 是可实现自己主动增长的对象数组. java.util.vector提供了向量类(vect ...

  9. Android进程间通信与数据共享（ppt）

  10. Ubuntu Linux訪问小米手机存储卡

    操作系统: 麒麟14.04 安装工具 sudo apt-get install mtpfs libfuse-dev libmad0-dev sudo mkdir /media/mtp 重新启动与使用 ...