html2canvasでキャプチャした画像が空になる

投稿者: Anonymous html2Canvasの DOMを画像に書き出す方法 を参考にさせていただき、コードを書いたのですが、 スクリーンショットを撮るボタンを押しても、空の画像ファイルが生成されるだけです。 クリアボタンも効きません…。 私が、ターゲットとなるdivの中で、img srcにphp変数を使用しているからなのでしょうか? しかしローカルファイルに置換してもダメでした。 <div id=”target_screen”> <?php echo “<img class=”effectedImage” src=”$image”>”; ?> </div> テストとして、この画面下部にスクリーンショットを表示しようとしていますが、 最終的には、取得した画像を別のphpへpostしたいと考えています。 ご教授願います。 解決 HTMLページと同じオリジン(由来、大抵ドメインで決まります)の画像を使用していますか? Canvas要素に別オリジンの要素を描画した場合、そのCanvas要素の内容は取り出せなくなります。 セキュリティ上の制約です。 この制約がないと、本人しか閲覧できないはずの写真をJavaScriptで盗む、といった事が可能になるからです。 自分が所有しているサーバ同士であれば、同じオリジンとして扱う方法もあるようです。https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image 回答者: Anonymous

「img.onload」後に、生成したimgオブジェクトを「img.style.display = ‘none’;」している理由は?

投稿者: Anonymous リンク先の「カラーピッカー」で、「img.onload」後に、「img.style.display = ‘none’;」しているのですが、どういう意味があるでしょうか? ・コメントアウトしても挙動は同じでした 「display = ‘none’;」でも、画像は非表示にならないのは… ・canvasに描画したから、imgは不要ということでしょうか? ・imgオブジェクトは、生成しただけなので(DOMに組み込んでいないので)、わざわざ非表示にする必要もないように思うのですが… ・削除ではなく非表示?? var ctx = canvas.getContext(‘2d’); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = ‘none’; }; mdn 解決 質問者さんもおっしゃってる通り私も理由思い付かず、意味はないと思います。 回答者: Anonymous

rangeの値に合わせてarcで図形を生成したい

