脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js把图片的绝对路径转为base64字符串、blob对象再上传

js实现把图片的绝对路径转为base64字符串、blob对象再上传

 更新时间：2016年12月29日 15:34:21   作者：webNick  
本文主要介绍了JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象再上传的方法，具有一定的参考价值，需要的朋友一起来看下吧

主题：

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

用处：

从本地选择图片上传，如项目规定只能选择本项目文件夹下的图像上传为头像等。

主要思想：

使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码.

具体用法：

在这我们引用淘宝服务器上的一张图片举例：

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.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);
  });

此时在chrome测试，运行时会报错！

原因：

我们使用的是淘宝服务器上的图片，在本地服务器下访问，结果出现图片跨域的问题。

处理方案：

一、将图片放在本地服务器

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);
  });

二、 跨域

想引用其他服务器下的图片该如何解决呢？

我们可以使用下面这一句代码解决跨域。

image.crossOrigin = '';

测试在chrome和firefox，ie9+下生效，在目前safari6以下貌似不支持。

<!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>

上面是本功能的完整代码，亲们，可以测试咯！

这样就本地图片和其他服务器上的图片都可以处理了！

结语：

想要了解更多的有关上传头像功能，可参考《浅析上传头像示例及其注意事项》

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题

    在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题

    这样的脚本你在ie8下调用，在ie8地址栏下按下回车后调用jquery的对像、方法什么的没有问题，但是刷新之后就有问题。就是刷新之后无论怎样你要在地址栏按一下回车。
    2010-11-11
  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除)

    下面小编就为大家带来一篇html+js实现简单的计算器代码(加减乘除)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 谈一谈javascript中继承的多种方式

    谈一谈javascript中继承的多种方式

    本文就和大家谈一谈javascript中的继承，什么是继承，继承的作用，以及js继承的实现代码，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 一个可以随意添加多个序列的tag函数

    一个可以随意添加多个序列的tag函数

    由于在没有规划好的情况下写的这个代码，写的比较粗糙，也没有添加注释。 JavaScript代码和HTML完全分离；可以随意添加多个子div标签，自动扩展
    2009-07-07
  • JavaScript必知必会(十) call apply bind的用法说明

    JavaScript必知必会(十) call apply bind的用法说明

    这篇文章主要介绍了JavaScript必知必会(十) call apply bind的用法说明 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • Bootstrap禁用响应式布局的实现方法

    Bootstrap禁用响应式布局的实现方法

    这篇文章主要介绍了Bootstrap禁用响应式布局的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • JavaScript基于ChatGPT实现打字机消息回复

    JavaScript基于ChatGPT实现打字机消息回复

    ChatGPT 是一个基于深度学习的大型语言模型，处理自然语言需要大量的计算资源和时间，响应速度肯定比普通的读数据库要慢的多，本文介绍了ChatGPT打字机消息回复实现原理，感兴趣的同学可以跟着小编一起学习
    2023-05-05
  • javascript中的异步调用机制

    javascript中的异步调用机制

    这篇文章主要介绍了javascript中的异步调用机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • 关于js数组去重的问题小结

    关于js数组去重的问题小结

    在项目开发过程中经常会遇到数组中包含很多重复的内容，即脏数据去脏的操作，本文着重讲解了数组去重的几种方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • js判断空对象的实例(超简单)

    js判断空对象的实例(超简单)

    下面小编就为大家带来一篇js判断空对象的实例(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论