{"id":221,"date":"2013-12-23T15:55:35","date_gmt":"2013-12-23T06:55:35","guid":{"rendered":"http:\/\/wp.ultimai.org\/wp\/?p=221"},"modified":"2024-05-22T06:56:59","modified_gmt":"2024-05-21T21:56:59","slug":"garbled_mysql","status":"publish","type":"post","link":"https:\/\/wp.ultimai.org\/?p=221","title":{"rendered":"spoit tool"},"content":{"rendered":"<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1\" crossorigin=\"anonymous\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.js\" integrity=\"sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=\" crossorigin=\"anonymous\"><\/script>\r\n<!--\u672c\u756a\u3067\u4f7f\u3063\u3066\u308b,\u5f8c\u3067\u6d88\u3059-->\r\n<link rel=\"stylesheet\" href=\"https:\/\/pearl-yacht.jp\/wp\/wp-content\/themes\/pearl-yacht\/css\/base.css\"> \r\n<link rel=\"stylesheet\" href=\"https:\/\/pearl-yacht.jp\/wp\/wp-content\/themes\/pearl-yacht\/style.css\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/pearl-yacht.jp\/wp\/wp-content\/themes\/pearl-yacht\/css\/next.css?ver=5.5.7\">\r\n<!--\u672c\u756a\u3067\u4f7f\u3063\u3066\u308b,\u5f8c\u3067\u6d88\u3059-->\r\n\r\n\r\n\r\n<style>.demo_color{width: 87px;height: 59px;border: solid 3px #dedede;}\r\n.bd-gray{border: 2px solid gray;}\r\n.bd-gray-1{border: 1px solid #aaa;}\r\n#demo_canvas{padding:0 ;background-image:url(\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/ichimatsu.png\"); height: 530px; overflow:hidden;border: solid 1px #999;}\r\n.w-pc{width:940px; margin-left: auto; margin-right: auto; }\r\n.ichimatsu{background:url(\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/ichimatsu.png\")}\r\ndiv.droparea { max-width: 600px; height: 200px; border: 2px solid gray; padding-top:4em;margin-left: auto; margin-right: auto;}\r\n.radius-1{border-radius: 10px;}\r\ndiv.droparea:hover { cursor: pointer;}\r\ndiv.droparea p { text-align: center;}\r\ninput.inputfile { display: none;}\r\n.hide{display:none}\r\n.spoit-cur{cursor:grab}\r\n.spoit-cur:active{cursor:grabbing}\r\nimg.btnclose {position: absolute;top:-6px;right:-6px;width: 36px;height:auto;filter: contrast(0.5);cursor: pointer;}\r\n.w100{width:100%;height:auto}\r\n.mt-4{margin-top:2em}\r\n.mb-6{margin-bottom:3em !important}\r\n.ml-0{margin-left: 0;}\r\n.mr-0{margin-right: 0;}\r\n.pl-4{padding-left: 2em !important;}\r\n.pr-4{padding-right: 2em !important;}\r\n.block{display:block}\r\n.weight-7{font-weight:700}\r\n.inline-block{display: inline-block;}\r\n.radius{border-radius:36px;}\r\n.btn-drop{ height: auto; padding: 0.2em 2em 0.3em; line-height: 4; display: inline; }\r\n.text-2xl{font-size: 1.25em; !important}\r\n.back-gray{background:#dedede}\r\n.border-glay{border:solid 3px #dedede}\r\n.decimal{font-size: 2em; display: inline-block;box-sizing: border-box;vertical-align: top;padding: 0.3em 0.3em 0 0;}\r\n#return small{font-size:70%}\r\n.relative{position: relative;}\r\n.copyalert{position: absolute;z-index:8;top: -15px;background: #333;color: #fff;padding: 0.3em .6em;border-radius: 12px;box-shadow: 2px 2px 4px #999;}\r\n.copybtn{cursor: pointer;}\r\n.copybtn a{color:#666;}\r\n.copybtn:hover{filter: brightness(1.5);}\r\n.nowrap{flex-wrap:nowrap;display: flex;}\r\n#files{width:0;height:0;opacity:0}\r\nli{list-style-type: none !important;}\r\n#preview img, \r\n#list span img{display:none}\r\n.drag-and-drop{position:absolute;}\r\n.mcbride{ margin-left: 2em;zoom: 200%; vertical-align: bottom;}\r\n.martina{display: inline-block; width: 10em; text-align: center;border-radius: 5px;height:50px}\r\n.martina label{margin-bottom: 0;display:inline-block;width:31%;}\r\n#notice-getcolor{color:red;display:none; position: absolute;left: 1em;}\r\n.fixed{position:sticky;z-index: 99999999999999999;}\r\ninput[type=\"checkbox\"] { display: inline !important;}\r\n.martina button{border:none !important}\r\n.circle{width:48px;height:48px;border-radius:24px; margin-right:12px;border:1px solid #ccc}\r\n\r\n@media screen and (max-width:991px) {\r\n  .decimal{font-size: 1.4em;}\r\n  .w-pc{width:100%}\r\n}\r\n@media screen and (max-width:767px) {\r\n  .mcbride{ margin-left: .5em;}\r\n  .decimal{font-size: 2em;}\r\n  #demo_canvas ,.w-pc{width:100%}\r\n  .text-2xl{font-size: 1em !important}\r\n}  \r\n@media screen and (max-width:474px) {\r\n  .exbtn{display:flex;}\r\n  .exbtn > label:nth-of-type(1){display:inline-block; width:calc(45% - 75px)}\r\n  .exbtn > label:nth-of-type(2){display:inline-block; width:calc(55% - 75px)}\r\n  .exbtn > label span{display:block;padding-left: .5em;}\r\n}\r\n@media screen and (max-width:448px) {\r\n  .decimal{font-size: 1.4em;}\r\n  #demo_canvas{height: 240px;}\r\n  #result{padding-left:0;padding-right:0}\r\n}\r\n@media screen and (max-width:390px) {\r\n  .circle { width: 45px; height: 45px;}\r\n  .container{padding-right: 12px; padding-left: 12px; }\r\n  .demo_color{width: 76px;}\r\n}\r\n<\/style>\r\n\r\n\r\n<div id=\"fxd\" class=\"pb-4\">\r\n  <article class=\"container relative\">\r\n\r\n    <div id=\"dropbox\" class=\"droparea  radius text-center\" data-id=\"\" >\r\n      <p class=\"text-2xl\">\u3053\u3053\u306b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u304f\u3060\u3055\u3044\uff61<\/p>\r\n      <label class=\"btn-secondary weight-7 radius btn-drop \">\u307e\u305f\u306f\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\r\n        <input type=\"file\" id=\"files\" name=\"files[]\" \/>\r\n      <\/label>\r\n    <\/div>\r\n\r\n\r\n    <div id=\"loader\" class=\"text-center w100\">\r\n      <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/loader.gif\" style=\"width:2em;height:auto; margin:2em auto\" class=\"hide\">\r\n    <\/div>\r\n      \r\n    <output id=\"list\">  <\/output>\r\n\r\n    <div id=\"preview\"><\/div>\r\n\r\n    <p class=\"mt-4 text-center\">\r\n        <strong class=\"radius p-1 pl-4 pr-4 text-2xl inline-block\">\u9078\u629e\u3057\u305f\u8272\u306b\u8fd1\u3044\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30ab\u30e9\u30fc\u3092\u3054\u63d0\u6848\u3057\u307e\u3059<\/strong>\r\n    <\/p>\r\n\r\n    <div id=\"demo_canvas\" class=\"w-pc mt-4 relative\">\r\n      <div class=\"drag-and-drop\">\r\n        <canvas id=\"myCanvas\" class=\"m-auto block spoit-cur\"><\/canvas>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"exbtn w-pc pt-4\"> <!--\u6700\u521d\u304b\u3089\u51fa\u3059-->\r\n        <span class=\"bd-gray-1 martina\"><label><button type=\"button\" class=\"shrink btn \">\u2212<\/button><\/label>\r\n          <span id=\"expratio\">100%<\/span>\r\n          <label><button type=\"button\" class=\"expanding btn\">\uff0b<\/button><\/label>\r\n        <\/span> \r\n\r\n        <label><input type=\"checkbox\" id=\"display-fit\" class=\"mcbride\" value=\"1\" checked=\"\"> <span>\u753b\u9762\u306b\u30d5\u30a3\u30c3\u30c8<\/span><\/label>\r\n          <label class=\"relative\"><input type=\"checkbox\" id=\"cnvsmove\" class=\"mcbride mt-md-0 \" value=\"1\"> <span>\u753b\u50cf\u306e\u79fb\u52d5\u3092ON\u306b\u3059\u308b<\/span><br><small id=\"notice-getcolor\" class=\"ml-5\">\u8272\u3092\u53d6\u5f97\u3059\u308b\u306b\u306foff\u306b\u3057\u3066\u304f\u3060\u3055\u3044<\/small>\r\n        <\/label>\r\n    <\/div>\r\n\r\n    <section id=\"result\" class=\"container w-pc mt-4 mb-6\"><!--\u63d0\u6848\u306e\u8fd1\u3044\u8272-->\r\n        <div class=\"row text-left\">\r\n          <div class=\"demo_text col-3\">\r\n            <h4 id=\"choice-color\" class=\"mb-0 pt-2 text-2xl\">\u9078\u629e\u4e2d\u306e\u8272<\/h4>\r\n            <div class=\"demo_color border-glay radius-1 ichimatsu\" ><\/div>\r\n            <p class=\"mb-0\"><b class=\"mr15\">Hex<span>#000000<\/span><\/b><\/p>\r\n          <\/div>\r\n          <div class=\"col-9\">\r\n            <h4  class=\"mb-0 pt-2 text-2xl\">\u53d6\u5f97\u8272<\/h4>\r\n              <div id=\"history\" class=\"text-center\">\r\n\r\n                                  <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                                    <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                                    <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                                    <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                                    <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                                    <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                                    <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                                    <b class=\"circle inline-block ichimatsu\" ><\/b>\r\n                    \r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n\r\n    <section id=\"return\" class=\"row w-pc mt-4 mb-6\">\r\n      <ol class=\"col-md-6 mb-6\">\r\n        <li>\r\n          <h5 class=\"weight-7 text-center\">\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8 \u30ec\u30fc\u30e8\u30f3<\/h5>\r\n        <\/li>\r\n\r\n\r\n          <li class=\"row mt-4\">\r\n            <p class=\"col-3 nowrap\"><b class=\"decimal\">1<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n            <\/p>\r\n            <p class=\"col-3\"> \u30ec\u30fc\u30e8\u30f3 <br>Hex<\/p>\r\n            <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n            <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30ec\u30fc\u30e8\u30f300000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n         <\/li>\r\n\r\n          <li class=\"row mt-4\">\r\n            <p class=\"col-3 nowrap\"><b class=\"decimal\">2<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n            <\/p>\r\n            <p class=\"col-3\"> \u30ec\u30fc\u30e8\u30f3 <br>Hex<\/p>\r\n            <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n            <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30ec\u30fc\u30e8\u30f300000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n         <\/li>\r\n\r\n          <li class=\"row mt-4\">\r\n            <p class=\"col-3 nowrap\"><b class=\"decimal\">3<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n            <\/p>\r\n            <p class=\"col-3\"> \u30ec\u30fc\u30e8\u30f3 <br>Hex<\/p>\r\n            <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n            <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30ec\u30fc\u30e8\u30f300000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n         <\/li>\r\n\r\n          <li class=\"row mt-4\">\r\n            <p class=\"col-3 nowrap\"><b class=\"decimal\">4<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n            <\/p>\r\n            <p class=\"col-3\"> \u30ec\u30fc\u30e8\u30f3 <br>Hex<\/p>\r\n            <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n            <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30ec\u30fc\u30e8\u30f300000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n         <\/li>\r\n\r\n          <li class=\"row mt-4\">\r\n            <p class=\"col-3 nowrap\"><b class=\"decimal\">5<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n            <\/p>\r\n            <p class=\"col-3\"> \u30ec\u30fc\u30e8\u30f3 <br>Hex<\/p>\r\n            <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n            <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30ec\u30fc\u30e8\u30f300000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n         <\/li>\r\n        \r\n      <\/ol>\r\n\r\n\r\n\r\n      <ol class=\"col-md-6 mb-6ma\">\r\n        <li>\r\n          <h5 class=\"weight-7 text-center\">\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8 \u30dd\u30ea\u30a8\u30b9\u30c6\u30eb<\/h5>\r\n        <\/li>\r\n  \r\n        <li class=\"row mt-4\">\r\n          <p class=\"col-3 nowrap\"><b class=\"decimal\">1<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n          <\/p>\r\n          <p class=\"col-3\"> \u30dd\u30ea\u30a8\u30b9\u30c6\u30eb <br>Hex<\/p>\r\n          <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n          <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30dd\u30ea\u30a8\u30b9\u30c6\u30eb00000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n        <\/li>\r\n\r\n  \r\n        <li class=\"row mt-4\">\r\n          <p class=\"col-3 nowrap\"><b class=\"decimal\">2<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n          <\/p>\r\n          <p class=\"col-3\"> \u30dd\u30ea\u30a8\u30b9\u30c6\u30eb <br>Hex<\/p>\r\n          <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n          <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30dd\u30ea\u30a8\u30b9\u30c6\u30eb00000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n        <\/li>\r\n\r\n  \r\n        <li class=\"row mt-4\">\r\n          <p class=\"col-3 nowrap\"><b class=\"decimal\">3<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n          <\/p>\r\n          <p class=\"col-3\"> \u30dd\u30ea\u30a8\u30b9\u30c6\u30eb <br>Hex<\/p>\r\n          <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n          <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30dd\u30ea\u30a8\u30b9\u30c6\u30eb00000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n        <\/li>\r\n\r\n  \r\n        <li class=\"row mt-4\">\r\n          <p class=\"col-3 nowrap\"><b class=\"decimal\">4<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n          <\/p>\r\n          <p class=\"col-3\"> \u30dd\u30ea\u30a8\u30b9\u30c6\u30eb <br>Hex<\/p>\r\n          <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n          <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30dd\u30ea\u30a8\u30b9\u30c6\u30eb00000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n        <\/li>\r\n\r\n  \r\n        <li class=\"row mt-4\">\r\n          <p class=\"col-3 nowrap\"><b class=\"decimal\">5<\/b>\r\n            <span class=\"border-glay radius-1 inline-block ichimatsu\" style=\"height:4.5em;width:4.5em;\"><\/span>\r\n          <\/p>\r\n          <p class=\"col-3\"> \u30dd\u30ea\u30a8\u30b9\u30c6\u30eb <br>Hex<\/p>\r\n          <p class=\"col-3\"> 0000 <br>#000000 <\/p>\r\n          <p class=\"col-3 relative\"><a class=\"copybtn\" data-hex=\"\u30d1\u30fc\u30eb\u30e8\u30c3\u30c8\u30dd\u30ea\u30a8\u30b9\u30c6\u30eb00000\">\r\n              <img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/icon-copy.png\" alt=\"\"><br><small>\u8272\u756a\u30b3\u30d4\u30fc<\/small>\r\n            <\/a><\/p>\r\n        <\/li>\r\n\r\n  \r\n      <\/ol>\r\n    <\/section>\r\n\r\n    \r\n\r\n<\/article> <\/div>\r\n\r\n\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function () {  \r\n      \/\/2D\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u751f\u6210\u3059\u308b\r\n      var ctx;\r\n      var img_w ,img_h;\r\n      var re_w ,re_h;\r\n      var cnvsmove = false;\r\n\r\n    \/*\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u306e\u79fb\u52d5\u30a4\u30d9\u30f3\u30c8\r\n    *\/\r\n    jQuery(document).on(\"mousemove\", \"#myCanvas\", function(e){\r\n      if( cnvsmove){\r\n\r\n       \r\n      }else{  \r\n        getMouseover(e);\r\n      }\r\n    });\r\n\r\n    function getMouseover(mouseEvent){\r\n        var imgData = ctx.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);\r\n        var rgba = imgData.data;\r\n        \/\/ console.log(rgba[0],rgba[1],rgba[2], mouseEvent.offsetX, mouseEvent.offsetY);\r\n        var lmax = Math.max(rgba[0],rgba[1],rgba[2]);\r\n        var lmin = Math.min(rgba[0],rgba[1],rgba[2]);\r\n\r\n        if((lmax+lmin)\/2 > 127){\r\n          jQuery('.spoit-cur').css('cursor','url(\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/icon-spoit-24.png\") 0 20 ,pointer');\r\n        }else{\r\n          jQuery('.spoit-cur').css('cursor','url(\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/icon-spoit-16.png\") 0 20 ,pointer');\r\n        }\r\n    }\r\n\r\n\r\n\r\n    jQuery(function($){ \/\/wp\u3067$\r\n\r\n      \/\/ \u753b\u50cf\u306eUP \r\n      function handleFileSelect(evt) {\r\n        cls(img_w, img_h);\r\n\r\n        $('#loader img').removeClass('hide');\r\n          var files = evt.target.files; \/\/ FileList object\r\n          \/\/ Loop through the FileList and render image files as thumbnails.\r\n          for (var i = 0, f; f = files[i]; i++) {\r\n            \/\/ Only process image files.\r\n            if (!f.type.match('image.*')) {\r\n              alert('\u753b\u50cf\u4ee5\u5916\u306f\u8868\u793a\u3067\u304d\u307e\u305b\u3093');\r\n              $('#loader img').addClass('hide');\r\n              break;\r\n            }\r\n            \/\/ alert(1,files[i]);\r\n            var reader = new FileReader();\r\n            \/\/ Closure to capture the file information.\r\n            reader.onload = (function(theFile) {\r\n              return function(e) {\r\n                \/\/ Render thumbnail.\r\n                var span = document.createElement('span');\r\n                span.innerHTML = [\r\n                  '<img decoding=\"async\" class=\"\" src=\"', e.target.result, '\" title=\"', escape(theFile.name), '\"\/>'\r\n                ].join('');\r\n\r\n                document.getElementById('list').innerHTML='';\r\n                document.getElementById('list').insertBefore(span, null);\r\n\r\n                var base64img = e.target.result\r\n                setBase64(base64img); \/\/canvas\u3078\u8868\u793a\r\n              };\r\n            })(f);\r\n            \/\/ Read in the image file as a data URL.\r\n            reader.readAsDataURL(f);\r\n          }\r\n      }\r\n\r\n\r\n\r\n      document.getElementById('files').addEventListener('change', handleFileSelect, false);\r\n\r\n\r\n      \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\u30af\u30ea\u30a2\r\n      function cls(img_w, img_h){\r\n        if(img_w !== undefined && img_h !== undefined && ctx !== undefined){\r\n\r\n          ctx.clearRect(0, 0, img_w, img_h);\r\n        }\r\n        $('.drag-and-drop').removeAttr('style');\r\n      }\r\n\r\n\r\n      \/\/Drop event\r\n      let dropbox;\r\n\r\n      dropbox = document.getElementById(\"dropbox\");\r\n      dropbox.addEventListener(\"dragenter\", dragenter, false);\r\n      dropbox.addEventListener(\"dragover\", dragover, false);\r\n      dropbox.addEventListener(\"drop\", drop, false);\r\n\r\n      function dragenter(e) {\r\n        e.stopPropagation();\r\n        e.preventDefault();\r\n      }\r\n\r\n      function dragover(e) {\r\n        e.stopPropagation();\r\n        e.preventDefault();\r\n      }\r\n\r\n      function drop(e) {\r\n        e.stopPropagation();\r\n        e.preventDefault();\r\n        const dt = e.dataTransfer;\r\n        const files = dt.files;\r\n        handleFiles(files);\r\n      }\r\n\r\n\r\n\r\n\r\n    \/\/drop  \r\n      function handleFiles(files) {\r\n        cls(img_w, img_h);\r\n\r\n        $('#loader img').removeClass('hide');\r\n        for (let i = 0; i < files.length; i++) {\r\n          const file = files[i];\r\n          \/\/ console.log(file);\r\n          if (!file.type.startsWith('image\/')){ continue }\r\n\r\n          let preview = document.getElementById(\"preview\");\r\n          preview.innerHTML ='';\r\n          const img = document.createElement(\"img\");\r\n          \/\/ img.classList.add(\"hide\");\r\n          img.setAttribute(\"id\",\"demo_img\"); \/\/id \u4ed8\u4e0e\r\n\r\n          img.file = file;\r\n          preview.appendChild(img); \r\n\r\n          const reader = new FileReader();\r\n          reader.onload = (function(aImg) { \r\n            return function(e) { \r\n              aImg.src = e.target.result; \r\n              var base64img = e.target.result\r\n              \r\n              setBase64(base64img); \/\/canvas\u3078\u8868\u793a\r\n            }; \r\n          })(img);\r\n          \r\n          reader.readAsDataURL(file);\r\n        }\r\n      }\r\n\r\n\r\n\r\n      var img;\r\n      var canvas_size ;\r\n      var canvas = document.getElementById('myCanvas');\r\n      var ex = 0; \r\n\r\n      function setBase64(base64img){\r\n        \/\/ \r\n        ctx = canvas.getContext('2d');\r\n        var ratio = 100 ;\r\n        \/\/\u753b\u50cf\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u751f\u6210\r\n        img = new Image();\r\n        \/\/\u753b\u50cf\u3092canvas\u306b\u8a2d\u5b9a\r\n        img.onload = function(){\r\n\r\n            img_w = img.width;\r\n            img_h = img.height;\r\n            \/\/ $(\"#myCanvas\").attr('width',img.width).attr('height',img.height);\r\n         \r\n          canvas_size = $('#demo_canvas').width();\r\n          canvas_size_h = $('#demo_canvas').height();\r\n\r\n            ctx.drawImage(img, 0, 0, img_w, img_h); \/\/ \u305d\u306e\u307e\u307e\u306e\u30b5\u30a4\u30ba\u3067\u63cf\u753b\r\n          \r\n            \/\/ $('#demo_canvas').addClass('hide');\r\n            ratio = canvas_size\/img_w;\r\n            re_w = Math.floor(ratio * img_w);\r\n            re_h = Math.floor(ratio * img_h);\r\n            \/\/ console.log('canvas_size : ', canvas_size, img_w, re_w, re_h);\r\n\r\n            canvas.width = re_w;\r\n            canvas.height = re_h;\r\n\r\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n          \/\/ \u500d\u7387\u5909\u66f4\r\n            ctx.scale(ratio, ratio); \/\/ \u6a2a\uff64\u7e26\r\n            ctx.drawImage(img, 0, 0 ); \r\n            $('.drag-and-drop').height(re_h );\r\n            \/\/\u753b\u50cf\u3088\u308a\u3082\u5927\u304d\u3044\u3068\u4f59\u308b\u306e\u3067\r\n            $('#demo_canvas').height(re_h );\r\n            \r\n\r\n          \/\/\u62e1\u5927\u30dc\u30bf\u30f3\u3092\u51fa\u3059\r\n            $('.exbtn').html(`\r\n            <span class=\"bd-gray-1 martina\"><label><button type=\"button\" class=\"shrink btn \" >\u2212<\/button><\/label>\r\n              <span id=\"expratio\">100%<\/span>\r\n              <label><button type=\"button\" class=\"expanding btn\" >\uff0b<\/button><\/label>\r\n            <\/span> \r\n            <label><input type=\"checkbox\" id=\"display-fit\" class=\"mcbride\" value=\"1\" checked> <span class=\"\">\u753b\u9762\u306b\u30d5\u30a3\u30c3\u30c8<\/span><\/label>\r\n              <label class=\"relative\"><input type=\"checkbox\" id=\"cnvsmove\" class=\"mcbride mt-md-0 \" value=\"1\"> <span>\u753b\u50cf\u306e\u79fb\u52d5\u3092ON\u306b\u3059\u308b<\/span><br><small id=\"notice-getcolor\" class=\"ml-5\">\u8272\u3092\u53d6\u5f97\u3059\u308b\u306b\u306foff\u306b\u3057\u3066\u304f\u3060\u3055\u3044<\/small>\r\n            <\/label>`);\r\n\r\n          \/\/\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u305f \r\n\r\n          \/\/canvas\u306b\u9589\u3058\u308b\u30dc\u30bf\u30f3\uff64\u80cc\u666f\u8272\u306b\u5fdc\u3058\u3066\u767d\u304b\u9ed2\r\n          var imgData = ctx.getImageData(canvas_size -3, 4 , 1, 1);\r\n          var rgba = imgData.data;\r\n          \/\/ console.log(rgba[0],rgba[1],rgba[2], canvas_size, 4 );\r\n          var lmax = Math.max(rgba[0],rgba[1],rgba[2]);\r\n          var lmin = Math.min(rgba[0],rgba[1],rgba[2]);\r\n\r\n          if((lmax+lmin)\/2 > 127){\r\n            $('#demo_canvas').append('<img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/icon-close-24.png\" class=\"btnclose\">'); \r\n          }else{\r\n            $('#demo_canvas').append('<img decoding=\"async\" src=\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/icon-close-ff.png\" class=\"btnclose\">'); \r\n          }\r\n\r\n\r\n          $('#loader img').addClass('hide');\r\n          $('#dropbox').hide(); \/\/\u30c9\u30ed\u30c3\u30d7\u30a8\u30ea\u30a2\u975e\u8868\u793a\r\n\r\n          $('#expratio').html(Math.floor( ratio*100) + '%'); \r\n          ex = ratio ;\r\n        }\r\n        img.src = base64img;\r\n\r\n      }\r\n\r\n\r\n\r\n   \r\n      var scale;\r\n      \/*\u753b\u9762\u306b\u30d5\u30a3\u30c3\u30c8*\/\r\n      $(document).on(\"click\", \"#display-fit\", function () {\r\n        if($(this).prop('checked')){\r\n\r\n          re_w = Math.floor( img_w\/scale);\r\n          re_h = Math.floor( img_h\/scale);\r\n          scale = canvas_size\/img_w ;\r\n          ex = scale ;\r\n            var re_w = Math.floor(scale * re_w);\r\n            var re_h = Math.floor(scale * re_h);\r\n\r\n            re_w = img.width * scale; \/\/\u539f\u5bf8\u306b\u62e1\u5927\u7387\u3092\u304b\u3051\u3066\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u4ee3\u5165\r\n          re_h = img.height *  scale;;\r\n          cls(re_w, re_h); \/\/ \u4e00\u65e6\u30af\u30ea\u30a2 \r\n\r\n          canvas.width = re_w; \/\/canvas\u306e\u9ad8\u3055\r\n          canvas.height = re_h;\r\n          ctx.scale(scale, scale);\r\n          \r\n          ctx.drawImage(img, 0, 0);\r\n          ctx.scale(1 \/ scale, 1 \/ scale);\r\n\r\n            $('.drag-and-drop').removeAttr( 'style' );\r\n            $('#expratio').html(Math.floor( scale*100) + '%'); \r\n            $('#cnvsmove').prop('checked',false);\r\n               cnvsmove = false;\r\n               $('#notice-getcolor').hide();\r\n        }\r\n      });\r\n      \r\n\r\n\r\n      \/*\u62e1\u5927\u30dc\u30bf\u30f3 \u30c8\u30b0\u30eb*\/\r\n      $(document).on(\"click\", \".expanding\", function () {\r\n        \/\/ .drag-and-drop \u306e\u5ea7\u6a19\u53d6\u5f97\u3057\u3066,\u63cf\u753b\u5f8c\u306b\u307e\u305f\u623b\u3059\r\n          var cordinate = $('.drag-and-drop').css(['top', 'left']);\r\n          ex += 0.1;   \r\n          scale = Math.floor( ex*100 ) *0.01 ;\/\/ canvas_size\/img_w;\r\n          re_w = img.width * scale; \/\/\u539f\u5bf8\u306b\u62e1\u5927\u7387\u3092\u304b\u3051\u3066\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u4ee3\u5165\r\n          re_h = img.height *  scale;;\r\n          cls(re_w, re_h);\r\n           \r\n          canvas.width = re_w;\r\n          canvas.height = re_h;\r\n          ctx.scale(scale, scale);\r\n         \r\n          ctx.drawImage(img, 0, 0); \/\/ \u518d\u63cf\u753b\r\n          ctx.scale(1 \/ scale, 1 \/ scale); \/\/ \u5909\u63db\u30de\u30c8\u30ea\u30af\u30b9\u3092\u5143\u306b\u623b\u3059\r\n\r\n            $('#expratio').html( Math.floor(scale*100) + '%');\r\n            $('#display-fit').prop( 'checked' ,false );\r\n            $('.drag-and-drop').css(cordinate);\r\n        });\r\n          \r\n           \r\n      \/*\u7e2e\u5c0f \u30c8\u30b0\u30eb*\/\r\n      $(document).on(\"click\", \".shrink\", function () {\r\n          \/\/ \u500d\u7387\u5909\u66f4\r\n          var cordinate = $('.drag-and-drop').css(['top', 'left']);\r\n          ex -= 0.1;   \r\n          scale = Math.floor( ex *100 )*0.01 ;\r\n          re_w = img.width * scale; \/\/\u539f\u5bf8\u306b\u62e1\u5927\u7387\u3092\u304b\u3051\u3066\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u4ee3\u5165\r\n          re_h = img.height *  scale;;\r\n          cls(re_w, re_h); \/\/ \u4e00\u65e6\u30af\u30ea\u30a2 \r\n\r\n          canvas.width = re_w;\r\n          canvas.height = re_h;\r\n          ctx.scale(scale, scale);\r\n          \r\n          ctx.drawImage(img, 0, 0);\r\n          ctx.scale(1 \/ scale, 1 \/ scale);\r\n\r\n          $('#expratio').html(Math.floor(scale*100) + '%');\r\n          $('#display-fit').prop( 'checked' ,false );\r\n          $('.drag-and-drop').css(cordinate);\r\n      });\r\n\r\n\r\n\r\n\r\n      \/*\u753b\u50cf\u79fb\u52d5\u306eON OFF*\/\r\n      $(document).on(\"change\", \"#cnvsmove\", function () {\r\n        if($(this).prop(\"checked\")){\r\n         var position = $('#fxd').offset().top ; \/\/TOP\u304b\u3089\u306e\u8ddd\u96e2\r\n          $('#fxd').addClass('fixed'); \/\/.css('margin-top',position);\r\n         \r\n          cnvsmove = true;\r\n          jQuery('.spoit-cur').removeAttr('style');\r\n          $('#notice-getcolor').show();\r\n        }else{\r\n          $('#fxd').removeClass('fixed');\r\n          cnvsmove = false;\r\n          $('#notice-getcolor').hide();\r\n        }\r\n      });\r\n\r\n\r\n\r\n      \/\/\u753b\u50cf\u3092\u6d88\u3059\u30d0\u30c4\u30dc\u30bf\u30f3\r\n      $(document).on(\"click\", \".btnclose\", function () {\r\n        \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u306e\u524a\u9664\r\n        localStorage.removeItem(\"savedColor\");\r\n        location.reload();\r\n        \/* \u5358\u306b\u30ea\u30ed\u30fc\u30c9\r\n        re_w = img.width \r\n        re_h = img.height\r\n        cls(re_w, re_h);\r\n        $(this).remove();\r\n        $('#dropbox').show();\r\n        $('#return').html('');\r\n        $('#result').html('');\r\n        ex = 0;\r\n        *\/\r\n      });\r\n\r\n     \r\n\r\n\r\n      \/*\u30b3\u30d4\u30fc\u30dc\u30bf\u30f3*\/\r\n      $(function() {\r\n          $(document).on(\"click\", \".copybtn\", function(){\r\n            let text = $(this).data('hex');\r\n            let $textarea = $('<textarea><\/textarea>');\/\/ \u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306e\u4f5c\u6210\r\n            $textarea.text(text); \/\/ \u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306b\u6587\u7ae0\u3092\u633f\u5165\r\n            $(this).before($textarea);\/\/\u3000\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3092\u633f\u5165\r\n            $textarea.select();\/\/\u3000\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3092\u9078\u629e\r\n            document.execCommand('copy');\/\/ \u30b3\u30d4\u30fc\r\n            $textarea.remove(); \/\/ \u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306e\u524a\u9664\r\n            $(this).before('<span class=\"copyalert\">\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f!<\/span>');\/\/ \u30a2\u30e9\u30fc\u30c8\u6587\u306e\u8868\u793a\r\n            $('#copyalert').delay(2000).fadeOut(400);\r\n            setTimeout(function(){\r\n              $('.copyalert').remove();\r\n            },2000);\r\n\r\n          });\r\n      });\r\n\r\n      \r\n      \r\n      \r\n      \/\/  \u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306e\u30a4\u30d9\u30f3\u30c8\r\n      jQuery(document).on(\"click\", \"#myCanvas\", function(e){\r\n        \/\/     alert(\"2\u3064\u76ee\u306e\u8981\u7d20\u30af\u30ea\u30c3\u30af\");\r\n        getPixcel(e);\r\n      });\r\n\r\n      function getPixcel(mouseEvent){\r\n        var savedColor = localStorage.getItem(\"savedColor\");\r\n        savedColor = JSON.parse(savedColor); \/\/\u914d\u5217\u306b\u3059\u308b\r\n\r\n        if( savedColor == null){ \r\n          savedColor = [];\r\n        }\r\n\r\n        if( cnvsmove) return false; \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\u79fb\u52d5\u304cfalse\u306a\u3089\u753b\u50cf\u30c9\u30e9\u30c3\u30af\u3057\u306a\u3044\r\n        \r\n        \/\/\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u5ea7\u6a19\u306e\u30d4\u30af\u30bb\u30eb\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\r\n        var imgData = ctx.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);\r\n        var rgba = imgData.data;\r\n        \/\/rgba\u306e\u9806\u3067\u6570\u5024\u3092\u53d6\u5f97\u3067\u304d\u308b\r\n        tdec = \"rgba(\" + rgba[0] + \", \" + rgba[1] + \", \" + rgba[2] + \", \" + rgba[3] + \")\";\r\n        thex = ( '00' + rgba[0].toString(16) ).slice( -2 ) \r\n        + ( '00' + rgba[1].toString(16) ).slice( -2 )\r\n        + ( '00' + rgba[2].toString(16) ).slice( -2 );\r\n        \r\n        \/\/ console.log( ( '00' + rgba[0].toString(16) ).slice( -2 ) \r\n        \/\/ , ( '00' + rgba[1].toString(16) ).slice( -2 )\r\n        \/\/ , ( '00' + rgba[2].toString(16) ).slice( -2 )\r\n        \/\/ );\r\n        jQuery(\"#result\").html(`\r\n        <div class=\"row text-leftr\">\r\n          <div class=\"demo_text col-3\">\r\n            <h4 id=\"choice-color\" class=\"mb-0 pt-2 text-2xl\">\u9078\u629e\u4e2d\u306e\u8272<\/h4>\r\n            <div class=\"demo_color border-glay radius-1\" style=\"background-color:${tdec}\"><\/div>\r\n            <p class=\"mb-0\"><b class=\"mr15\">Hex<\/span><span>#${thex}<\/b><\/p>\r\n          <\/div>\r\n          <div class=\"col-9\">\r\n            <h4  class=\"mb-0 pt-2 text-2xl\">\u53d6\u5f97\u8272<\/h4>\r\n              <div id=\"history\" class=\"text-center\">\r\n\r\n              <\/div>\r\n          <\/div>\r\n        <\/div> `\r\n        );\r\n        \r\n        jQuery.ajax({\r\n          type: \"POST\",\r\n          url: \"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/ajax-decdef.php\",\r\n          data: { \"decr\" : rgba[0]\r\n            , \"decg\" : rgba[1] \r\n            , \"decb\" : rgba[2] \r\n            , \"deca\" : rgba[3] \r\n          },\r\n          dataType : \"html\"\r\n        }).done(function(data){\r\n          \/\/ console.log(data);\r\n          $(\"#return\").html(data);\r\n          $('body, html').animate({ scrollTop: $('#choice-color').offset().top - 32 }, 0);\r\n          \/\/localstrage\u306b\u4fdd\u5b58\u3059\u308b \u6700\u59278\r\n          console.log(savedColor);\r\n          if( savedColor.length > 7 ){\r\n            savedColor.shift() ; \/\/\u914d\u5217\u306e\u5148\u982d\u8981\u7d20\u306e\u524a\u9664\r\n          }\r\n          savedColor.push(thex);\r\n          localStorage.setItem( \"savedColor\", JSON.stringify(savedColor) );\r\n\r\n          \/\/\u53d6\u5f97\u6e08\u307f\u30ab\u30e9\u30fc\u3092\u56de\u3057\u3066\r\n          var savedColors = '';\r\n          $.each(savedColor, function(index,value){\r\n            savedColors += `<b class=\"circle inline-block\" data-hex=\"${value}\" style=\"background:#${value}\"><\/b>`;\r\n          });\r\n          $('#history').html(savedColors);\r\n\r\n        }).fail(function(XMLHttpRequest, status, e){\r\n          alert(e);\r\n        });\r\n      }\r\n      \r\n\r\n\r\n\r\n      \/\/history color \u53d6\u5f97\r\n      jQuery(document).on(\"click\", \".circle\", function(e){\r\n        var hex = $(this).data('hex');\r\n        var rgba = [];\r\n        rgba[0] = parseInt(hex.substr( 0, 2 ), 16) ;\r\n        rgba[1] = parseInt(hex.substr( 2, 2 ), 16);\r\n        rgba[2] = parseInt(hex.substr( 4, 2 ), 16);\r\n\r\n        jQuery.ajax({\r\n          type: \"POST\",\r\n          url: \"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/ajax-decdef.php\",\r\n          data: { \"decr\" : rgba[0]\r\n            , \"decg\" : rgba[1] \r\n            , \"decb\" : rgba[2] \r\n            , \"deca\" :1 \r\n          },\r\n          dataType : \"html\"\r\n        }).done(function(data){\r\n          \/\/ console.log(data);\r\n          $(\"#return\").html(data);\r\n          $('body, html').animate({ scrollTop: $('#choice-color').offset().top - 32 }, 0);\r\n          $('.demo_color').css('background-color','#'+hex);\r\n\r\n        }).fail(function(XMLHttpRequest, status, e){\r\n          alert(e);\r\n        });\r\n\r\n      });\r\n\r\n\r\n\r\n      jQuery(document).on(\"mouseover\", \".circle\", function(e){\r\n\r\n        var hex = $(this).data('hex');\r\n        var rgba = [];\r\n        rgba[0] = parseInt(hex.substr( 0, 2 ), 16) ;\r\n        rgba[1] = parseInt(hex.substr( 2, 2 ), 16);\r\n        rgba[2] = parseInt(hex.substr( 4, 2 ), 16);\r\n\r\n        var lmax = Math.max(rgba[0],rgba[1],rgba[2]);\r\n          var lmin = Math.min(rgba[0],rgba[1],rgba[2]);\r\n\r\n        if((lmax+lmin)\/2 > 127){\r\n            $('.circle').css('cursor','url(\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/icon-spoit-24.png\") 0 20 ,pointer');\r\n          }else{\r\n            $('.circle').css('cursor','url(\"https:\/\/wp.ultimai.org\/wp-content\/plugins\/spoit-tool\/images\/icon-spoit-16.png\") 0 20 ,pointer');\r\n          }\r\n      });\r\n\r\n\r\n  }); \/\/wp\u3067$\r\n      \r\n      \r\n\r\n\r\n    \/*drag *\/\r\n  (function(){\r\n     \r\n      \/\/\u8981\u7d20\u306e\u53d6\u5f97\r\n      var elements = document.getElementsByClassName(\"drag-and-drop\");\r\n\r\n      \/\/\u8981\u7d20\u5185\u306e\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u4f4d\u7f6e\u3092\u53d6\u5f97\u3059\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\uff08\u306e\u3088\u3046\u306a\uff09\u5909\u6570\r\n      var x;\r\n      var y;\r\n\r\n      \/\/\u30de\u30a6\u30b9\u304c\u8981\u7d20\u5185\u3067\u62bc\u3055\u308c\u305f\u3068\u304d\u3001\u53c8\u306f\u30bf\u30c3\u30c1\u3055\u308c\u305f\u3068\u304d\u767a\u706b\r\n      \/\/ for(var i = 0; i < elements.length; i++) {\r\n          elements[0].addEventListener(\"mousedown\", mdown, false);\r\n          elements[0].addEventListener(\"touchstart\", mdown,{ passive:false});\r\n          \/\/ elements[0].addEventListener(\"click\", mup, false);\r\n      \/\/ }\r\n\r\n      \/\/\u30de\u30a6\u30b9\u304c\u62bc\u3055\u308c\u305f\u969b\u306e\u95a2\u6570\r\n      function mdown(e) {\r\n        if( !cnvsmove) return false; \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\u79fb\u52d5\u304cfalse\u306a\u3089\u753b\u50cf\u30c9\u30e9\u30c3\u30af\u3057\u306a\u3044\r\n\r\n          e.preventDefault();   \/\/. \u30b9\u30af\u30ed\u30fc\u30eb\u7981\u6b62\r\n          \/\/\u30af\u30e9\u30b9\u540d\u306b .drag \u3092\u8ffd\u52a0\r\n          this.classList.add(\"drag\");\r\n\r\n          \/\/\u30bf\u30c3\u30c1\u30c7\u30a4\u30d9\u30f3\u30c8\u3068\u30de\u30a6\u30b9\u306e\u30a4\u30d9\u30f3\u30c8\u306e\u5dee\u7570\u3092\u5438\u53ce\r\n          if(e.type === \"mousedown\") {\r\n              var event = e;\r\n          } else {\r\n              var event = e.changedTouches[0];\r\n          }\r\n\r\n          \/\/\u8981\u7d20\u5185\u306e\u76f8\u5bfe\u5ea7\u6a19\u3092\u53d6\u5f97\r\n          x = event.pageX - this.offsetLeft;\r\n          y = event.pageY - this.offsetTop;\r\n\r\n          \/\/\u30e0\u30fc\u30d6\u30a4\u30d9\u30f3\u30c8\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\r\n          document.body.addEventListener(\"mousemove\", mmove, false);\r\n          document.body.addEventListener(\"touchmove\", mmove, false);\r\n      }\r\n\r\n      \r\n      \/\/\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u52d5\u3044\u305f\u3068\u304d\u306b\u767a\u706b\r\n      function mmove(e) {\r\n          \/\/\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u3044\u308b\u8981\u7d20\u3092\u53d6\u5f97\r\n          var drag = document.getElementsByClassName(\"drag\")[0];\r\n          var demo_canvas = document.getElementById(\"demo_canvas\");\r\n\r\n          \/\/\u540c\u69d8\u306b\u30de\u30a6\u30b9\u3068\u30bf\u30c3\u30c1\u306e\u5dee\u7570\u3092\u5438\u53ce\r\n          if(e.type === \"mousemove\") {\r\n              var event = e;\r\n          } else {\r\n              var event = e.changedTouches[0];\r\n          }\r\n          \/\/\u30d5\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u753b\u9762\u3092\u52d5\u304b\u3055\u306a\u3044\u3088\u3046\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u52d5\u4f5c\u3092\u6291\u5236(\u6700\u8fd1\u306f\u30b9\u30de\u30db\u3067\u30a8\u30e9\u30fc\u306b\u306a\u308b)\r\n          \/\/ e.preventDefault();\r\n\r\n          \/\/\u30de\u30a6\u30b9\u304c\u52d5\u3044\u305f\u5834\u6240\u306b\u8981\u7d20\u3092\u52d5\u304b\u3059\r\n          drag.style.top = event.pageY - y + \"px\";\r\n          drag.style.left = event.pageX - x + \"px\";\r\n          \/\/ console.log('x1: ', event.pageX - x);\r\n          \/\/\u30de\u30a6\u30b9\u30dc\u30bf\u30f3\u304c\u96e2\u3055\u308c\u305f\u3068\u304d\u3001\u307e\u305f\u306f\u30ab\u30fc\u30bd\u30eb\u304c\u5916\u308c\u305f\u3068\u304d\u767a\u706b\r\n          drag.addEventListener(\"mouseup\", mup, false);\r\n          demo_canvas.addEventListener(\"mouseleave\", mup, false);\r\n          drag.addEventListener(\"touchend\", mup, false);\r\n          demo_canvas.addEventListener(\"touchleave\", mup, false);\r\n          \r\n      }\r\n\r\n      \/\/\u30de\u30a6\u30b9\u30dc\u30bf\u30f3\u304c\u4e0a\u304c\u3063\u305f\u3089\u767a\u706b\r\n      function mup(e) {\r\n          var drag = document.getElementsByClassName(\"drag\")[0];\r\n          \/\/ console.log('x2: ', this.offsetLeft);\r\n        if(this.offsetLeft != 0 ){\r\n            \/\/\u30e0\u30fc\u30d6\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306e\u6d88\u53bb\r\n            document.body.removeEventListener(\"mousemove\", mmove, false);\r\n            \/\/ drag.removeEventListener(\"mouseup\", mup, false);\r\n            document.body.removeEventListener(\"touchmove\", mmove, false);\r\n            \/\/ drag.removeEventListener(\"touchend\", mup, false);\r\n            \/\/\u30af\u30e9\u30b9\u540d .drag \u3082\u6d88\u3059\r\n            drag.classList.remove(\"drag\");\r\n            return false;\r\n          }\r\n      }\r\n    })(); \/\/ drag\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      \/\/\u89e3\u50cf\u5ea6\u81ea\u4f53\u3092\u5909\u66f4\u3059\u308b(\u4f7f\u3063\u3066\u306a\u3044)\r\n      var CanvasResize = function(canvas,width,height){\r\n          var def = $.Deferred();\r\n          var img = new Image();\r\n          img.onload = function(){\r\n              canvas.width = width;\r\n              canvas.height = height;\r\n              var ctx = canvas.getContext('2d');\r\n              ctx.drawImage(img,0,0,width,height);\r\n              def.resolve(canvas);\r\n          }\r\n          img.src = canvas.toDataURL();\r\n          return def.promise();\r\n      }\r\n\r\n\r\n  });\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-221","post","type-post","status-publish","format-standard","hentry","category-achievements"],"_links":{"self":[{"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=221"}],"version-history":[{"count":1,"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":2232,"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=\/wp\/v2\/posts\/221\/revisions\/2232"}],"wp:attachment":[{"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ultimai.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}