コニファ・ロゴ

csstest:[JS]DOM要素をcanvasで描画して、テキストのコピーを制限

JavaScriptでDOM要素をcanvasに描画して、テキストのコピーを制限します。制限といってもhtmlのソースを見れば、そこに書かれていてコピーも可能ですので、コピーして欲しくないという姿勢を示すだけに留まります。

サンプルのテキストは、htmlのDOM要素をcanvasに描画しているので、テキストとして選択、コピーができない仕組みになっています。ただし、htmlの要素を直接canvasに描画できないので、svg画像の中の <foreignObject>にhtml要素を内包させ、そのsvg画像をcanvasに描画しています。

サンプル

h1要素のサンプルテキスト

h2要素のサンプルテキスト

div要素 > p要素のサンプルテキスト

  • div要素 > ul要素 > li要素のサンプルテキスト(1)
  • div要素 > ul要素 > li要素のサンプルテキスト(2)
  • div要素 > ul要素 > li要素のサンプルテキスト(3)

 

html(描画するcanvas要素と元のDOM要素)ソース

<canvas id="world"></canvas>
<div id="dom">
    <h1 style="font-size:22px;color:#48e;">h1要素のサンプルテキスト</h1>
    <h2 style="font-size:18px;color:#46c;">h2要素のサンプルテキスト</h2>
    <div>
        <p style="font-size:15px;color:#666;">div要素 &gt; p要素のサンプルテキスト</p>
        <ul>
            <li style="font-size:15px;color:#377;">div要素 &gt; ul要素 &gt; li要素のサンプルテキスト(1)</li>
            <li style="font-size:15px;color:#737;">div要素 &gt; ul要素 &gt; li要素のサンプルテキスト(2)</li>
            <li style="font-size:15px;color:#773;">div要素 &gt; ul要素 &gt; li要素のサンプルテキスト(3)</li>
        </ul>
    </div>
</div>

 

戻るボタン