作者Euphokumiko (上低音號)
看板Marginalman
標題Re: [閒聊] 程式接龍
時間Wed Oct 16 23:24:24 2019
let x = 'black', //color
y = 2; //thickness
let prevX = 0,
prevY = 0,
currX = 0,
currY = 0,
flag = false,
dot_flag = false,
w,
h;
let index = [63, 107, 151, 196, 240, 285, 329];
let entire_canvas, entire_ctx, copy;
let example = ["../image2.jpeg", "../example1.png", "../example2.png",
"../example3.png"]
let can = [];
can.length = 7;
class canvasarea {
constructor(name) {
//console.log(name);
this.canvas = document.getElementById(name);
//console.log(this.canvas)
this.entire = document.getElementById('entire').getContext('2d');
this.ctx = this.canvas.getContext('2d');
this.ctx.fillStyle = 'black';
this.ctx.fillRect(30, 0, 80, 40);
this.x = 'black';
this.y = 2;
this.w = this.canvas.width;
this.h = this.canvas.height;
//console.log(this.lock);
//this.lock.addEventListener('click', this.onclick)
this.canvas.addEventListener('mousedown', this.mouseDown);
this.canvas.addEventListener('mousemove', this.mouseMove);
this.canvas.addEventListener('mouseup', this.mouseUp);
this.canvas.addEventListener('touchstart', this.touchStart);
this.canvas.addEventListener('touchmove', this.touchMove);
this.canvas.addEventListener('touchend', this.touchEnd);
}
copy(e_x, e_y) {
this.entire.drawImage(this.ctx.canvas, e_x, e_y);
}
mouseDown(e) {
this.draw = true;
this.ctx = this.getContext("2d");
this.ctx.strokeStyle = x;
this.ctx.lineWidth = y;
var o = this;
this.offsetX = this.offsetLeft;
this.offsetY = this.offsetTop;
while (o.offsetParent) {
o = o.offsetParent;
this.offsetX += o.offsetLeft;
this.offsetY += o.offsetTop;
}
this.ctx.beginPath();
this.ctx.moveTo(e.pageX - this.offsetX, e.pageY - this.offsetY);
}
touchStart(e) {
this.draw = true;
this.ctx = this.getContext("2d");
this.touch = e.targetTouches[0];
this.ctx.strokeStyle = x;
this.ctx.lineWidth = y;
var o = this;
this.offsetX = this.offsetLeft;
this.offsetY = this.offsetTop;
while (o.offsetParent) {
o = o.offsetParent;
this.offsetX += o.offsetLeft;
this.offsetY += o.offsetTop;
}
this.ctx.beginPath();
this.ctx.moveTo(this.touch.pageX - this.offsetX, this.touch.pageY -
this.offsetY);
//this.ctx.fill();
e.preventDefault();
}
mouseMove(e) {
if ((e.pageX - this.offsetX >= 82) || e.pageY - this.offsetY >= 42) {
this.draw = false;
return;
}
if (this.draw) {
this.ctx.lineTo(e.pageX - this.offsetX, e.pageY - this.offsetY);
this.ctx.stroke();
}
}
touchMove(e) {
this.touch = e.targetTouches[0];
if ((this.touch.pageX - this.offsetX >= 82) || this.touch.pageY -
this.offsetY >= 42) {
this.draw = false;
return;
}
if (this.draw) {
this.ctx.lineTo(this.touch.pageX - this.offsetX, this.touch.pageY
- this.offsetY);
this.ctx.stroke();
}
e.preventDefault();
}
touchEnd(e) {
this.draw = false;
e.preventDefault();
this.cPush;
}
mouseUp(e) {
this.draw = false;
this.cPush;
}
reset(e) {
this.ctx.fillStyle = 'white';
this.ctx.fillRect(0, 0, 108, 40);
console.log(this.ctx.getImageData(10, 10, 1, 1))
this.ctx.fillStyle = 'black';
this.ctx.fillRect(30, 0, 80, 40);
}
}
function init() {
copy = document.getElementById('cpy');
for (let h = 0; h < 7; h++) {
let temp = "tutorial" + h;
can[h] = new canvasarea(temp);
}
loadimage(0);
}
function loadimage(num) {
entire_canvas = document.getElementById('entire');
entire_ctx = entire_canvas.getContext('2d');
entire_ctx.fillStyle = 'white';
entire_ctx.fillRect(0,0,108,420)
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
entire_ctx.drawImage(img1, 5, 0);
};
//img1.src = '
https://i.imgur.com/qYNtbZT.jpg';
//img1.src = '
https://i.imgur.com/TJHC8U7.jpg';
img1.src = example[num];
img1.setAttribute("crossOrigin",'Anonymous');
if(!num){
copy.setAttribute('onclick', `cpy()`)
}
else{
copy.setAttribute('onclick',`cantmodify()`);
}
}
function set(col, wid) {
x = col;
y = wid;
}
function cpy() {
for (let k = 0; k < 7; k++) {
fill(can[k]);
can[k].copy(5, index[k])
}
}
function saveimage() {
let img = canvas.toDataURL("image/png").replace("image/png",
"image/octet-stream");
cPushArray.push(img);
window.location.href = img;
}
function rs() {
for (let h = 0; h < 7; h++) {
can[h].reset();
}
}
function reset() {
rs();
loadimage(0);
}
function fill(c) {
for (let u = 0; u < c.h; u++) { //y index
for (let g = 0; g < c.w; g++) { //x index
if (c.ctx.getImageData(g, u, 1, 1).data[3] &&
!c.ctx.getImageData(g, u, 1, 1).data[0]) {
c.ctx.strokeStyle = 'black';
c.ctx.lineWidth = 2;
c.ctx.beginPath();
c.ctx.moveTo(g, u);
c.ctx.lineTo(c.w, u);
c.ctx.stroke();
break;
}
}
}
}
async function data() {
return new Promise((resolve, reject) => {
//ctx.drawImage(this, 0, 0);
let temp = entire_canvas.toDataURL('image/jpeg');
console.log(temp);
resolve(temp);
})
}
function cantmodify(){
alert('example cannot be modified');
}
/*
function torgb() {
let mumi = document.getElementById('entire').getContext('2d');
let t_h = 420,
t_w = 108;
let arr = [];
for (let j = 0; j < t_h; j++) {
let tem = [];
for (let k = 0; k < t_w; k++) {
let temp = mumi.getImageData(k, j, 1, 1).data;
if ((temp[0] == 255) && (temp[1] == 255) && (temp[2] == 255)) {
tem.push(0);
} else {
tem.push(1);
}
}
arr.push(tem);
}
console.log(arr);
return arr;
}
*/
function makeRequest(method, url) {
return new Promise(async (resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.timeout = 20000;
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
console.log('request sent')
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
let body = JSON.stringify({
Kumiko: await data()
});
xhr.send(body);
});
}
async function redir() {
let ssss = await makeRequest("post", "
http://140.113.68.220:3000/temp");
console.log(ssss);
ssss = JSON.parse(ssss);
ssss = ssss.result;
localStorage.clear();
localStorage.setItem('pics', ssss.join());
window.location = './final.html';
}
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.113.68.220 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Marginalman/M.1571239466.A.E35.html
→ sos976431: 大師 10/16 23:25
→ star123: 你看 這種板友就是不合作 一個人寫一大串 別人怎麼接 10/16 23:25
→ star123: ==害群之馬 可惡 10/16 23:25
噓 ken890126: 都給妳寫完我寫個屁 10/16 23:26
推 siscon: 小畫家? 10/16 23:26
→ Euphokumiko: 哪個低能兒馬上跑來玩我API 10/16 23:27
→ star123: 笑死 10/16 23:27
噓 surimodo: 404 = = 10/16 23:33
→ Euphokumiko: 幹,一群人都目幹沒看到method是post484 10/16 23:34