IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【JS】Webサイト開発・HTMLコーディング・Webページ閲覧時のJavaScript便利機能まとめ

JavaScript便利コード

Photo by Todd Quackenbush on Unsplash

 

 

 

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」の部分が画像として表示されます。