File size: 3,361 Bytes
212d7be |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
var canvas = document.getElementById('draw_canvas');
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var prevX, prevY;
var result_canvas = document.getElementById('result');
var result_ctx = result_canvas.getContext('2d');
result_canvas.width = canvas.width;
result_canvas.height = canvas.height;
var color_indicator = document.getElementById('color');
ctx.fillStyle = 'black';
color_indicator.value = '#000000';
var cur_id = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1);
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var init_hint = new Image();
init_hint.addEventListener('load', function() {
ctx.drawImage(init_hint, 0, 0);
});
init_hint.src = '../static/temp_images/' + cur_id + '/hint.png?' + getRandomInt(100000).toString();
result_canvas.addEventListener('load', function(e) {
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, 0, 0);
}, false);
console.log(window.location.pathname);
})
canvas.onload = function (e) {
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, 0, 0);
}, false);
console.log(window.location.pathname);
//img.src = ;
}
function reset() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
};
}
function colorize() {
var file_id = document.location.pathname;
var image = canvas.toDataURL();
$.post("/colorize", { save_file_id: file_id, save_image: image}).done(function( data ) {
//console.log(document.location.origin + '/img/' + data)
//window.open(document.location.origin + '/img/' + data, '_blank');
//result.src = data;
var img = new Image();
img.addEventListener('load', function() {
result_ctx.drawImage(img, 0, 0);
}, false);
img.src = data;
});
}
canvas.addEventListener('mousedown', function(e) {
var mousePos = getMousePos(canvas, e);
if (e.button == 0) {
ctx.fillRect(mousePos['x'], mousePos['y'], 1, 1);
}
if (e.button == 2) {
prevX = mousePos['x']
prevY = mousePos['y']
}
})
canvas.addEventListener('mouseup', function(e) {
if (e.button == 2) {
var mousePos = getMousePos(canvas, e);
var diff_width = mousePos['x'] - prevX;
var diff_height = mousePos['y'] - prevY;
ctx.clearRect(prevX, prevY, diff_width, diff_height);
}
})
canvas.addEventListener('contextmenu', function(evt) {
evt.preventDefault();
})
function color(color_value){
ctx.fillStyle = color_value;
color_indicator.value = color_value;
}
color_indicator.oninput = function() {
color(this.value);
}
function rgbToHex(rgb){
return '#' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16);
};
result_canvas.addEventListener('click', function(e) {
if (e.button == 0) {
var cur_pixel = result_ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
color(rgbToHex(cur_pixel));
}
})
|