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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>nick getBase64</title>
  6. </head>
  7. <body>
  8. <div><img id="test" src="" alt=""/></div>
  9. <script src="jquery.min.js"></script>
  10. <script>
  11. //  var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
  12.     var imgSrc = "pic.jpg";
  13. //    var imgSrc = "img/1.jpg";
  14.       function getBase64(img){//传入图片路径，返回base64
  15.         function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
  16.           var canvas = document.createElement("canvas");
  17.           canvas.width = width ? width : img.width;
  18.           canvas.height = height ? height : img.height;
  19.  
  20.           var ctx = canvas.getContext("2d");
  21.           ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  22.           var dataURL = canvas.toDataURL();
  23.           return dataURL;
  24.         }
  25.         var image = new Image();
  26.         image.crossOrigin = '';
  27.         image.src = img;
  28.         var deferred=$.Deferred();
  29.         if(img){
  30.           image.onload =function (){
  31.             deferred.resolve(getBase64Image(image));//将base64传给done上传处理
  32.           }
  33.           return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
  34.         }
  35.       }
  36.       getBase64(imgSrc)
  37.         .then(function(base64){
  38.           console.log(base64);
  39.           $("#test").attr("src",base64)
  40.         },function(err){
  41.           console.log(err);
  42.         });
  43. </script>
  44. </body>
  45. </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. daemon 启动system V init 和 systemd 配置

    先试着写一个udpserver的daemon #include <stdio.h> #include <sys/socket.h> #include <sys/types ...

  2. 【NOI2005】维护数列

    https://daniu.luogu.org/problem/show?pid=2042 一道伸展树维护数列的很悲伤的题目,共要维护两个标记和两个数列信息,为了维护MAX-SUM还要维护从左端开始的 ...

  3. linux crontab yum安装

    crontab工具来做计划任务,定时任务,执行某个脚本等等 1.检查是否已安装crontab # crontab -bash: crontab: command not found 执行 cronta ...

  4. KafkaManager中Group下不显示对应Topic的解决方案

    一.软件版本 Kafka:0.8.2.1 KafkaManager:1.2.9.10 二.问题现象 点击Consumer下某个组,显示如下图所示的异常,查看KafkaManager的Applicati ...

  5. hdu1754 I Hate It (线段树 更新点的值)

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  6. 重要经验五：block作为属性的注意事项

    现代ios应用的开发.不使用GCD和block,效率会减少非常多,在今年3月份之前,我在block的学习和使用方面,精力和经验都明显不足,在SF有个牛逼同事.不仅自己积累了一套库,并且对这个库持续进行 ...

  7. Java二维数组的概念和使用方法

    二维数组 数组的数组---二维数组的每一个元素是一个一维数组 定义格式 数据类型[][] 数组名 = new 数据类型[二维数组的长度/包含的一维数组的个数][每个一维数组的长度]; int[][] ...

  8. Python笔记·第九章—— 函数 （一）

    一.函数的作用 函数可以让我们代码结构更清晰,而且避免了代码的重复,冗余,使一段代码或者功能可以反复的被调用,大大提高了开发效率 二.函数的定义 def 函数名(参数1,参数2,*args,默认参数, ...

  9. CrawlSpiders

    1.用 scrapy 新建一个 tencent 项目 2.在 items.py 中确定要爬去的内容 # -*- coding: utf-8 -*- # Define here the models f ...

  10. CS:APP3e 深入理解计算机系统_3e Datalab实验

    由于http://csapp.cs.cmu.edu/并未完全开放实验,很多附加实验做不了,一些环境也没办法搭建,更没有标准答案.做了这个实验的朋友可以和我对对答案:) 实验内容和要求可在http:// ...