利用html5的画布canvas进行图片压缩处理

　　在网上找的代码，按自己的需求改了下，忘记在哪找的了。这里记着方便自己以后学习。

// 参数，最大高度
//var MAX_HEIGHT = 100;

var MAX_WIDTH = 200;

// 渲染
function render(src,t){
// 创建一个 Image 对象
var image = new Image();
// 绑定 load 事件处理器，加载完成后执行
image.onload = function(){
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 如果高度超标
//if(image.height > MAX_HEIGHT) {
// 宽度等比例缩放 *=
// image.width *= MAX_HEIGHT / image.height;
// image.height = MAX_HEIGHT;
//}

if(image.width > MAX_WIDTH) {
// 宽度等比例缩放 *=
image.height *= MAX_WIDTH / image.width;
image.width = MAX_WIDTH;
}

// 获取 canvas的 2d 环境对象,
// 可以理解Context是管理员，canvas是房子
var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，image 没有加入到 dom之中

sendImage(t);

};
// 设置src属性，浏览器会自动加载。
// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src = src;
};

// 加载图像文件(url路径)
function loadImage(src,t){
// 过滤掉非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log("选择的文件类型不是图片: ", src.type);
} else {
window.confirm("只能选择图片文件");
}
return;
}
// 创建 FileReader 对象并调用 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function(e){
// 调用前面的 render 函数
render(e.target.result,t);
};
// 读取文件内容
reader.readAsDataURL(src);
};

// 上传图片，jQuery版
function sendImage(t){
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 获取Base64编码后的图像数据，格式是字符串
// "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。
var dataurl = canvas.toDataURL("image/png");
// 为安全对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
//var imagedata = encodeURIComponent(dataurl);
var imagedata = dataurl;

//var url = $("#form").attr("action");
// 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址
// <input type="hidden" name="action" value="receive.jsp" />

var url = "/upload_canvas";
//var url = $("input[name='action']").val();

// 2. 也可以直接用某个dom对象的属性来获取
// <input id="imageaction" type="hidden" action="receive.jsp">
// var url = $("#imageaction").attr("action");
// 因为是string，所以服务器需要对数据进行转码，写文件操作等。
// 个人约定，所有http参数名字全部小写
//console.log(dataurl);
//console.log(imagedata);
var data = {
//imagename: "myImage.png",
imagedata: imagedata,
k:getkey('k')
};
$.ajax( {
url : url,
data : data,
type : "POST",
// 期待的返回值类型
dataType: "json",
complete : function(xhr,result) {
//console.log(xhr.responseText);
//var $tip2 = $("#tip2");
if(!xhr){
// $tip2.text('网络连接失败!');
// return false;
alert("上传错误。");
return;
}
var text = xhr.responseText;
if(!text){
// $tip2.text('网络错误!');
// return false;
alert("上传错误。");
return;
}
//var json = eval("("+text+")");
//if(!json){
// $tip2.text('解析错误!');
// return false;
//} else {
//$tip2.text(json.message);
// $tip2.text(text);
if(t==1){
callback(text);
}else if(t==2){
photoback(text);
}

//}
//console.dir(json);
//console.log(xhr.responseText);
}
});
};

　　页面调用

// var src=fileObj.filename.path;

loadImage(fileObj);
}
</script>

秒客网

利用html5的画布canvas进行图片压缩处理

相关文章