/* 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并压缩的更多相关文章

  1. H5 Js图片转base64编码

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

  2. JS 图片转Base64

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

  3. 前端JS转图片为base64并压缩、调整尺寸脚本

    image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...

  4. vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法

    HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...

  5. js 图片与base64互相转换

    js将图片转化为base64 参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html var img = "imgurl" ...

  6. js 图片转换为base64

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

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

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

  8. js 图片转换为base64 (2)

    <input type="file" id="testUpload"> <img src="" id="img& ...

  9. JS图片转Base64

    网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...

随机推荐

  1. Unity 文字爆炸(风化)消失效果 粒子系统应用

    利用Unity的粒子系统,使用C#代码控制粒子的位置和速度,实现文字风化爆炸的效果. Unity的东西,不像flash,不能直接放到网页中,没办法了,只能放截图了.有兴趣的可以下载看看:text_ex ...

  2. Python之上下文管理器

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之上下文管理器 #http://python.jobbole.com/82620/ #语法形式: ...

  3. CentOS 7 网络磁盘挂载到本地 并测试传输速度

    本文中的配置只做测试使用,正式环境中考虑到安全,请自行结合网上介绍的配置细节完善配置内容. 首先明确两个概念,服务器和客户端(本地),我们要做的是将服务端的硬盘上的/home/liuyx 目录挂载到本 ...

  4. zabbix对数据盘磁盘容量进行监控

    示例将数据盘挂载到 /mnt目录 , 对 /mnt目录进程容量监控 item 添加对 /mnt 目录的监控项 tragger 添加触发项 这样完成对一个数据盘磁盘容量的监控

  5. 【LeetCode】53. Maximum Subarray (2 solutions)

    Maximum Subarray Find the contiguous subarray within an array (containing at least one number) which ...

  6. PHP 大数自动转换为科学计数法

    前段时间碰到一个很头疼的问题,就是大于12位的数字在PHP中,会自动转成科学计数法表 示. 比如 1234567891234 显示为 1.23456789123E+12 , 最后只能在计算出大数之后, ...

  7. android通过USB使用真机调试程序

    我的机子很老,开启个android模拟器都要好几分钟,但幸亏有个android的真机,这样直接在andriod手机上调试也是一个不错的选择.下面我就介绍 一下使用android手机来调试android ...

  8. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

  9. python学习笔记013——模块

    1 模块module 1.1 模块是什么 模块是包含一系列的变量,函数,类等程序组 模块通常是一个文件,以.py结尾 1.2 模块的作用 1. 让一些相关的函数,变量,类等有逻辑的组织在一起,使逻辑更 ...

  10. Python rjust() 方法

    描述 rjust() 返回一个原字符串右对齐,并使用指定字符填充至指定长度的新字符串,默认的填充字符为空格.如果指定的长度小于原字符串的长度则返回原字符串. 语法 rjust() 方法语法: S.rj ...