<!doctype html>
<html>
<head>
</head>
<meta charset="utf-8" />
<style>
.doc {
width: 604px;
margin: 0 auto;
}
canvas {
border: 2px solid #888;
}
</style>
<body>
<div class="doc" id="sizeCanvas">
<input type="file" id="msg" />
<input name="urlinput" class="urlInput" type="hidden" id="msg2" />
<canvas width="300" height="300" id="cvs"></canvas>
<div>
<p>
<button id="save">save</button>or<button id="convert">预览</button>
as:<input type="button" value="插入图片" onclick="resize();resizenext();" />
<select id="sel">
<option value="png">png</option>
<option value="jpeg">jpeg</option>
<option value="bmp">bmp</option>
</select>
<br />
预览宽度:/
<input type="number" value="300" id="imgW" />
<br />
预览高度:
<input type="number" value="200" id="imgH" />
<br>
文件名 :
<input type="text" placeholder="optional" id="imgFileName">
</p>
</div>
<div id="imgs">
</div>
</div>
<script>
var c = document.getElementById("cvs");
var cxt = c.getContext("2d");
var canvas, ctx, bMouseIsDown = false, iLastX, iLastY, $save, $imgs, $convert, $imgW, $imgH, $sel;
function resize() {//载入和图片大小相同的canvas
var str = document.getElementById("msg").value;
var strs = str.split("\\fakepath\\");
strs = 'http://localhost:8080/Demo_1109/jpg/'+strs[strs.length-1];
document.getElementById("msg2").value = strs;
var img = new Image();
img.src = strs;
canvas.width = img.width;
canvas.height = img.height;
img.src = strs;
cxt.drawImage(img, 0, 0);
}
function resizenext() {//再次载入
var str = document.getElementById("msg").value;
var strs = str.split("\\fakepath\\");
strs = 'http://localhost:8080/Demo_1109/jpg/'+strs[strs.length-1];
document.getElementById("msg2").value = strs;
var img = new Image();
img.src = strs;
cxt.drawImage(img, 0, 0);
}
function init() {
canvas = document.getElementById('cvs');
ctx = canvas.getContext('2d');
$save = document.getElementById('save');
$convert = document.getElementById('convert');
$sel = document.getElementById('sel');
$imgs = document.getElementById('imgs');
$imgW = document.getElementById('imgW');
$imgH = document.getElementById('imgH');
$imgFileName = document.getElementById('imgFileName');
bind();
}
function bind() {
canvas.onmousedown = function(e) {
bMouseIsDown = true;
iLastX = e.clientX
- canvas.offsetLeft
+ (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
iLastY = e.clientY
- canvas.offsetTop
+ (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
}
canvas.onmouseup = function() {
bMouseIsDown = false;
iLastX = -1;
iLastY = -1;
}
canvas.onmousemove = function(e) {
if (bMouseIsDown) {
var iX = e.clientX
- canvas.offsetLeft
+ (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
var iY = e.clientY
- canvas.offsetTop
+ (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
ctx.moveTo(iLastX, iLastY);
ctx.lineTo(iX, iY);
ctx.stroke();
iLastX = iX;
iLastY = iY;
}
};
$save.onclick = function(e) {
var type = $sel.value, w = $imgW.value, h = $imgH.value;
f = $imgFileName.value;
Canvas2Image.saveAsImage(canvas, w, h, type, f);
}
$convert.onclick = function(e) {
var type = $sel.value, w = $imgW.value, h = $imgH.value;
$imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type))
}
}
onload = init;
var canvas = document.getElementById("cvs");
var cxt = canvas.getContext("2d");
cxt.strokeStyle = "#ff8040";
cxt.fillStyle = "#0000ff";
</script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<script type="text/javascript" src="js/convertImgToBase64.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/uploadPreview.js"></script>
</body>
</html>
canvas.rar （24个子文件） 
canvas src WebRoot META-INF 
MANIFEST.MF 36B WEB-INF web.xml 669B .gitignore 12B lib 
commons-fileupload-1.2.jar 52KB commons-beanutils-1.7.0.jar 184KB commons-logging-1.1.jar 52KB ezmorph-1.0.4.jar 84KB commons-lang-2.4.jar 256KB jstl-1.2.jar 405KB commons-collections-3.2.jar 558KB commons-io-1.3.2.jar 86KB json-lib-2.2.2-jdk15.jar 141KB js jquery.min.js 95KB jquery-1.10.2.min.js 91KB npm.js 484B canvas2image.js 8KB uploadPreview.js 5KB jquery-1.10.2.js 267KB html2canvas.js 123KB convertImgToBase64.js 702B jpg 
1.jpg 5KB 304695.jpg 109KB
123.png 36KB
myhtml.html 4KB资源评论
