Tool to extract RGB values from canvas element.

hexFromCanvas.js

/*hexFromCanvas
* hexFromCanvas.js
*===================================================================
*	Copyright (c) 2021 Yuji SODE <yuji.sode@gmail.com>
*
*	This software is released under the MIT License.
*	See LICENSE or http://opensource.org/licenses/mit-license.php
*===================================================================
* Tool to extract RGB values from canvas element.
* Returned value is csv text map, that is composed of hexadecimal numbers, comma (,) and newline character
* === Synopsis ===
* - `hexFromCanvas(srcCanvas);`
*   	it returns RGB values in csv text map from a given canvas element
*   	--- Parameter ---
*   	- `srcCanvas`: target canvas element to scan
*===================================================================
*/
// === How to use ===
//	var cvs=window.document.getElementById(canvasId);
//	//canvasId is id of a canvas element
//	var v=hexFromCanvas(cvs);
//	setTimeout(()=>console.log('canvas values:',v));
//===================================================================
//
//Tool to extract RGB values from canvas element
//returned value is csv text map, that is composed of hexadecimal numbers, comma (,) and newline character
function hexFromCanvas(srcCanvas){
	// - srcCanvas: target canvas element to scan
	//===
	//
	var slf=window,w=srcCanvas.width,h=srcCanvas.height;
	//
	//=== script for worker ===
	var scpt=[
		/*== head part of eventlistener ==*/
		"self.addEventListener('message',",
		/*== dealing with pixel data ==*/
		`(e)=>{var d=e.data.data,W=${w},H=${h},i=0,j=0,k=0,R='';`,
		/*
		* ##################
		* while(i<H){
		* 	j=0;
		* 	while(j<W){
		* 		R+=`${j!=0?',':''}${(d[k]).toString(16)}${(d[k+1]).toString(16)}${(d[k+2]).toString(16)}`;
		* 		j+=1;
		* 		k+=4;
		* 	}
		* 	R+=`${i<H-1?'\\n':''}`;
		* 	i+=1;
		* }
		* ##################
		*/
		"while(i<H){j=0;while(j<W){R+=`${j!=0?',':''}${(d[k]).toString(16)}${(d[k+1]).toString(16)}${(d[k+2]).toString(16)}`;j+=1;k+=4;}R+=`${i<H-1?'\\n':''}`;i+=1;}",
		/*== return result ==*/
		'self.postMessage(R);d=W=H=i=j=k=R=null;},',
		/*== tail part of eventlistener ==*/
		'true);'
	].join('');
	//
	//=== generation of worker ===
	//
	var blob=new Blob([scpt],{type:'text/javascript'});
	var objUrl=slf.URL.createObjectURL(blob);
	var wk=new Worker(objUrl);
	slf.URL.revokeObjectURL(objUrl);
	blob=objUrl=null;
	//========================================
	//
	var F=()=>{
		var log=[];
		wk.addEventListener('message',(e)=>{
			log[0]=e.data;
			//
			wk.terminate();
			srcCanvas=null;
		},true);
		//
		wk.postMessage(srcCanvas.getContext('2d').getImageData(+0,+0,+w,+h));
		//
		return log;
	};
	//========================================
	//
	return F();
};
/*
* *** LICENSE ***
* MIT License
*
* Copyright (c) 2021 Yuji Sode
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

How to use

var cvs=window.document.getElementById("canvasId");
//canvasId is id of a canvas element
var v=hexFromCanvas(cvs);
setTimeout(()=>console.log('canvas values:',v));