// 参数，最大高度
var MAX_HEIGHT = 100;
// 渲染
function render(src){
// 创建一个 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;
}
// 获取 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之中
};
// 设置src属性，浏览器会自动加载。
// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src = src;
};
// 加载 图像文件(url路径)
function loadImage(src){
// 过滤掉 非 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);
};
// 读取文件内容
reader.readAsDataURL(src);
};
// 上传图片，jQuery版
function sendImage(){
// 获取 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 url = $(“#form”).attr(“action”);
// 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址
// <input type=”hidden” name=”action” value=”receive.jsp” />
var url = $(“input[name=’action’]”).val();
// 2. 也可以直接用某个dom对象的属性来获取
// <input id=”imageaction” type=”hidden” action=”receive.jsp”>
// var url = $(“#imageaction”).attr(“action”);
