<input type="file" id="testUpload">
<img src="" id="img" alt="">
<script>
// 前端只需要给input file绑定这个change事件即可(下面两个方法不需要修改)获取到图片
$('#testUpload').change(function(event){
var imageUrl = getObjectURL($(this)[0].files[0]);
//imageUrl = staticpath+"/images/businessLicensePath_1511499859533.png";
convertImgToBase64(imageUrl, function(base64Img){
$("#img").attr("src",base64Img);
console.log(base64Img);
//base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
//alert(base64Img);
$("#base").attr("src",base64Img);
//base64转图片不需要base64的前缀data:image/jpg;base64
//alert(base64Img.split(",")[1]);
$("#uploadFile").val(base64Img.split(",")[1]);
});
event.preventDefault();
});
 
//生成图片的base64编码
function convertImgToBase64(url, callback, outputFormat){
//html5 的convas画布
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var width = img.width;
var height = img.height;
// 按比例压缩4倍
//var rate = (width<height ? width/height : height/width)/4;
//原比例生成画布图片
var rate = 1;
canvas.width = width*rate;
canvas.height = height*rate;
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
// canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
 
//createobjecturl()静态方法创建一个包含了DOMString代表参数对象的URL。该url的声明周期是在该窗口中.也就是说创建浏览器创建了一个代表该图片的Url.
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined){
// basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined){
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined){
//web_kit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>

js 图片转换为base64 (2)的更多相关文章

  1. js 图片转换为base64

    <input id="file" type="file"> <img id="img" style="max-h ...

  2. js图片转换为base64

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js 图片转换base64 base64转换为file对象

    function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...

  4. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  5. 将图片转换为base64 格式

    1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...

  6. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

  7. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. C# 图片转换为base64

    WebRequest webRequest = WebRequest.Create("验证码url"); WebResponse webResponse = webRequest. ...

  9. 【PHP】图片转换为base64,经过post传输后‘+’会变成 ‘空格’

    图片转换为base64,经过post传输后‘+’会变成 ‘空格’, 需要用PHP 处理一下 $str= $_POST['img_data']; $str= str_replace(' ','+',$s ...

随机推荐

  1. Linux入门(8)——Ubuntu16.04安装sublime text 3并配置Python开发环境

    打开终端,添加sublime text 3的仓库: 按enter键继续 更新软件库: sudo apt-get update 安装Sublime Text 3: sudo apt-get instal ...

  2. mysql批量更新数据,即:循环select记录然后更新某一字段

    原因: 今天遇到一个问题:一个数据表case_folder_info想要实现自定义排序功能,就在表里新加了一个字段SORT_NUMBER,由于表里存在已有数据,所以这个SORT_NUMBER字段都为空 ...

  3. C#中的协变(Covariance)和逆变(Contravariance)

    摘要 ● 协变和逆变的定义是什么?给我们带来了什么便利?如何应用? ● 对于可变的泛型接口,为什么要区分成协变的和逆变的两种?只要一种不是更方便吗? ● 为什么还有不可变的泛型接口,为什么有的泛型接口 ...

  4. 数据库.MongoDB.Java样例

    1.先在MongoDB官网下载Java驱动包 MongoDB Java Driver: http://mongodb.github.io/mongo-java-driver/ JAR包下载列表 htt ...

  5. Linux系统查找

    1. which:在当前用户环境变量path指定的路径下查找可执行程序/文件. 特点:(1)只在当前用户环境变量指定的路径下查找: (2)只找出可执行程序/文件的位置: (3)查找速度非常快. 注:使 ...

  6. 在XUnit中用Moq怎样模拟EntityFramework Core下的DbSet

    最近在做一个项目的单元测试时,遇到了些问题,解决后,觉得有必要记下来,并分享给需要的人,先简单说一下项目技术框架背景: asp.net core 2.0(for .net core)框架 用Entit ...

  7. Doing Homework

    Doing Homework Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Subm ...

  8. Problem X

    Problem Description Recently, iSea went to an ancient country. For such a long time, it was the most ...

  9. Queuing(以前写的没整理)

    Queuing Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  10. Rank of Tetris

    Rank of Tetris Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...