投稿者: Anonymous <input type=”range” name=”range” id=”range” data-input=”input” value=”0″ max=”70″> <canvas id=”rangearea” width=”80″ height=”80″></canvas> 上のrangeの数値に合わせて、下のrangeareaの図形の半径を取得したいです。 $(“#range”).on(“input”, function(){ lineWidth = $(this).val(); }); rangeは、lineWidthの値を決めていますが、 var can = $(“#rangearea”)[0]; var ctx = can.getContext(“2d”); ctx.beginPath(); ctx.fillStyle = “#00FFCC” ctx.arc(40,40,35, Math.PI*2,false); ctx.fill(); rangeareaの方は、半径が35とベタ書きになっています。 ここを、rangeの値と同様にするためにはどう記述したら良いでしょうか? 解決 上のrangeの数値に合わせて、下のrangeareaの図形の半径を取得したいです。 lineWidth の求め方はご存じですので、 さらにrangearea の半径を取得したいという真意がわかりませんでした。 おやりになりたいのは、このようなことでしょうか? _x000D_ _x000D_ $(“#range”).on(“change”, function() {_x000D_ var lineWidth = $(this).val() *…(Continue Reading)

全てのパーティクルに対して同じ処理を実装させたい[canvas]

投稿者: Anonymous <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>Circle</title> <style> * { margin: 0; padding: 0; overflow: hidden; } body { background: url(“hoge.png”); background-size: cover; } </style> </head> <body> <script> ;(function() { var canvas = document.createElement(“canvas”), W, H, mr, sr, mx, my, num = 6, particles = []; canvas.style.background = “transparent”; var ctx =…(Continue Reading)

HTML5 canvasで、テキストではなく、リンクテキストを描画したい

投稿者: Anonymous 現状 ・テキストなので、リンクを読み込むと、そのまま表示されてしまいます var ctx = document.getElementById(‘canvasのID名’); ctx.fillText(text, x, y); 出力結果 <a href=”/”>スタック・オーバーフロー</a> 質問 ・aタグを(リンク機能を保持したまま)canvasへ描画するためにはどうすれば良いでしょうか? ※描画後、canvas機能でアニメーション表示させる予定 解決 望んでいることは出来ないんじゃないか?……と思って調べてみました。 本家SOの方に同じ質問をしている方がいたのでリンクしておきます。 要するに実現している内容はclickable mapと同じです。 キャンバスの上に動いているマウスの座標を取得して、 指定座標内でクリックされたら遷移するものです。 WEB以外の表示でリンクしたい……は出来ません。 結局、出力は画像なので、出力する画像フォーマットにリンクの機能がないとリンクは出来ないです。 <html> <head> <script type=”text/javascript”> var canvas = document.getElementById(“myCanvas”); var ctx; var linkText = “http://stackoverflow.com”; var linkX = 5; var linkY = 15; var linkHeight = 10; var linkWidth; var…(Continue Reading)

Canvasの画像にフィルターを掛けたい

投稿者: Anonymous こちらのサイトを参考にfilterで画像を編集できるボタンを作っています。 _x000D_ _x000D_ var can = $(“#drawarea”)[0];_x000D_ var context = can.getContext(“2d”);_x000D_ _x000D_ _x000D_ $(“#select”).on(“change”,function(){_x000D_ var fileList = this.files ;_x000D_ if( 1 > fileList.length ){_x000D_ return false ;_x000D_ }_x000D_ var file = fileList[0] ;_x000D_ var fr = new FileReader() ;_x000D_ //読み込み後の処理_x000D_ fr.onload = function(){_x000D_ _x000D_ //[Image]クラスを起動_x000D_ var image = new Image() ;_x000D_ _x000D_ //読み込み完了後の処理_x000D_…(Continue Reading)

canvasで書いた線を曲線にしたい

投稿者: Anonymous canvasで線を書くときに、 太字になるとどうしても線が荒くなり綺麗な曲線を描けません。 下記参照 下のリンクのサイトでは、綺麗な曲線になっていて、どのように書かれているのか分からず、 同じような曲線を描きたいのですが、 どのようなjsの記述が必要でしょうか。 リンクの説明をここに入力 解決 lineJoinを’round’にすれば線と線の継ぎ目が目立たなくなります。またbezierCurveToなどの曲線用メソッドも使った方がよいです。 var ctx = canvas.getContext(‘2d’); ctx.lineWidth = 30; ctx.lineJoin = ’round’; ctx.beginPath(); ctx.moveTo(points[0], [1]); for (var i = 2; i < points.length – 5; i += 4) { ctx.bezierCurveTo(points[i], points[i + 1], points[i + 2], points[i + 3], points[i + 4], points[i + 5]); }…(Continue Reading)

canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?

投稿者: Anonymous canvasへ描画した内容をSVGのパスデータへ変換して、SVGのパターンを適用させてみたいのですが、そもそも、canvasへ描画した内容をSVGのパスデータへ変換することは出来ますか? 検索してみたら下記ページが見つかったのですが、ここで記載されている内容は、canvasへ描画した内容をSVGへ取り込んでいるだけでSVGのパスデータへ変換しているわけではないのですか? CanvasをSVGで利用する方法 解決 「canvasへ描画した内容をSVGのパスデータへ変換」に関しては、「パス」に変換されるかは不明ですが、この(古い)記事によると以下のようなライブラリがあるようです。 Method to convert HTML5 canvas to SVG? Fabric.jsというのが、そういう機能(canvasとSVG間の相互変換)を持っているようです。 Fabric.js is a powerful and simpleJavascript HTML5 canvas library Fabric provides interactive object model on top of canvas elementFabric also has SVG-to-canvas (and canvas-to-SVG) parser Fabric.jsは、強力でシンプルなJavascript HTML5キャンバスライブラリです。 Fabricは、canvas elementFabricの上にインタラクティブなオブジェクトモデルを提供します。Fabricには、SVG-to-canvas(およびcanvas-to-SVG)パーサーもあります。 またgliffy/canvas2svgというのもあるようです。 This library turns your Canvas into SVG using javascript. In…(Continue Reading)

pixi.jsでリングが描きたい

投稿者: Anonymous pixiを使ってリングの形が描きたいです。 円を描いて、その中を透明な円でくり抜きたいです。 canvasではarcとstrokeを使えばいけますが、pixiではエラーが出てしまいます。 ring = new PIXI.Graphics(); ring.beginPath(); ring.arc(x, y, rad, 0, Math.PI*2, false); ring.stroke(); ring.fill(); エラー文 : Cannot read property ‘beginPath’ of undefined pixiでは円は書けますが中をくり抜けないと思います。 あと普通にcanvasで描くものをpixiで使う時にどうすればいいのかがいまいちよくわからないです。 よろしくお願いします。 解決 円をbeginFillせずに、lineStyleを設定した状態でdrawCircleすることで枠線のみ描画できるはずです。 下記はgithubから取得したExamplesを展開し、examples-gh-pagesexamplesjsbasicsgraphics.jsを書き換えたサンプルコードです。 var app = new PIXI.Application(800, 600, { antialias: true }); document.body.appendChild(app.view); var graphics = new PIXI.Graphics(); // 普通の円 graphics.lineStyle(0); // lineStyleを0にすると枠線が描画されません。 graphics.beginFill(0xDE3249, 1);…(Continue Reading)

次のホームページのアニメーションの技術を分析したい

投稿者: Anonymous Javaを中心にWebアプリ開発を主にしています。 今ホームページ制作にも興味を持ち、色んなサイトを見ているのですが、 以下のサイトのアニメーションに興味があります。 このサイトのHoldすると結晶になるようなアニメーションはどんな技術を使っていますでしょうか? あるいは調べ方を教えていただけますと幸いです。 https://tsuyoshi.in/ URLがHTMLではないので、サーバーサイドの言語を使っていますでしょうか。 アドバイス頂けますと幸いです。 解決 結論 まずは結論から。greensock社が作成したアニメーションライブラリtweenmaxを利用しているようです。 調べ方 ざっくり調べ方ですが、Google Chromeのデベロッパーツールを開きNetworkタブをまず確認します。ブラウザ上でインタラクティブに動くものはほとんどの場合はJavaScriptで書かれているので、JavaScriptのファイルを確認しに行きます。 このとき、キャッシュを削除した上でファイルサイズソートを行います。 往々にして何かしらのライブラリを利用してるはずなので、ファイルサイズが大きいものがライブラリと想像できます(もしくは名前から)。 それっぽいファイルを直接見に行き、Licenseなどの文字列で検索をかけます。そうるすると利用しているライブラリに関連するURLや作者名などが引っ張ってこれます。 殆ど無いですが、ライセンスが記述されていない場合(ライセンス違反になることのほうが多いので殆どない)はwindowオブジェクトに登録されている変数名から割り出すこともできます。 参考 https://developers.google.com/web/tools/chrome-devtools/network https://greensock.com/ https://github.com/greensock/GSAP https://www.npmjs.com/package/gsap 回答者: Anonymous

JavaScript によりフリーハンドで描画させたい

投稿者: Anonymous JavasSriptで手書き入力を実現させたいのですが、中々いいサンプルがありません。 色の選択、線の太さ等設定は必要ありません。 単純にかければいいだけです。 サンプルページ等あれば教えて下さい。 宜しくお願いします。 解決 お絵かきツール的なものだと判断しました。 「かければいいだけ」であることを考えて最小限のコードを書くと次のようになります。 _x000D_ _x000D_ var canvas = document.querySelector(“canvas”);_x000D_ canvas.addEventListener(“mousemove”, function(e){_x000D_ e.buttons === 1 && canvas.getContext(“2d”).fillRect(e.offsetX, e.offsetY, 5, 5);_x000D_ }); _x000D_ <canvas/> _x000D_ _x000D_ _x000D_ 回答者: Anonymous