Canvg v3を使ってブラウザ上でSVGをCanvasに変換する - Qiita
2022年2月18日追記 2022年2月17日にリリースされたCanvg v4.0.0については、以下の記事をご参照ください。 はじめに ブラウザ上に表示されているSVGをPNG画像としてダウンロードしたいことがあります。その場合 1. Canvgを使ってcanvasにSVGをレンダリング 2. canvas.toDataURL()またはcanvas.toBlob()とURL.createObjectURL(blob)を使ってdataURLに変換 3. <a>タグのhref属性にdataURLを指定し、ダウンロード という手順で行われることが多いです。1 このような日本語の解説記事はいくつかありますが、Canvg v2.0.0を基にした古いものが多く2、2019年にリリースされた最新のv3.0.7について書かれたものは筆者が見た限りなさそうです。 そこでこの記事では、手順1.について、Ca
svg要素の基本的な使い方まとめ
22.canvgを用いたcanvas要素との連携 svg文書は有る意味，図形を描画する手順を記したスクリプトとも考えられる．canvgはこのアプローチのもと，svg画像をcanvas要素に描画するjavascriptライブラリである．本項ではこのcanvgの紹介と，レガシーie用ライブラリexplorercanvasと組み合わせてレガシーieを含めたクロスブラウザ上でsvgグラフィックを描く方法を示す．なお本項目は実験的要素が高く，実運用に耐えるとは考えられないため読み飛ばしても一向に構わない． canvgによるcanvas要素へのsvgの描画 canvgはsvg記述の内容をcanvas要素における描画手続きに置き換えることでcanvas上にsvgグラフィックを描くというjavascriptモジュールであり，一見無駄なようにも思えるが，次に示す点で非常に有用である． svgグラフィックをc
【Python】SVGをPNGに変換できるSvglibのインストール
「SVGをPNG・JPG・GIFに変換したい」 「PythonでSVGを処理する必要がある」 このような場合には、Svglibがオススメです。 この記事では、SVGをPNGに変換できるSvglibのインストールについて解説しています。 本記事の内容 Svglibとは？Svglibのシステム要件SvglibのインストールSvglibの動作確認 それでは、上記に沿って解説していきます。 Svglibとは？ Svglibとは、SVGの読み込み・変換を行うPythonライブラリです。 そして、SvglibはSVGをReportLab Drawingオブジェクトへ変換がすることができます。 ReportLabについては、次の記事で説明しています。
【D3.js】チャートをSVGやPNGでダウンロードできるようにするまでの長い道のり
結論 先に結論だけ書いておきます。 画像にしてダウンロードさせるのは、サーバーサイドでSVGをラスタに変換する方がずーと楽。 目標 ・D3.jsで出力したチャートをSVGやPNGでダウンロードできるようにする。 ・ダウロードしたチャートにはCSSの内容も反映されていること。 SVG・PNG共通 チャートに適用されているCSSの内容がダウンロードしたファイルにも反映されるように、すべてのパラメータをSVGの属性(atribute)に変換します。 その際、元のチャートには手をつけたくないので、ダウンロード実行時にいったんチャートエレメントをすべてコピーしgetComputedStyleメソッドを使ってチャートを構成する要素の算出スタイルをatributeに変換します。 そのままでは数が多すぎるので、空のSVGを作成して必要なスタイルを抽出するためのフィルターとして使います。 ぶっちゃけこの辺は
JavascriptでPDFを作成するライブラリまとめと比較
JavascriptでPDFを作成するライブラリをまとめてそれらを用途や使用方法を比較しながら紹介していきます。また、近年のフロントエンドで扱いやすい？Nodeとブラウザーで動く？型はあるか？日本語フォントは使えるのか？という観点でも比較しています。 PDFの作成サービスを作成して(このサイトです！)毎日数万ページのPDFを作成しており、JavascriptでのPDFの作成にそれなりに詳しくなってきたのでこの記事を作成しました。笑 Javascriptで扱えるPDFのライブラリーはいくつかあります。しかし、実際どれを使えばいいのかわかりにくいので、それらを比較しながら紹介していきます。 UMDモジュールとして提供されていて、近年のフロントエンド(TypeScript/Webpack/React/etc.)で扱いやすい？Nodeとブラウザーで動く？型はあるか？日本語フォントは使えるのか？とい
JavaScriptで「データを可視化」何を使う？ 10種類のライブラリを比較
JavaScriptで「データを可視化」何を使う？ 10種類のライブラリを比較：提供ツールや付加機能、短所、導入／使用方法を解説 CoderPadはJavaScriptでよく使われる10種類のデータ可視化ライブラリを紹介した。ApexCharやChart.js、D3.jsなどを扱う。 コーディング面接に使われるWebサービスなどを手掛けるCoderPadは2022年8月23日（米国時間）、「JavaScript」でよく使われる10種類のデータ可視化ライブラリを紹介した。 データをビジュアルでグラフィカルなフォーマットに合わせて表示するデータ可視化は、データを分かりやすく、効率的に伝える上で効果的だ。 紹介されている10種類のライブラリは次の通り。 ・ApexChart ・Chart.js ・D3.js ・Techan.js ・AnyChart ・Taucharts ・Zoomcharts
コピペでOK！アメダスのデータをそれっぽく可視化してみよう | IIJ Engineers Blog
名古屋支社所属。新しい技術・怪しいデバイス・GISが好き。名古屋から影響力のある開発チームを作って発信していくのを目標としている 【IIJ 2021 TECHアドベントカレンダー 12/17（金）の記事です】 はじめに またまた名古屋からこんにちは。今年もアドベントカレンダーへエントリーしてみました。 やっと2021年も本気出していこうと思っていたところ、もう終わりなんですね。残念、来年から本気出します。 まあ終わり良ければ総て良しと言うことで、最後はこれで締めたいと思います。最後までよろしくお願いします。 テーマを決める とりあえず勢いでエントリーしてみたものの、何をテーマにしようかなーと考えていたところ、コロナ感染者マップが目に入ってきました。 “地図楽しそうだなー。地図かぁ・・・そうだ！！オープンデータを可視化しよう！” うん、ビビッと来たわけです。 でもコロナ関係は巷にあふれている
JavaScriptでSVGをPNGに変換する方法【動画版あり】
この記事について この記事ではフロントエンドのJavaScriptでSVGをPNGに変換する方法について紹介します。関連リソースを下記に示します。 ソースコード デモ English version / 英語版 動画版 おおまかな流れ おおまかな流れを下記に示します。 コーディングの準備 コーディング 動作確認 コーディングの準備 ターミナルで下記のコマンドを実行してコーディングの準備をします。
JavaScriptでsvgをpngに変換して保存する - To The Sky
d3.jsで作ったsvgをpngに変換して保存する方法。 1.svgをcanvasに描画。 GitHub - canvg/canvg: Javascript SVG parser and renderer on Canvas canvg("canvas", "<svg>...</svg>" ); 2.canvasをtoDataURL()で、Base64エンコードした文字列に変換。 toDataURL() メソッド - Canvasリファレンス - HTML5.JP var png = document.getElementById("canvas").toDataURL(); 3.pngとして保存。 いろいろ方法があるみたい。 chrome, firefoxではa要素にdownload属性をつけるとうまく1clickで保存できるので、無理やりリンクを生成してclickイベントを発生させてい
D3.js + jsdomでSVGファイルを作成 & pngに変換 - Qiita
これが基本形です。makeSVG.jsがconsole.log()で出力した内容を、>（リダイレクト）でファイルoutput.svgに出力しています。 jsdomの書き方が過去のものとは少し変わりました。 その他変更点など 過去の記事ではd3.queueとd3.jsonで国土地理院のベクトルタイルを読み込みましたが、今回ローカルのファイルを読み込むに当たってd3.jsonが使えなかったので、代わりにfs.readFileを使用します。 const fs = require('fs'); // 上記の基本形は省略 const q = d3.queue() .defer(fs.readFile, './data/j1results.json') .defer(fs.readFile, './data/j2results.json') .defer(fs.readFile, './data/j3
SVG画像をjavascriptでpngに変換してダウンロードする方法
D3.jsやflowchart.jsなど、SVGで出力された画像を保存したくなるときが多々あります。 そんなときに使うjavascript。Chromeのデバッガーツールのconsoleから入力するだけでOK。 出力処理 var svg = document.querySelector("svg"); var svgData = new XMLSerializer().serializeToString(svg); var canvas = document.createElement("canvas"); canvas.width = svg.width.baseVal.value; canvas.height = svg.height.baseVal.value; var ctx = canvas.getContext("2d"); var image = new Image; ima
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
