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


Posted in Javascript onDecember 29, 2016

主题:

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>

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

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

结语:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
jQuery实现6位数字密码输入框
Dec 29 #Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 #Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 #Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 #Javascript
jQuery实现遮罩层登录对话框
Dec 29 #Javascript
JS实现的简易拖放效果示例
Dec 29 #Javascript
使用DeviceOne实现微信小程序功能
Dec 29 #Javascript
You might like
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
ext jquery 简单比较
2010/04/07 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
解析python的局部变量和全局变量
2019/08/15 Python
python 如何设置守护进程
2020/10/29 Python
python 实现图片裁剪小工具
2021/02/02 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
党风廉正建设责任书
2015/01/29 职场文书
毕业实习感受与体会
2015/05/26 职场文书
八月一日观后感
2015/06/10 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
初中班主任心得体会
2016/01/07 职场文书
企业团队精神心得体会
2016/01/19 职场文书