根据图片的路径（绝对路径/相对路径都可以），生成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. null id in entry (don't flush the Session after an exception occurs) 解决方法

    最近在学习基于ssh的注解的系统,然后在实现往数据库增加记录时可以增加第一个,第二个就报错,在网上查了很多资料,大多都是 该异常信息是在提示我们没有为数据中的非空字段设置值. 然后就一直没有明白 明明 ...

  2. Carbondata源码系列（二）文件格式详解

    在上一章当中,写了文件的生成过程.这一章主要讲解文件格式(V3版本)的具体细节. 1.字典文件格式详解 字典文件的作用是在存储的时候将字符串等类型转换为int类型,好处主要有两点: 1.减少存储占用空 ...

  3. 关于网页授权的两种scope的区别说明

    关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回 ...

  4. Mecanim动画系统

    序言:Mecanim动画系统是Unity4.0之后退出的新版动画系统,非常适合人类动画系统.本文是作为自己的学习来讲解的, 可能会有些啰嗦,但尽量把自己的坑都为大家列出来,让大家理解透彻. 一.文件的 ...

  5. C++、Objective-C 混合编程

    在XCODE中想使用C++代码,你须要把文件的扩展名从.m改成.mm.这样才会启动g++编译器. 我们来看个測试代码: [java] view plaincopy class TestC { priv ...

  6. overridePendingTransition介绍

    Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画 它包含两个部分: 一部分是第一个activity退出时的动画: 另外一部分时第二个activity进入时的 ...

  7. Javaproject集成log4j 2.x

    log4j2和log4j在配置文件和引入jar包上出现了不同.这里做个备忘,这里使用的版本号为apache-log4j-2.3-bin.zip. 1.apache-log4j-2.3-bin.zip下 ...

  8. myeclipse配置SVN插件

    方法一:link安装  安装subclipse, MyEclipse SVN插件  1.从官网下载最新的site-1.x.x.zip文件,网址是:folderID=2240" target= ...

  9. webpack+babel+transform-runtime, IE下提示Promise未定义？

    知识要求 babel的基础知识(推荐阮一峰的babel入门教程) 充分理解babel-plugin-transform-runtime与babel-runtime的作用(推荐github项目首页) w ...

  10. 【转】Spring Bean单例与线程安全

    一.Spring单例模式及线程安全 Spring框架中的Bean,或者说组件,获取实例的时候都是默认单例模式,这是在多线程开发的时候需要尤其注意的地方. 单例模式的意思是只有一个实例,例如在Sprin ...