var canvas;
var context;
var Zoomfactor = 1;
var drawWd;
var drawHt;
var img;
function onWindowLoad() {
canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener("wheel", doMouseWheel, false);
canvas.addEventListener("mousemove", doMouseMove, false);
context = canvas.getContext("2d");
}
function doMouseDown(event) {
canvas_x = event.pageX;
canvas_y = event.pageY;
alert("X=" + canvas_x + " Y=" + canvas_y);
}
function doMouseWheel(event) {
if (event.deltaY < 0) {
Zoomfactor++;
}
else if (event.deltaY > 0) {
Zoomfactor--;
if(Zoomfactor < 1) {
Zoomfactor = 1;
}
}
if (Zoomfactor > 1) {
drawWd = img.naturalWidth * Zoomfactor;
drawHt = img.naturalHeight * Zoomfactor;
}
else if (Zoomfactor <= 1) {
drawWd = img.naturalWidth;
drawHt = img.naturalHeight;
}
canvas.width = drawWd;
canvas.height = drawHt;
context.drawImage(img, 0, 0, drawWd, drawHt);
}
function doMouseMove(event) {
}
function LoadClick(event) {
var inputFile = document.getElementById("FileInput");
img = new Image();
var file = inputFile.files[0];
if (file.type.match('image.*')) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
img.src = evt.target.result;
img.onload = function () {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}
}
}
}
}
Input File: |
|