<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>通過Canvas及File API縮放并上傳圖片</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="Canvas,File,Image">
<meta http-equiv="description" content="2013年8月8日,renfufei@qq.com">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
// 參數，最大高度
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");
// 因為是string，所以服務器需要對數據進行轉碼，寫文件操作等。
// 個人約定，所有http參數名字全部小寫
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: "myImage.png",
imagedata: imagedata
};
jQuery.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;
}
var text = xhr.responseText;
if(!text){
$tip2.text('網絡錯誤!');
return false;
}
var json = eval("("+text+")");
if(!json){
$tip2.text('解析錯誤!');
return false;
} else {
$tip2.text(json.message);
}
//console.dir(json);
//console.log(xhr.responseText);
}
});
};
function init(){
// 獲取DOM元素對象
var target = document.getElementById("drop-target");
// 阻止 dragover(拖到DOM元素上方) 事件傳遞
target.addEventListener("dragover", function(e){e.preventDefault();}, true);
// 拖動并放開鼠標的事件
target.addEventListener("drop", function(e){
// 阻止默認事件，以及事件傳播
e.preventDefault();
// 調用前面的加載圖像 函數，參數為dataTransfer對象的第一個文件
loadImage(e.dataTransfer.files[0]);
}, true);
var setheight = document.getElementById("setheight");
var maxheight = document.getElementById("maxheight");
setheight.addEventListener("click", function(e){
//
var value = maxheight.value;
if(/^\d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
}
e.preventDefault();
},true);
var btnsend = document.getElementById("btnsend");
btnsend.addEventListener("click", function(e){
//
sendImage();
},true);
};
window.addEventListener("DOMContentLoaded", function() {
//
init();
},false);
</script>
</head>
<body>
<div>
<h1>通過Canvas及File API縮放并上傳圖片</h1>
<p>從文件夾拖動一張照片到下方的盒子里， canvas 和 JavaScript將會自動的進行縮放.</p>
<div>
<input type="text" id="maxheight" value="100"/>
<button id="setheight">設置圖片最大高度</button>
<input type="hidden" name="action" value="receive.jsp" />
</div>
<div id="preview-row">
<div id="drop-target" style="width:400px;height:200px;min-height:100px;min-width:200px;background:#eee;cursor:pointer;">拖動圖片文件到這里...</div>
<div>
<div>
<button id="btnsend"> 上 傳 </button> <span id="tip2" style="padding:8px 0;color:#f00;"></span>
</div>
</div>
<div><h4>縮略圖：</h4></div>
<div id="preview" style="background:#f4f4f4;width:400px;height:200px;min-height:100px;min-width:200px;">
<canvas id="myCanvas"></canvas>
</div>
</div>
</div>
</body>
</html>
