根据图片的路径（绝对路径/相对路径都可以），生成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. 虚拟机下 solr7.1 cloud 集群搭建 （手动解压和官方脚本两种方式）

    准备工作: vmware workstation 12,OS使用的是ubuntu16.04,三台虚拟机搭建一个solr集群,zookeeper共用这三台虚拟机组成zookeeper集群. zookee ...

  2. ssh免密验证,shell批量设置

    ssh免密验证,shell批量设置 #ssh免密验证,shell自动设置 echo '#!/bin/sh . /etc/init.d/functions [[ -f /usr/bin/expect ] ...

  3. Process Doppelgänging

    Process Doppelgänging -- 新的代码注入技术,通杀windows系统的所有版本,并且能绕过绝大多数的安全软件. 介绍 今天(2017-12-07),在伦敦举行的2017年黑帽欧洲 ...

  4. 创建一个servlet

    servlet: 它是web应用程序的核心类,可以直接处理和相应用户请求,又或者将处理工作委托给应用中的其他部分的类. 让servlet继承HttpServlet的原因是: 1.HttpServlet ...

  5. SQL面试题：有A B C三列,用SQL语句实现：当A列大于B列时选择A列否则选择B列

    .请教一个面试中遇到的SQL语句的查询问题 表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. ------------------- ...

  6. NOIP2014无线网络发射器选址改编1

    问题描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129条东西向街道和129条南北向街道所形成的网格状,并且相邻的平 ...

  7. onunload事件和onbeforeunload事件

    记录知识点背景:在做一个h5项目时,在统计事件时有这样一个需求, 希望能统计到用户是从第几页离开的,用到了这个知识点.在此记录. window.onunload 1.定义和用法 onunload事件在 ...

  8. jumpserver 堡垒机环境搭建（图文具体解释）

    Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. 特点: 全然开源,GPL授权 Python编写.容易 ...

  9. C - The C Answer (2nd Edition) - Exercise 1-7

    /* Write a program to print the value of EOF. */ #include <stdio.h> main() { printf("EOF ...

  10. Gradle笔记——构建基础

    本篇文章主要介绍一下Gradle的构建基础. 它看起来似乎和android项目没多大关系.不能让人一下子理解android项目中的Gradle配置文件,可是这篇基础真的非常重要. 学习Gradle前, ...