<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. iOS的异步绘制--YYAsyncLayer源码分析

    iOS的异步渲染 最近看了YYAsyncLayer在这里总结一下.YYAsyncLayer是整个YYKit异步渲染的基础.整个项目的Github地址在这里.你可以先下载了一睹为快,也可以跟着我一步一步 ...

  2. ABAP POH和POV事件中 获得屏幕字段的值

    在Screen显示之前,系统会自动将程序变量值放到屏幕字段中:在PAI事件中,系统会自动将屏幕字段的值更新到相应的程序变量. 在Screen Logic中我们还有POH和POV事件,所以有时需要调用函 ...

  3. Hexo+Github搭建博客

    要使用Hexo,需要在你的系统中支持Nodejs以及Git,如果还没有,那就开始安装吧! 安装Node.js 下载Node.js 参考地址:安装Node.js 安装Git 下载地址:http://gi ...

  4. OpenWRT 恢复出厂设置命令

    如果通过无线或者有线口无法连接到router,可以用恢复某些设置重新设置路由器. 1. 开机,等着一个工作灯亮的时候立即按下rest键2秒,然后就开始拼命闪烁,很好现在进入failsafe模式了. 2 ...

  5. [js插件开发教程]实现一个比较完整的开源级选项卡插件

    在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>>   [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...

  6. 处理MySQL服务器无法启动的问题

    MySQL数据库在升级到5.7版本后,和之前的版本有些不一样,没有data文件夹,我们都知道MySQL数据库文件是保存在data文件夹中的,网上有人说把5.6版本的data文件夹拷贝一个,这种说法听听 ...

  7. LeetCode 661. Image Smoother (图像平滑器)

    Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother t ...

  8. web端/h5端账号密码的安全性问题

    firefox一直提示让浏览器记住密码会有安全问题,但是一直未曾关注过到底是什么安全问题. 国庆节回家后发生的一件小事,让我深刻认识到让浏览器记住密码有多么不安全. 事情的起因是这样,家里wifi信号 ...

  9. 一个比较实用的商业级图表Echarts

      了解了解                    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼 ...

  10. HTML超连接的使用

    1,基本语法:<a href="" target="打开方式" name ="页面锚点名称">连接文字或者图片</a> ...