IT the Best
Webサイト開発時のHTMLコーディング、デザイン制作、閲覧時などで、ブラウザ上で素早く使用できる便利機能のJavaScriptコードをまとめました。
ブラウザのコンソールで使用して活用できるかと思います。
ローカル画像の貼り付け・表示確認
端末内にあるローカル画像を、インターネット上のページに貼り付けて表示確認をするためのコードです。
まずローカル画像をブラウザで表示して、下記コードをコンソールで実行し、出力された文字列をコピーします。
var img = document.querySelector('img');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// dataURL を取得
var dataUrl = canvas.toDataURL('image/png');
dataUrl
コピーした文字列を使用してローカル画像をインターネット上のページに表示します。
既存画像の代わりにローカル画像を表示したい場合
imgタグのsrcをコピーした文字列に変更します。
任意の位置にローカル画像を表示したい場合
下記コードを追加します。
<img src=[コピーした文字列]>
日本語を含むURLを日本語のままコピペ（コピーアンドペースト）する
日本語を含むURLのページ閲覧時にブラウザのURL欄をコピーしたとき、通常は日本語部分が異なる文字列でコピーされます。
URLとしてコピーしなければ文字化けせずコピーできるようです。
例）http(s)のhを除いてコピーする
コンソールで下記コードを使用することで、日本語のままコピーできます。
decodeURI(location.href)
JavaScriptファイルを追加する
JavaScriptファイルの読み込みを追加する方法です。
var script=document.createElement("script")
script.src=[url]
document.body.append(script)
HTMLの一部を画像にして保存する
HTMLの一部を画像ファイルとして保存する方法です。
var script=document.createElement("script")
script.src="https://html2canvas.hertzen.com/dist/html2canvas.js"
document.body.append(script)
var capture = document.querySelector("#sss");
html2canvas(capture, {useCORS: true}).then(canvas => {
var base64 = canvas.toDataURL('image/png');
$('#sss-img').attr("src", base64);
});
画像として保存したい要素に「sss」というidをつけて、任意の位置に<img id="sss-img">を作成します。
その後、上記コードを実行することで「sss」の部分が画像として表示されます。
