API tools faq
paste
Guest User

Untitled

a guest
Nov 18th, 2017
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <meta name="robots" content="noindex">
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width inital-scale=1
  7. user-scalable=yes">
  8. <title>JS Bin</title>
  9. <style id="jsbin-css">
  10. *{margin:0;padding:0;}
  11. #tab,#menu{
  12. position:absolute;
  13. z-index:2;
  14. }
  15. #menu{margin-left:36px;}
  16. #tab{ font-size:20pt;
  17. width:36px;opacity:0.3;}
  18. #tab:hover{opacity:1}
  19. #sms{width:90px;}
  20. #myCanvas{width:100vw;}
  21. .scroll{ white-space: nowrap;overflow: scroll; -webkit-overflow-scrolling: touch;
  22. -ms-overflow-style: -ms-autohiding-scrollbar; }
  23. .scroll::-webkit-scrollbar{ width: 0px; height: 0px; padding-top: 0px;
  24. padding: 0px; background-color: #F5F5F5; }
  25. </style>
  26. </head>
  27. <body class="scroll">
  28. <button id='tab' onclick="sh()">≡</button>
  29. <span id="menu" style="display:none">
  30. <button onclick="save();">Save</button>
  31. <button onclick="restore();">Restore</button>
  32. <button onclick="initialize();">Clear</button>
  33. 색상 : <input type='color' id="selcolor" />
  34. 굵기 : <input type="number" min=1 max=10 value=6 id="selwidth" /><br>
  35. <input type='file' id='img' /><br>저장이름
  36. <input type='text' size=8 id='imgSaveAs' placeholder='png file name' />
  37. <input type='button' value='SaveAs' onclick='imgSave();' /><br>
  38. 휴대폰 : <input type="sms"
  39. id="tel" placeholder="010-1234-5678" / ><br>
  40. 메시지 : <textarea
  41. id="message"></textarea>
  42. <button onclick="sendsms(tel.value, message.value)">전송
  43. </button>
  44. </span>
  45. <canvas id="myCanvas"></canvas>
  46.  
  47. <script id="jsbin-javascript">
  48. var device;
  49. var drawing = false;
  50. var canvas;
  51. var context;
  52. var rect;
  53. var Width=screen.availWidth;
  54. var Height=screen.availHeight;
  55. var image = document.getElementById('img').addEventListener('change', imgLoad);
  56. function sendsms(t,m){
  57. //alert ( t + ":" + m);
  58.  
  59. location . href = " sms:" + t + "? &body= " + m;
  60. }
  61. function sh(){
  62. if(menu.style.display==="none"){
  63. menu.style.display="block";
  64. }else{
  65. menu.style.display="none";
  66. }
  67. }
  68. function imgLoad(e) {
  69. var cvs = document.getElementById('myCanvas');
  70. var ctx=cvs.getContext('2d');
  71. var img = new Image();
  72. img.src = URL.createObjectURL(e.target.files[0]);
  73. img.onload = function() {
  74. cvs.width=img.width=Width;//img.width;
  75. cvs.height=Height;//img.height;
  76. ctx.drawImage(img, 0,0,cvs.width,cvs.height);
  77. };
  78. }
  79. function imgSave(){
  80. var imgFileName=document.getElementById('imgSaveAs').value;
  81. var cvs = document.getElementById('myCanvas');
  82. var ctx = canvas.getContext('2d');
  83. var image=cvs.toDataURL('image/png');
  84. var imageFileAsBlob = new Blob([image],{type:'image/png'});
  85. var link = document.createElement('a');
  86. link.download = imgFileName;
  87. link.href = cvs.toDataURL();
  88. //link.href=window.URL.createObjectURL(imageFileAsBlob);
  89. link.click();
  90. }
  91. function initialize() { //alert(screen.availHeight);
  92. canvas.width=Width;
  93. canvas.height=Height;
  94. context.clearRect(0,0,Width,Height);
  95. context.beginPath();
  96. context.rect(0,0,Width,Height);
  97. context.strokeStyle = "silver";
  98. context.fillStyle = "LightGoldenrodYellow";
  99. context.fill();
  100. context.lineWidth = 0.5;
  101. for(i=1;(i*50)<=Height;i++) {
  102. context.moveTo(5,i*50);
  103. context.lineTo(Width-5, i*50);
  104. }
  105. context.stroke();
  106. }
  107. function startDrawing() {
  108. if (device == "moblieDevice") event.preventDefault();
  109. event.preventDefault();
  110. drawing = true;
  111. context.beginPath();
  112. context.strokeStyle = selcolor.value;//"dimgray";
  113. //context.lineWidth = 1;
  114. //context.arc(event.clientX - rect.left, event.clientY - rect.top, 3, 0, 2*Math.PI);
  115. context.stroke();
  116. context.fillStyle = "dimgray";
  117. context.fill();
  118. context.closePath();
  119. context.beginPath();
  120. context.moveTo(event.clientX - rect.left, event.clientY - rect.top);
  121. context.lineCap = "round";
  122. context.lineWidth = selwidth.value;
  123.  
  124. }
  125. function keepDrawing() {
  126. if (drawing) {
  127. var x,y;
  128. if (device == "mobileDevice") {
  129. x = event.targetTouches[0].pageX;
  130. y = event.targetTouches[0].pageY;
  131. }
  132. else {
  133. x = event.clientX;
  134. y = event.clientY;
  135. }
  136. context.lineTo(x - rect.left, y - rect.top);
  137. context.stroke();
  138. }
  139. }
  140. function stopDrawing() {
  141. if (drawing) {
  142. context.stroke();
  143. drawing = false;
  144. }
  145. }
  146. function save() {
  147. var localStorage = window.localStorage;
  148. if (!localStorage) {
  149. // local storage is not supported by this browser.
  150. // do nothing
  151. }
  152. else {
  153. localStorage.canvas = canvas.toDataURL();
  154. }
  155. }
  156. function restore() {
  157. var localStorage = window.localStorage;
  158. if (!localStorage) {
  159. // local storage is not supported by this browser.
  160. // do nothing
  161. }
  162. else {
  163. var img = new Image();
  164. img.src = localStorage.canvas;
  165. img.onload = function() {
  166. context.drawImage(img, 0, 0);
  167. };
  168. }
  169. }
  170. function getDeviceType() {
  171. var str = navigator.userAgent;
  172. if (str.match(/(ipad)|(iphone)|(ipod)|(android)|(webos)/i))
  173. device = "mobileDevice";
  174. else
  175. device = "desktopPC";
  176. }
  177. function startMemo() {
  178. canvas = document.getElementById("myCanvas");
  179. context = canvas.getContext("2d");
  180. rect = canvas.getBoundingClientRect();
  181. initialize();
  182. }
  183. getDeviceType();
  184. document.body.onload = startMemo;
  185. dom = document.getElementById("myCanvas");
  186. // for desktop PC
  187. dom.ontouchstart = startDrawing;
  188. dom.ontouchmove = keepDrawing;
  189. dom.ontouchend = stopDrawing;
  190. // for mobile devices
  191. dom.onmousedown = startDrawing;
  192. dom.onmousemove = keepDrawing;
  193. dom.onmouseup = stopDrawing;
  194. </script>
  195.  
  196.  
  197. <script id="jsbin-source-css" type="text/css">*{margin:0;padding:0;}
  198. #tab,#menu{
  199. position:absolute;
  200. z-index:2;
  201. }
  202. #menu{margin-left:36px;}
  203. #tab{ font-size:20pt;
  204. width:36px;opacity:0.3;}
  205. #tab:hover{opacity:1}
  206. #sms{width:90px;}
  207. #myCanvas{width:100vw;}
  208. .scroll{ white-space: nowrap;overflow: scroll; -webkit-overflow-scrolling: touch;
  209. -ms-overflow-style: -ms-autohiding-scrollbar; }
  210. .scroll::-webkit-scrollbar{ width: 0px; height: 0px; padding-top: 0px;
  211. padding: 0px; background-color: #F5F5F5; }</script>
  212.  
  213. <script id="jsbin-source-javascript" type="text/javascript">var device;
  214. var drawing = false;
  215. var canvas;
  216. var context;
  217. var rect;
  218. var Width=screen.availWidth;
  219. var Height=screen.availHeight;
  220. var image = document.getElementById('img').addEventListener('change', imgLoad);
  221. function sendsms(t,m){
  222. //alert ( t + ":" + m);
  223.  
  224. location . href = " sms:" + t + "? &body= " + m;
  225. }
  226. function sh(){
  227. if(menu.style.display==="none"){
  228. menu.style.display="block";
  229. }else{
  230. menu.style.display="none";
  231. }
  232. }
  233. function imgLoad(e) {
  234. var cvs = document.getElementById('myCanvas');
  235. var ctx=cvs.getContext('2d');
  236. var img = new Image();
  237. img.src = URL.createObjectURL(e.target.files[0]);
  238. img.onload = function() {
  239. cvs.width=img.width=Width;//img.width;
  240. cvs.height=Height;//img.height;
  241. ctx.drawImage(img, 0,0,cvs.width,cvs.height);
  242. };
  243. }
  244. function imgSave(){
  245. var imgFileName=document.getElementById('imgSaveAs').value;
  246. var cvs = document.getElementById('myCanvas');
  247. var ctx = canvas.getContext('2d');
  248. var image=cvs.toDataURL('image/png');
  249. var imageFileAsBlob = new Blob([image],{type:'image/png'});
  250. var link = document.createElement('a');
  251. link.download = imgFileName;
  252. link.href = cvs.toDataURL();
  253. //link.href=window.URL.createObjectURL(imageFileAsBlob);
  254. link.click();
  255. }
  256. function initialize() { //alert(screen.availHeight);
  257. canvas.width=Width;
  258. canvas.height=Height;
  259. context.clearRect(0,0,Width,Height);
  260. context.beginPath();
  261. context.rect(0,0,Width,Height);
  262. context.strokeStyle = "silver";
  263. context.fillStyle = "LightGoldenrodYellow";
  264. context.fill();
  265. context.lineWidth = 0.5;
  266. for(i=1;(i*50)<=Height;i++) {
  267. context.moveTo(5,i*50);
  268. context.lineTo(Width-5, i*50);
  269. }
  270. context.stroke();
  271. }
  272. function startDrawing() {
  273. if (device == "moblieDevice") event.preventDefault();
  274. event.preventDefault();
  275. drawing = true;
  276. context.beginPath();
  277. context.strokeStyle = selcolor.value;//"dimgray";
  278. //context.lineWidth = 1;
  279. //context.arc(event.clientX - rect.left, event.clientY - rect.top, 3, 0, 2*Math.PI);
  280. context.stroke();
  281. context.fillStyle = "dimgray";
  282. context.fill();
  283. context.closePath();
  284. context.beginPath();
  285. context.moveTo(event.clientX - rect.left, event.clientY - rect.top);
  286. context.lineCap = "round";
  287. context.lineWidth = selwidth.value;
  288.  
  289. }
  290. function keepDrawing() {
  291. if (drawing) {
  292. var x,y;
  293. if (device == "mobileDevice") {
  294. x = event.targetTouches[0].pageX;
  295. y = event.targetTouches[0].pageY;
  296. }
  297. else {
  298. x = event.clientX;
  299. y = event.clientY;
  300. }
  301. context.lineTo(x - rect.left, y - rect.top);
  302. context.stroke();
  303. }
  304. }
  305. function stopDrawing() {
  306. if (drawing) {
  307. context.stroke();
  308. drawing = false;
  309. }
  310. }
  311. function save() {
  312. var localStorage = window.localStorage;
  313. if (!localStorage) {
  314. // local storage is not supported by this browser.
  315. // do nothing
  316. }
  317. else {
  318. localStorage.canvas = canvas.toDataURL();
  319. }
  320. }
  321. function restore() {
  322. var localStorage = window.localStorage;
  323. if (!localStorage) {
  324. // local storage is not supported by this browser.
  325. // do nothing
  326. }
  327. else {
  328. var img = new Image();
  329. img.src = localStorage.canvas;
  330. img.onload = function() {
  331. context.drawImage(img, 0, 0);
  332. };
  333. }
  334. }
  335. function getDeviceType() {
  336. var str = navigator.userAgent;
  337. if (str.match(/(ipad)|(iphone)|(ipod)|(android)|(webos)/i))
  338. device = "mobileDevice";
  339. else
  340. device = "desktopPC";
  341. }
  342. function startMemo() {
  343. canvas = document.getElementById("myCanvas");
  344. context = canvas.getContext("2d");
  345. rect = canvas.getBoundingClientRect();
  346. initialize();
  347. }
  348. getDeviceType();
  349. document.body.onload = startMemo;
  350. dom = document.getElementById("myCanvas");
  351. // for desktop PC
  352. dom.ontouchstart = startDrawing;
  353. dom.ontouchmove = keepDrawing;
  354. dom.ontouchend = stopDrawing;
  355. // for mobile devices
  356. dom.onmousedown = startDrawing;
  357. dom.onmousemove = keepDrawing;
  358. dom.onmouseup = stopDrawing;</script></body>
  359. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!