{"id":13330,"date":"2021-03-21T08:39:40","date_gmt":"2021-03-20T23:39:40","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=13330"},"modified":"2024-11-15T20:39:15","modified_gmt":"2024-11-15T11:39:15","slug":"%e3%80%90javascript%e3%80%91%e3%80%8chtml2canvas%e3%80%8d%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=13330","title":{"rendered":"\u3010Javascript\u3011\u300chtml2canvas\u300d\u3001\u300cjsPDF\u300d\u306b\u3064\u3044\u3066"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">html2canvas\u3068\u306f\uff1f<\/h2>\n\n\n\n<p>HTML \u306e Element \u3092\u753b\u50cf\u306b\u5909\u63db\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002\u5b9f\u969b\u306b\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u3063\u3066\u3044\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30a8\u30f3\u30b8\u30f3\u306b\u8fd1\u3044\u6319\u52d5\u306b\u306a\u308b\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u69cb\u6587<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">html2canvas(\u30ad\u30e3\u30d7\u30c1\u30e3\u306e\u5bfe\u8c61\u8981\u7d20,\u30aa\u30d7\u30b7\u30e7\u30f3).then(function(\u30c7\u30fc\u30bfURL){\n    \u30c7\u30fc\u30bfURL\u306e\u51fa\u529b\u51e6\u7406\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30aa\u30d7\u30b7\u30e7\u30f3<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u8a2d\u5b9a\u5024<\/th><th>\u30c7\u30d5\u30a9\u30eb\u30c8\u5024<\/th><th>\u8aac\u660e<\/th><\/tr><\/thead><tbody><tr><td>allowTaint<\/td><td><code class=\"language-plaintext highlighter-rouge\">false<\/code><\/td><td>\n<p class=\"p1\">\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u306e\u753b\u50cf\u306b\u3088\u308b\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u6c5a\u67d3\u3092\u8a31\u53ef\u3059\u308b\u304b\u3069\u3046\u304b<\/p>\n<\/td><\/tr><tr><td>backgroundColor<\/td><td><code class=\"language-plaintext highlighter-rouge\">#ffffff<\/code><\/td><td>DOM \u3067\u4f55\u3082\u6307\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u80cc\u666f\u8272\u3002<code class=\"language-text\">null<\/code>\u900f\u660e\u306b\u8a2d\u5b9a<\/td><\/tr><tr><td>canvas<\/td><td><code class=\"language-plaintext highlighter-rouge\">null<\/code><\/td><td><code class=\"language-text\">canvas<\/code>\u63cf\u753b\u306e\u30d9\u30fc\u30b9\u3068\u3057\u3066\u4f7f\u7528\u3059\u308b\u65e2\u5b58\u306e\u8981\u7d20<\/td><\/tr><tr><td>foreignObjectRendering<\/td><td><code class=\"language-plaintext highlighter-rouge\">false<\/code><\/td><td>\u30d6\u30e9\u30a6\u30b6\u304c\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u5834\u5408\u3001ForeignObject \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u4f7f\u7528\u3059\u308b\u304b\u3069\u3046\u304b<\/td><\/tr><tr><td>imageTimeout<\/td><td><code class=\"language-plaintext highlighter-rouge\">15000<\/code><\/td><td>\u753b\u50cf\u8aad\u307f\u8fbc\u307f\u306e\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8 (\u30df\u30ea\u79d2\u5358\u4f4d)\u3002\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3092\u7121\u52b9\u306b\u3059\u308b\u306b\u306f\u3001 \u306b\u8a2d\u5b9a\u3057\u307e\u3059<code class=\"language-text\">0<\/code>\u3002<\/td><\/tr><tr><td>ignoreElements<\/td><td><code class=\"language-plaintext highlighter-rouge\">(element) =&gt; false<\/code><\/td><td>\u4e00\u81f4\u3059\u308b\u8981\u7d20\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304b\u3089\u524a\u9664\u3059\u308b\u8ff0\u8a9e\u95a2\u6570\u3002<\/td><\/tr><tr><td>logging<\/td><td><code class=\"language-plaintext highlighter-rouge\">true<\/code><\/td><td>\u30c7\u30d0\u30c3\u30b0\u76ee\u7684\u3067\u30ed\u30ae\u30f3\u30b0\u3092\u6709\u52b9\u306b\u3059\u308b<\/td><\/tr><tr><td>onclone<\/td><td><code class=\"language-plaintext highlighter-rouge\">null<\/code><\/td><td>Document \u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u305f\u3081\u306b\u8907\u88fd\u3055\u308c\u305f\u3068\u304d\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u5143\u306e\u30bd\u30fc\u30b9 \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u3053\u3068\u306a\u304f\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/td><\/tr><tr><td>proxy<\/td><td><code class=\"language-plaintext highlighter-rouge\">null<\/code><\/td><td>\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3 \u30a4\u30e1\u30fc\u30b8\u306e\u30ed\u30fc\u30c9\u306b\u4f7f\u7528\u3055\u308c\u308b<a href=\"http:\/\/html2canvas.hertzen.com\/proxy\/\">\u30d7\u30ed\u30ad\u30b7<\/a>\u3078\u306e URL \u3002\u7a7a\u306e\u307e\u307e\u306b\u3059\u308b\u3068\u3001\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3 \u30a4\u30e1\u30fc\u30b8\u306f\u8aad\u307f\u8fbc\u307e\u308c\u307e\u305b\u3093\u3002<\/td><\/tr><tr><td>removeContainer<\/td><td><code class=\"language-plaintext highlighter-rouge\">true<\/code><\/td><td>html2canvas \u304c\u4e00\u6642\u7684\u306b\u4f5c\u6210\u3059\u308b\u8907\u88fd\u3055\u308c\u305f DOM \u8981\u7d20\u3092\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u3059\u308b\u304b\u3069\u3046\u304b<\/td><\/tr><tr><td>scale<\/td><td><code class=\"language-plaintext highlighter-rouge\">window.devicePixelRatio<\/code><\/td><td>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306b\u4f7f\u7528\u3059\u308b\u30b9\u30b1\u30fc\u30eb\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d0\u30a4\u30b9\u306e\u30d4\u30af\u30bb\u30eb\u6bd4\u3067\u3059\u3002<\/td><\/tr><tr><td>useCORS<\/td><td><code class=\"language-plaintext highlighter-rouge\">false<\/code><\/td><td>CORS \u3092\u4f7f\u7528\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u753b\u50cf\u3092\u30ed\u30fc\u30c9\u3057\u3088\u3046\u3068\u3059\u308b\u304b\u3069\u3046\u304b<\/td><\/tr><tr><td>width<\/td><td><code class=\"language-plaintext highlighter-rouge\">Element<\/code>&nbsp;width<\/td><td>canvas\u306e\u5e45<\/td><\/tr><tr><td>height<\/td><td><code class=\"language-plaintext highlighter-rouge\">Element<\/code>&nbsp;height<\/td><td>canvas\u306e\u9ad8\u3055<\/td><\/tr><tr><td>x<\/td><td><code class=\"language-plaintext highlighter-rouge\">Element<\/code>&nbsp;x-offset<\/td><td>\u30ad\u30e3\u30f3\u30d0\u30b9\u306e x \u5ea7\u6a19\u3092\u30c8\u30ea\u30df\u30f3\u30b0<\/td><\/tr><tr><td>y<\/td><td><code class=\"language-plaintext highlighter-rouge\">Element<\/code>&nbsp;y-offset<\/td><td>\u30ad\u30e3\u30f3\u30d0\u30b9\u306e y \u5ea7\u6a19\u3092\u30c8\u30ea\u30df\u30f3\u30b0<\/td><\/tr><tr><td>scrollX<\/td><td><code class=\"language-plaintext highlighter-rouge\">Element<\/code>&nbsp;scrollX<\/td><td>\u8981\u7d20\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u3068\u304d\u306b\u4f7f\u7528\u3059\u308b x \u30b9\u30af\u30ed\u30fc\u30eb\u4f4d\u7f6e (\u305f\u3068\u3048\u3070\u3001\u8981\u7d20\u304c \u3092\u4f7f\u7528\u3059\u308b\u5834\u5408<code class=\"language-text\">position: fixed<\/code>)<\/td><\/tr><tr><td>scrollY<\/td><td><code class=\"language-plaintext highlighter-rouge\">Element<\/code>&nbsp;scrollY<\/td><td>\u8981\u7d20\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u3068\u304d\u306b\u4f7f\u7528\u3059\u308b y \u30b9\u30af\u30ed\u30fc\u30eb\u4f4d\u7f6e (\u305f\u3068\u3048\u3070\u3001\u8981\u7d20\u304c \u3092\u4f7f\u7528\u3059\u308b\u5834\u5408<code class=\"language-text\">position: fixed<\/code>)<\/td><\/tr><tr><td>windowWidth<\/td><td><code class=\"language-plaintext highlighter-rouge\">Window.innerWidth<\/code><\/td><td>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u306b\u4f7f\u7528\u3059\u308b\u30a6\u30a3\u30f3\u30c9\u30a6\u5e45<code class=\"language-text\">Element<\/code>\u3002\u30e1\u30c7\u30a3\u30a2 \u30af\u30a8\u30ea\u306a\u3069\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/td><\/tr><tr><td>windowHeight<\/td><td><code class=\"language-plaintext highlighter-rouge\">Window.innerHeight<\/code><\/td><td>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u306b\u4f7f\u7528\u3059\u308b\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u9ad8\u3055<code class=\"language-text\">Element<\/code>\u3002\u30e1\u30c7\u30a3\u30a2 \u30af\u30a8\u30ea\u306a\u3069\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">jsPDF\u3068\u306f\uff1f<\/h2>\n\n\n\n<p>\u753b\u50cf\u3092PDF\u3068\u3057\u3066\u66f8\u304d\u51fa\u305b\u307e\u3059\u3002html2canvas\u3068\u540c\u6642\u306b\u4f7f\u308f\u308c\u308b\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">addImage\u30e1\u30bd\u30c3\u30c9<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>\u30aa\u30d7\u30b7\u30e7\u30f3\u540d<\/th><th>\u8aac\u660e<\/th><\/tr><tr><td>imageData<\/td><td>base64\u3067\u30a8\u30f3\u30b3\u30fc\u30c9\u3055\u308c\u305fDataUrl\u307e\u305f\u306fImage-HTMLElement\u307e\u305f\u306fCanvas-HTMLElement\u3068\u3057\u3066\u306eimageData<\/td><\/tr><tr><td>format<\/td><td>JPEG\u306a\u3069\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u5f62\u5f0f\u3067\u3059\u3002<\/td><\/tr><tr><td>x<\/td><td>PDF\u306e\u30da\u30fc\u30b8\u306ex\u5ea7\u6a19\uff08\u6a2a\u65b9\u5411\uff09\u3067\u3059\u3002<\/td><\/tr><tr><td>y<\/td><td>PDF\u306e\u30da\u30fc\u30b8\u306ey\u5ea7\u6a19\uff08\u7e26\u65b9\u5411\uff09\u3067\u3059\u3002<\/td><\/tr><tr><td>width<\/td><td>PDF\u306e\u5e45<\/td><\/tr><tr><td>height<\/td><td>PDF\u306e\u9ad8\u3055<\/td><\/tr><tr><td>alias<\/td><td>\u753b\u50cf\u306e\u30a8\u30a4\u30ea\u30a2\u30b9\uff08\u8907\u6570\u56de\u4f7f\u7528\u3059\u308b\u5834\u5408\uff09<\/td><\/tr><tr><td>compression<\/td><td>\u751f\u6210\u3055\u308c\u305fJPEG\u306e\u5727\u7e2e\u306b\u306f\u3001\u300cNONE\u300d\u3001\u300cFAST\u300d\u3001\u300cMEDIUM\u300d\u3001\u300cSLOW\u300d\u306e\u5024\u3092\u6307\u5b9a\u3067\u304d\u308b\u3002<\/td><\/tr><tr><td>rotation<\/td><td>\u753b\u50cf\u3092\u56de\u8ee2\u3055\u305b\u308b\u5834\u5408\u306b\u4f7f\u3046\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"html2canvas\u3068\u306f\uff1f HTML \u306e Element \u3092\u753b\u50cf\u306b\u5909\u63db\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002\u5b9f\u969b\u306b\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u3063\u3066\u3044\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30a8\u30f3\u30b8\u30f3\u306b\u8fd1\u3044\u6319\u52d5\u306b\u306a\u308b\u3002 \u69cb\u6587 html2canvas( [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13330"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13330"}],"version-history":[{"count":7,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13330\/revisions"}],"predecessor-version":[{"id":23923,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13330\/revisions\/23923"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13330"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}