看板 Marginalman 關於我們 聯絡資訊
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