js图片转base64并压缩
/* 2015-09-28 上传图片*/
function convertImgToBase64(url, callback, outputFormat){
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;
canvas.width = width*rate;
canvas.height = height*rate;
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = 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 ;
}
// 前端只需要给input file绑定这个change事件即可(上面两个方法不用管)huodong-msg为input class
$('.huodong-msg').bind('change',function(event){
var imageUrl = getObjectURL($(this)[0].files[0]);
convertImgToBase64(imageUrl, function(base64Img){
// base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
alert(base64Img);
// base64转图片不需要base64的前缀data:image/jpg;base64
alert(base64Img.split(",")[1]);
});
event.preventDefault();
});
/* 2015-09-28 */
js图片转base64并压缩的更多相关文章
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS 图片转Base64
JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...
- 前端JS转图片为base64并压缩、调整尺寸脚本
image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...
- vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法
HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...
- js 图片与base64互相转换
js将图片转化为base64 参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html var img = "imgurl" ...
- js 图片转换为base64
<input id="file" type="file"> <img id="img" style="max-h ...
- js 图片转换base64 base64转换为file对象
function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...
- js 图片转换为base64 (2)
<input type="file" id="testUpload"> <img src="" id="img& ...
- JS图片转Base64
网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...
随机推荐
- Storm简述及集群安装
Storm 集群类似于一个 Hadoop 集群.然而你在 Hadoop 的执行"MapReduce job", 在storm 上你执行 "topologies (不好翻译 ...
- KNOCKOUTJS DOCUMENTATION-绑定(BINDINGS)-自定义绑定
除了ko内建的绑定,还可以自定义绑定,灵活地封装复杂的行为使之可重用. 自定义绑定 注册自定义绑定 向 ko.bindingHandles添加一个子属性来注册一个绑定. ko.bindingHandl ...
- 微信小程序-通知滚动小提示
代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- C++知识整理(进制)
++输出二进制.十进制.八进制和十六进制总结 分类: C++ 2013-01-14 02:26 592人阅读 评论(0) 收藏 举报 在C++中,默认状态下,数据按十进制输入输出.如果要求按八进制或十 ...
- dokuwiki语法
dokuwiki是一个php写的维基系统,它的插件中包含markdown插件.但是markdown语法跟dokuwiki语法混着用会出现一些bug.所以还是学一下dokuwiki的语法吧. dokuw ...
- iOS - App 与外设间的通信方式
1.前言 一般 iOS 开发者做 App 开发大部分时候都是通过 Http(s) 请求跟后台服务器打交道,做一些信息展示和用户交互.很少涉及到去跟外部硬件设备连接的开发.随着近年来车联网和物联网的兴起 ...
- C#合并文件夹图片列表 自定义排版顺序
本次程序编写主要为了将pdf word等文档转换为图片后设置不同的打印排版 前提 目标文件夹中的图片高宽都是一致的 /// <summary> /// 合并图片 /// </summ ...
- 转 web前端性能分析--实践篇
当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff ...
- Linux时间子系统(五) POSIX Clock
一.前言 clock是timer的基础,任何一个timer都需要运作在一个指定的clock上来.内核中维护了若干的clock,本文第二章描述了clock的基本概念和一些静态定义的posix clock ...
- Python endswith() 方法
描述 endswith() 方法用于判断字符串是否以指定后缀结尾,如果是则返回 True,否则返回 False. 语法 endswith() 方法语法: S.endswith(suffix[,star ...