ctrlcctrlv
11 years ago
3 changed files with 227 additions and 0 deletions
@ -0,0 +1,203 @@ |
|||||
|
$(function() { |
||||
|
var canvas = $("#cvs"); |
||||
|
var context = canvas[0].getContext("2d"); |
||||
|
var is_drawing = false; |
||||
|
var text = ""; |
||||
|
var eraser = getcolor = fill = false; |
||||
|
context.strokeStyle = context.fillStyle = "black"; |
||||
|
|
||||
|
//http://stackoverflow.com/a/5624139/1901658
|
||||
|
function hexToRgb(hex) { |
||||
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); |
||||
|
return result ? { |
||||
|
r: parseInt(result[1], 16), |
||||
|
g: parseInt(result[2], 16), |
||||
|
b: parseInt(result[3], 16) |
||||
|
} : null; |
||||
|
} |
||||
|
|
||||
|
//http://stackoverflow.com/a/4025958/1901658
|
||||
|
function arraysEqual(arr1, arr2) { |
||||
|
if(arr1.length !== arr2.length) |
||||
|
return false; |
||||
|
for(var i = arr1.length; i--;) { |
||||
|
if(arr1[i] !== arr2[i]) |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
function getmousepos(e){ |
||||
|
var r = canvas[0].getBoundingClientRect(); |
||||
|
mouseX = Math.round(e.clientX - r.left); |
||||
|
mouseY = Math.round(e.clientY - r.top); |
||||
|
} |
||||
|
|
||||
|
function setcolor(){ |
||||
|
context.strokeStyle = context.fillStyle = "#"+$(".color").val(); |
||||
|
} |
||||
|
|
||||
|
function flood_fill(x, y, target){ |
||||
|
var pixel = context.createImageData(1,1); |
||||
|
var color = hexToRgb("#"+$(".color").val()); |
||||
|
pixel.data[0] = color.r; pixel.data[1] = color.g; pixel.data[2] = color.b; pixel.data[3] = 255; |
||||
|
var queue = []; |
||||
|
var node = [x, y]; |
||||
|
queue.push(node); |
||||
|
//var iters = 0;
|
||||
|
while (queue.length > 0) { |
||||
|
var n = queue.pop(); |
||||
|
var data = context.getImageData(n[0], n[1], 1, 1).data; |
||||
|
var d = [data[0], data[1], data[2], data[3]]; |
||||
|
var t = [target[0], target[1], target[2], target[3]]; |
||||
|
if (arraysEqual(d, t) && n[0] < 500 && n[1] < 250 && n[0] > -1 && n[1] > -1){ |
||||
|
context.putImageData(pixel, n[0], n[1]); |
||||
|
queue.push([n[0], n[1]-1]); |
||||
|
queue.push([n[0], n[1]+1]); |
||||
|
queue.push([n[0]-1, n[1]]); |
||||
|
queue.push([n[0]+1, n[1]]); |
||||
|
//iters++;
|
||||
|
} |
||||
|
//if (iters%100===0){console.log(n[0]);console.log(n[1])}
|
||||
|
|
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
function color_under_pixel(x, y){ |
||||
|
return context.getImageData(x, y, 1, 1).data; |
||||
|
} |
||||
|
|
||||
|
canvas.on("mousedown", function(e){ |
||||
|
getmousepos(e); |
||||
|
$(this).css("cursor","none"); |
||||
|
if (getcolor) { |
||||
|
var imagedata = color_under_pixel(mouseX, mouseY); |
||||
|
$("#color")[0].color.fromRGB(imagedata[0], imagedata[1], imagedata[2]); |
||||
|
getcolor = false; |
||||
|
setcolor(); |
||||
|
} |
||||
|
else if (fill && !eraser) { |
||||
|
flood_fill(mouseX, mouseY, color_under_pixel(mouseX, mouseY)); |
||||
|
fill = false; |
||||
|
} |
||||
|
else { |
||||
|
is_drawing = true; |
||||
|
context.beginPath(); |
||||
|
context.moveTo(mouseX,mouseY); |
||||
|
context.fillText(text,mouseX,mouseY); |
||||
|
$("#confirm_oekaki").attr("checked",true); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
canvas.on("mousemove", function(e){ |
||||
|
getmousepos(e); |
||||
|
if (is_drawing) { |
||||
|
context.lineTo(mouseX,mouseY); |
||||
|
context.stroke() |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
canvas.on("mouseup mouseout", function(e){ |
||||
|
context.stroke() |
||||
|
$(this).css("cursor","auto"); |
||||
|
is_drawing = false; |
||||
|
}); |
||||
|
|
||||
|
$("#brushsize").on("click",function(){ |
||||
|
var size = prompt("Enter brush size"); |
||||
|
if (parseInt(size) == NaN) { |
||||
|
return |
||||
|
} |
||||
|
else { |
||||
|
context.lineWidth = size; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$(".color").on("change", setcolor); |
||||
|
|
||||
|
$("#text").on("click", function(e){ |
||||
|
text = prompt("Enter some text") || ""; |
||||
|
context.font = prompt("Enter font or leave alone", context.font) |
||||
|
}); |
||||
|
|
||||
|
function clear(){ |
||||
|
context.beginPath(); |
||||
|
context.clearRect(0,0,canvas.width(),canvas.height()); |
||||
|
$("#confirm_oekaki").attr("checked",false) |
||||
|
}; |
||||
|
|
||||
|
$("#clear").on("click", clear); |
||||
|
|
||||
|
$("#save").on("click",function(){ |
||||
|
$("#savebox").val(canvas[0].toDataURL()); |
||||
|
}); |
||||
|
|
||||
|
$("#load").on("click", function(){ |
||||
|
clear(); |
||||
|
var img = new Image(); |
||||
|
img.src = $("#savebox").val(); |
||||
|
img.onload = function(){context.drawImage(img,0,0);}; |
||||
|
$("#confirm_oekaki").attr("checked",true) |
||||
|
}); |
||||
|
|
||||
|
$("#eraser").on("click", function(){ |
||||
|
if (eraser) { |
||||
|
eraser = false; |
||||
|
context.strokeStyle = context.fillStyle = "#"+$(".color").val(); |
||||
|
context.globalCompositeOperation = old_gco; |
||||
|
} |
||||
|
else { |
||||
|
eraser = true; |
||||
|
old_gco = context.globalCompositeOperation; |
||||
|
context.globalCompositeOperation = "destination-out"; |
||||
|
context.strokeStyle = "rgba(0,0,0,1)"; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$("#getcolor").on("click", function(){ |
||||
|
getcolor = true; |
||||
|
}); |
||||
|
|
||||
|
$("#fill").on("click", function(){ |
||||
|
fill = true; |
||||
|
}); |
||||
|
|
||||
|
function dataURItoBlob(dataURI) { |
||||
|
var binary = atob(dataURI.split(',')[1]); |
||||
|
var array = new Array(binary.length); |
||||
|
for(var i = 0; i < binary.length; i++) { |
||||
|
array[i] = binary.charCodeAt(i); |
||||
|
} |
||||
|
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); |
||||
|
} |
||||
|
|
||||
|
$("form[name='post']").on("submit", function(e){ |
||||
|
if ($("#confirm_oekaki").is(":checked")) { |
||||
|
e.preventDefault(); |
||||
|
$("input[type='file']").remove(); |
||||
|
var dataURL = canvas[0].toDataURL(); |
||||
|
var blob = dataURItoBlob(dataURL); |
||||
|
var fd = new FormData(document.forms[0]); |
||||
|
fd.append("file", blob, "Oekaki.png"); |
||||
|
fd.append("post", $("input[name='post']").val()); |
||||
|
$.ajax({ |
||||
|
type: "POST", |
||||
|
url: "/post.php", |
||||
|
data: fd, |
||||
|
processData: false, |
||||
|
contentType: false, |
||||
|
success: function(data) { |
||||
|
location.reload(); |
||||
|
}, |
||||
|
error: function(data) {alert("Something went wrong!"); console.log(data)} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
return true; |
||||
|
}; |
||||
|
}); |
||||
|
}); |
Loading…
Reference in new issue