
利用 input type="file"選取本地端圖檔用FileReader的readAsDataURL讀取圖檔將圖畫到canvas用range來當sliderbar,注意firefox不支援range接下來就是拿canvas來做影像處理了最後,再利用canvas.toDataURL("image/jpeg")轉回圖檔
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mosaic</title>
</head>
<body>
<input type="file" id="input" /><br/>
<canvas id="result" ></canvas>
<script src="jquery-1.9.0.min.js"></script>
<script src="mosaic.js"></script>
<script src="main.js"></script>
</body>
</html>