みかづきブログ・カスタム

基本的にはちょちょいのほいです。

html2canvas

clip-pathで切り抜いたDOMを画像化する 🖼

DEMO clip-pathで切り抜いたDOMをhtml2canvasで画像化すると、clip-pathが無視されます。 もろもろ試したところ、dom-to-imageというライブラリを使ってみると、しっかりとclip-pathを反映することができました。github.com html2canvasで画像化 dom-to-imag…

html2canvasがwriting-mode: vertical-rlに対応しきれていないのでCanvasで縦書きを実現する 📝

writing-mode: vertical-rlを使えばCSSで縦書きを簡単に実現できます。developer.mozilla.org DEMO 普段はこれでまったく問題ないのですが、html2canvasを使ってHTMLを画像書き出ししようとすると、writing-mode: vertical-rlがうまく評価されません。 検証…

html2canvasでmix-blend-modeを使っているページのスクリーンショットを撮る 📸

ことの発端 調査(Issueを発見) さらに調査(プルリクエストを発見) 検証 左(ブレンドモードなし) HTML 中央(ブレンドモードあり) HTML 右(ブレンドモードあり) HTML 画像化 左(ブレンドモードなし) 中央(ブレンドモードあり) 右(ブレンドモー…

Googleカレンダーの予定名を「予定あり」に変更した状態のスクリーンショットを撮影してダウンロードするブックマークレットをつくりました 📅

以前作成・検証した、Googleカレンダーの予定名を「予定あり」に変更するスクリプト、html2canvasでのスクリーンショットの撮影、ユーザークリックなしのファイルダウンロードを組み合わせたブックマークレットをつくりました。 blog.kimizuka.org blog.kimi…

html2canvasでページのスクリーンショットを撮る 📸

html2canvasを使ってHTMLの画像化を試みました。