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 刷新全集常用代码
Nov 22 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
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 array_unique之后json_encode需要注意
2011/01/02 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
如何为vue的项目添加单元测试
2018/12/19 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
使用Pycharm分段执行代码
2020/04/15 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
面包店的创业计划书范文
2014/01/16 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
园艺师求职信
2014/04/27 职场文书
运动会口号8字
2014/06/07 职场文书
委托书格式
2014/08/01 职场文书
财务整改报告范文
2014/11/05 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技