JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="https://no2js.azurewebsites.net/util/sha512.js"></script>

<img id='imgM' />

<hr>

<span id='span_result'></span>


<span id='span_base64'></span>

JavaScript

function CanvasHash() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var txt = '當麻測試'+","+window.screen.height+"x"+window.screen.width+" DONMA HSU" +"😎";
    ctx.textBaseline = "top";
    ctx.font = "16px 'Georgia'";
    ctx.textBaseline = "alphabetic";
    ctx.rotate(0.56);
    ctx.fillStyle = "#ECF5FF";
    ctx.fillRect(125,1,62,40);
    ctx.fillStyle = "#005757";
    ctx.fillText(txt, 2, 15);
    ctx.fillStyle = "rgba(70, 46, 107, 0.7)";
    ctx.fillText(txt, 4, 17);
    ctx.shadowBlur=6;
    ctx.shadowColor="magenta";
    ctx.fillRect(-40,10,234,5);
    var res=canvas.toDataURL();
   
		return res;
    
}

//取得畫出來圖片的 base64
var source=CanvasHash();

//取得該圖的 hash512
var fingerprint=sha512(source);

//canvas fingerprint
$('#span_result').html("<span style='color:red'>DATA:</span><br>"+fingerprint+"<br>");

//把圖具象化
$('#imgM').attr("src",source);

$('#span_base64').html("<span style='color:red'>IMAGE BASE64:</span><br>"+source);