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转码后的结果。以上便是对网络上的一些资源的整理,亲测可用。如有不对可以留言交流。
js实现图片资源转化成base64的各种场景的更多相关文章
- JS将本地图片转化成base64码
在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...
- js实现图片的Blob base64 ArrayBuffer 的各种转换
一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort 处理abort事件.该事件在读取操作被中断时触发. Fil ...
- JS 如何将“在线图片资源”转换成“base64”
在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...
- html中canvas渲染图片,并转化成base64格式保存
最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取 ...
- 图片转化成base64字符串
package demo; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; public ...
- C#中将图片转化成base64字符串
厂址:http://www.cnblogs.com/yunfeifei/p/4165351.html 1.在C#中将图片转化成base64字符串: using System; using System ...
- JS上传图片转化成Base64编码demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js实现图片资源、blob、base64的各种场景转换
文件转babase64 function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement ...
- 使用js对form表单base64加密
利用js可以对前台数据加密,以防止被恶意获取,以下代码,用base64对数据进行加密,可以在后台进行解密. 引入的js <script type="text/javascript&qu ...
随机推荐
- Xcode 创建.a和framework静态库(转)
最近因为项目中的聊天SDK,需要封装成静态库,所以实践了一下创建静态库的步骤,做下记录. 库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种.iOS中的静 ...
- Longest Common Substring SPOJ - LCS (后缀自动机)
Longest Common Substring \[ Time Limit: 294ms \quad Memory Limit: 1572864 kB \] 题意 给出两个串,求两个串的最长公共连续 ...
- MySQL的简单概念及软件安装
数据库的简介 一.数据库的基本概念:数据.数据库.数据库管理系统.数据库系统 数据:数据(Data)是用来记录信息的可识别符号,是信息的具体表现形式. 数据库:(1)数据库(Database,DB)是 ...
- LOJ3097 SNOI2019 通信 题解
题目链接 费用流,当建边需要依靠位置和权值两个偏序关系时,可以用cdq分治优化建边. 代码: #include<bits/stdc++.h> using namespace std; #d ...
- nuxt项目服务端渲染应用部署、使用pm2守护进程及遇到的问题处理
服务端渲染应用部署应该先编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 我们已经在pakage.json里配置好script命令 { &q ...
- Java——获取网页内容并在本地生成HTML文件
使用java.net包下的URL类,可以将一个网页(链接)封装成一个URL对象. URL对象有一个openStream()方法,使用该方法可以获取该网页的输入流,我们可以通过读取输入流的方式获得网页的 ...
- 定时任务、js定时任务
intervalID =setInterval("getIsCookie()",1000); //开始任务 clearInterval(intervalID);//停止任务
- java NIO面试题剖析
转载:https://mp.weixin.qq.com/s/YIcXaH7AWLJbPjnTUwnlyQ 首先我们分别画图来看看,BIO.NIO.AIO,分别是什么? BIO:传统的网络通讯模型,就是 ...
- uniapp - 更改项目生成模板、页面
每次生成项目目录都需要删除一些再添加太麻烦了,就想着能不能修改一下模板 - 当然自定义模板也能实现 好了,被我找到了. 修改以后源文件名称和格式覆盖回去即可,重新启动hbuilderx 这里可以修改e ...
- error Microsoft Visual C++ 14.0 is required 解决方案
Windows平台上,pip install fastFM scrapy等工具的时候,经常出现 error Microsoft Visual C++ 14.0 is required 的错误, ...