js实现把图片的绝对路径转为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>

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

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

结语:

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

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

(0)

相关推荐

  • JavaScript多图片上传案例

    JS多图片上传小小实例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>上传多图片</title> <script type="text/javascript"> function JM_wu(ob) { ob.style.display = "none"; } function JM_you(ob) { ob.sty

  • 使用jquery.form.js实现图片上传的方法

    本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

  • javascript实现图片上传前台页面

    这篇文章主要通过代码分析javascript实现图片上传前台页面,废话不多说了,直接贴代码了. 代码示例一: <script> //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型 if (obj.value == '') { $.messager

  • node.js实现多图片上传实例

    先上效果图: 这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的) 总共涉及到三处文件(常规来说) 1.路由入口文件(我这里是/routes.js,很多时候会在/app.js) 复制代码 代码如下: //添加美食  app.all('/add', users.add); 2.路由控制器文件(我这里是/routes/users.js) 复制代码 代码如下: //添加美食exports.add = function (req, res) {   if (req.

  • 图片上传即时显示缩略图的js代码

    <script language="javascript" type="text/javascript"> var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg']; var preivew = function(file, container){ try{ var pic = new Picture(file, container); }catch(e){ alert(e); } } //缩略图类定义 va

  • js实现图片上传并正常显示

    项目经常会用到头像上传,那么怎么实现呢? 首先是HTML布局: <label for="thumbnail" class="col-md-3 control-label">缩略图</label> <div class="col-md-6"> <input type="file" class="form-control" id="thumbnail"

  • nodejs 整合kindEditor实现图片上传

    kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单 环境: unbuntu 14.10 nodejs 0.10.35 express 4.11.2 formidable 1.0.16 kindEditor 4.1.10 webStorm 8 1.通过IDE或终端创建一个名称为test的工程 2.编辑package.json添加form

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

    微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片

  • Javascript异步表单提交,图片上传,兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

随机推荐