JS实现图片转换成base64的各种应用场景实例分析


Posted in Javascript onJune 22, 2018

本文实例讲述了JS实现图片转换成base64的各种应用场景。分享给大家供大家参考,具体如下:

网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少,所以我就在这里将各种场景系统的介绍一下:

场景一:将用户本地上传的资源转化,即用户通过浏览器点击文件上传时,将图片资源转化成base64:

<input type="file" id="image"><br/>
var reader = new FileReader();
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
var file = $("#image")[0].files[0];
var imgUrlBase64;
if (file) {
  //将文件以Data URL形式读入页面
  imgUrlBase64 = reader.readAsDataURL(file);
  reader.onload = function (e) {
   //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通)
   if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
      alert( '上传失败,请上传不大于2M的图片!');
      return;
    }else{
      //执行上传操作
      alert(reader.result);
    }
  }
 }

场景二:将本项目中的图片资源转化成base64,(我还没有用到过此场景,感觉场景二也可以通过场景三来实现)

function(){
    var url = "static/img/js1.jpg";//这是站内的一张图片资源,采用的相对路径
    convertImgToBase64(url, function(base64Img){
    //转化后的base64
    alert(base64Img);
    });
}
//实现将项目的图片转化成base64
function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
  ctx = canvas.getContext('2d'),
  
img = new Image;
  
img.crossOrigin = 'Anonymous';
  
img.onload = function(){
    
canvas.height = img.height;
    
canvas.width = img.width;
    
ctx.drawImage(img,0,0);
    
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
    
callback.call(this, dataURL);
    
canvas = null;
    };
  
img.src = url;
}

场景三:将网络图片资源转化为base64,(感觉场景二中的资源换成绝对路径即可使用在场景三中)

function(){
  //这是网上的一张图片链接
  
var url="http://p1.pstatp.com/large/435d000085555bd8de10";
    getBase64(url)
      .then(function(base64){
         console.log(base64);//处理成功打印在控制台
      },function(err){
         console.log(err);//打印异常信息
      });
}
//传入图片路径,返回base64
function getBase64(img){
    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']
    }
}

至此,便将图片base64转码的三种场景介绍完毕了,下面是基于以上的一下拓展:

拓展一:后台需要以纯字符串的形式上传(即去掉data:image/png;base64,截取字符串即可)

reader.result.substring(reader.result.indexOf(",") + 1)

拓展二:判断base64资源大小,超过2M不让上传

var AllowImgFileSize = 2100000;  //上传图片最大值(单位字节)( 2 M = 2097152 B )
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
   alert( '上传失败,请上传不大于2M的图片!');
   return;
}

其中reader.result即是base64转码后的结果。以上便是对网络上的一些资源的整理,亲测可用。

Javascript 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 #Javascript
vue中实现左右联动的效果
Jun 22 #Javascript
JS实现关键词高亮显示正则匹配
Jun 22 #Javascript
JS获取指定月份的天数两种实现方法
Jun 22 #Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 #Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 #Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 #Javascript
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
PHP开发框架总结收藏
2008/04/24 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
pygame播放音乐的方法
2015/05/19 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python实现微信机器人的方法
2019/09/06 Python
python的range和linspace使用详解
2019/11/27 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
文员个人的求职信范文
2013/09/26 职场文书
数据员岗位职责
2013/11/19 职场文书
中专自我鉴定
2014/02/05 职场文书
超市重阳节活动方案
2014/02/10 职场文书
2014年中秋寄语
2014/08/11 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
2014年度安全工作总结
2014/12/04 职场文书
校长师德表现自我评价
2015/03/05 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android