{"id":1483,"date":"2012-09-26T20:26:01","date_gmt":"2012-09-26T11:26:01","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=1483"},"modified":"2014-11-03T16:30:55","modified_gmt":"2014-11-03T07:30:55","slug":"post-1483","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/javascript\/1483","title":{"rendered":"&#8216;input type=file&#8217;\u304b\u3089&#8217;canvas&#8217;\u3078\u306e\u8ee2\u5199\uff08\u753b\u50cf\u306e\u5f15\u304d\u4f38\u3070\u3057\u5bfe\u51e6\uff09"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2012\/09\/WS000007.jpg\" alt=\"\" title=\"WS000007\" width=\"758\" height=\"731\" class=\"alignnone size-full wp-image-1484\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2012\/09\/WS000007.jpg 758w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2012\/09\/WS000007-156x150.jpg 156w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/p>\n<p>&#8216;input type=file&#8217;\u304b\u3089&#8217;canvas&#8217;\u306b\u8ee2\u5199\u3059\u308b\u969b\u3001\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u304ccanvas\u306e\u30b5\u30a4\u30ba\u3088\u308a\u5927\u304d\u3044\u3068canvas\u306e\u30b5\u30a4\u30ba\u3067\u30c8\u30ea\u30df\u30f3\u30b0\u3055\u308c\u3066\u8868\u793a\u3055\u308c\u3066\u3057\u307e\u3044\u307e\u3059\u3002<br \/>\n\u306a\u306e\u3067\u3001\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066canvas\u306e\u30b5\u30a4\u30ba\u3092\u5909\u66f4\u3057\u305f\u3044\u306e\u3067\u3059\u304c\u3001\u4f55\u6545\u304b\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u304b\u3089\u52d5\u7684\u306bcanvas\u306e\u30b5\u30a4\u30ba\u3092\u5909\u66f4\u3059\u308b\u3068\u30c8\u30ea\u30df\u30f3\u30b0\u3055\u308c\u305f\u753b\u50cf\u304c\u5f15\u304d\u4f38\u3070\u3055\u308c\u3066\u8868\u793a\u3055\u308c\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>canvas\u306e\u30b5\u30a4\u30ba\u3092\u5909\u66f4\u3059\u308b\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u3044\u308d\u3044\u308d\u8a66\u3057\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u3046\u307e\u304f\u3044\u304b\u306a\u304b\u3063\u305f\u306e\u3067\u3001\u7d50\u5c40&#8217;img&#8217;\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u8aad\u8fbc\u5f8c\u306b\u753b\u50cf\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u305fcanvas\u3092\u751f\u6210\u3059\u308b\u3053\u3068\u3067\u5bfe\u5fdc\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u2193\u30b5\u30f3\u30d7\u30eb<br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/jsdo.it\/blogparts\/5KO3\/js?width=465&#038;height=496&#038;view=play\"><\/script><\/p>\n<pre class=\"lang:js decode:true \" >$(&quot;#uploadFile&quot;).change(function() {\r\n\r\n\tvar file = this.files[0];\r\n\tif (!file.type.match(\/^image\/(png|jpeg|gif)$\/)) return;\r\n\r\n\tvar image = new Image();\r\n\tvar reader = new FileReader();\r\n\r\n\treader.onload = function(evt) {\r\n\t\timage.onload = function() {\r\n            \r\n\t\t\t\/\/canvas1\u306e\u30b5\u30a4\u30ba\u3092\u753b\u50cf\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u5909\u66f4\uff08\u5f15\u304d\u4f38\u3070\u3055\u308c\u308b\uff09\r\n\t\t\t$(&quot;#canvas1&quot;).width(image.width);\r\n\t\t\t$(&quot;#canvas1&quot;).height(image.height);\r\n            var canvas1 = $(&quot;#canvas1&quot;);\r\n\t\t\tvar ctx1 = canvas1[0].getContext(&quot;2d&quot;);\t\t\r\n\t\t\tctx1.drawImage(image, 0, 0); \/\/canvas1\u306b\u753b\u50cf\u3092\u8ee2\u5199\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\/\/canvas2\u3092\u753b\u50cf\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u8ffd\u52a0\uff08\u5f15\u304d\u4f38\u3070\u3055\u308c\u306a\u3044\uff09\r\n\t\t\tvar obj = $(&quot;&lt;canvas\/&gt;&quot;).attr(&quot;id&quot;,&quot;canvas2&quot;).attr(&quot;width&quot;, image.width).attr(&quot;height&quot;, image.height);\r\n\t\t\t$(&quot;#new_canvas&quot;).append(obj);\r\n\t\t\tvar canvas2 = $(&quot;#canvas2&quot;);\r\n\t\t\tvar ctx2 = canvas2[0].getContext(&quot;2d&quot;);        \r\n\t\t\tctx2.drawImage(image, 0, 0); \/\/canvas2\u306b\u753b\u50cf\u3092\u8ee2\u5199\r\n\t\t}\r\n\r\n\r\n\t\timage.src = evt.target.result;\r\n\t}\r\n\treader.readAsDataURL(file);\r\n});<\/pre>\n<p>\u753b\u50cf\u3092drawImage\u3059\u308b\u524d\u306bcanvas\u306e\u30ea\u30b5\u30a4\u30ba\u3092\u884c\u3063\u3066\u3082\u3001\u753b\u50cf\u304c\u62e1\u5927\uff08\u5f15\u304d\u4f38\u3070\u3057\uff09\u3055\u308c\u3066\u8868\u793a\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u306f\u4f55\u6545\u306a\u3093\u3067\u3057\u3087\u3046\uff1f<\/p>\n<p>\u25a0\u8ffd\u8a18<\/p>\n<pre class=\"lang:js decode:true \" >\t$(&quot;#canvas1&quot;).width(image.width);\r\n\t$(&quot;#canvas1&quot;).height(image.height);\r\n<\/pre>\n<p>\u2193\u5909\u66f4<\/p>\n<pre class=\"lang:js decode:true \" >\t$(&quot;#canvas1&quot;).attr(&quot;width&quot;,image.width);   \/\/\u2190\u3053\u308c\u3060\u3063\u305f\u3089\u304a\uff4b\u3060\u3063\u305f\u3002\u3000orz\r\n\t$(&quot;#canvas1&quot;).attr(&quot;height&quot;,image.height);\r\n<\/pre>\n<p>jQuery\u306ewidth(height)\u30e1\u30bd\u30c3\u30c9\u3067\u306f\u306a\u304f\u3001attr\u3067width(height)\u5c5e\u6027\u3092\u5909\u66f4\u3059\u308c\u3070\u3001\u3046\u307e\u304f\u3044\u304d\u307e\u3057\u305f orz<\/p>\n<p>width(height)\u30e1\u30bd\u30c3\u30c9\u3067\u306f\u99c4\u76ee\u306a\u7406\u7531\u306f\u4e0d\u660e\u3002<\/p>\n<p>\uff08css\u3067\u306e\u5909\u66f4\u3068\u5c5e\u6027\u5024\u3067\u306e\u5909\u66f4\u3067\u52d5\u4f5c\u304c\u5909\u308f\u308b\u306e\u304b\u306a\uff1f\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8216;input type=file&#038;#8&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56,6],"tags":[],"class_list":["post-1483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas","category-javascript","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/1483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=1483"}],"version-history":[{"count":16,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/1483\/revisions"}],"predecessor-version":[{"id":1493,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/1483\/revisions\/1493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/1484"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=1483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=1483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}