主要思想：

　　使用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

js把通过图片路径生成base64的更多相关文章

  1. 图片路径转base64字节码

    package product; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOE ...

  2. Vue-cli构建项目, 组件中js代码引入图片路径问题

    问题描述 .vue的组件分成三个部分, template结构部分, script路径代码, style页面样式 首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问 ...

  3. JS将本地图片转化成base64码

    在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...

  4. 完整说明使用SpringBoot+js实现滑动图片验证

    常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证．本文主要讲解的是滑块图片验证的实现流程．包括后台和前端的实现． 实现效果 使用的API java.awt.image.Buffe ...

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

    根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  6. js 选择图片生成base64数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. Js 将图片的绝对路径转换为base64编码

    转.... 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下:  var img = "https://img. ...

  8. 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

    在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...

  9. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

随机推荐

  1. Django框架中的视图和模板

    视图views django中的视图就是用来定义函数来处理一些逻辑的核心地方. django中通过urls来建立路径跟views中的视图函数的映射关系. urls中的映射关系 ''' urlpatte ...

  2. accept 文件描述符用尽处理

    if (events[i].data.fd == listenfd) { peerlen = sizeof(peeraddr); connfd = ::accept4(listenfd, (struc ...

  3. liunx中图形化桌面环境中的脚本编程之——创建文本菜单

    整体是通过建立菜单布局,然后根据菜单上的布局建立函数(就是为这些布局实现功能),最后将函数和布局实现逻辑上的相连: 如何建立菜单布局? 整体上是通过打印字符创建出,因此需要使用echo命令,但是有一些 ...

  4. CCF-201604-3-路径解析

    问题描述 试题编号: 201604-3 试题名称: 路径解析 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在操作系统中,数据通常以文件的形式存储在文件系统中.文件系统一般采 ...

  5. CCF-201403-2-窗口

    问题描述 试题编号: 201403-2 试题名称: 窗口 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平 ...

  6. 负载均衡之 nginx

    什么是负载均衡负载均衡(Load Balance)是分布式系统架构设计中必须考虑的因素之一,它通常是指,将请求/数据[均匀]分摊到多个操作单元上执行,负载均衡的关键在于[均匀].在使用nginx负载均 ...

  7. onblur

    HTML onblur 事件属性 HTML 事件属性 实例 当用户离开输入字段时对其进行验证: <input type="text" name="fname&quo ...

  8. bzoj4974 字符串大师

    4974: 字符串大师 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 310  Solved: 155[Submit][Status][Discuss] ...

  9. 参加完Rocket MQ Meetup深圳站，回顾和想法

    最近一段时间才开始关注云栖社区的公众号,在两周前看到要在深圳科兴科学园办一场Rocket MQ的Meetup.因为从来没有参加过这种线下活动,而且对Rocket MQ比较感兴趣,所以就立即报名参加. ...

  10. AspNet Core 初步认识

    Core 的出现对我我没有很大的影响,当时在Core要发布的时候听到周围的人再聊再谈,我没有去太多关注,就是一个屌丝开发人员. 直到又一次偶然见到一位特别喜欢.net的老开发人员谈起Core时落泪了, ...