gbrault/text2image.html

## text2image.html
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
    var enc = new window.TextEncoder();
	var dec = new window.TextDecoder();
    var txt = document.getElementById('txt');
	var val = txt.value;
	var byt = enc.encode(val);
    var imgData = ctx.getImageData(10, 10, 50, 50);
	cpyArray2ImageData(imgData,byt);
    ctx.putImageData(imgData, 10, 70);
	var imgDataBack = ctx.getImageData(10, 70, 50, 50)
	var back = cpyImageData2Array(imgDataBack);
	var cpy = document.getElementById('cpy');
	cpy.innerText = dec.decode(new Uint8Array(back));
}

function cpyArray2ImageData(dst,src){
	var l = src.length;
	var i,j;

	for(i=0;i<3;i++){
		dst.data[i]=l%256;
		l = (l - l%256)/256;
	}
	dst.data[3]=255;
	j=0;
	for(i=0; i<src.length;i++){
		dst.data[j+4]=src[i];
		j++;
		if((j%4)==3){
			dst.data[j+5]=255;
			j++;
		}
	}
}

function cpyImageData2Array(src){
	var i;
	var l=0;

	dst=[];

	for(i=0;i<3;i++){
		l = src.data[2-i]+l*256;
	}
	var t = (l-(l%3))/3;
	l = l+t;

	for(i=0;i<l;i++){
		dst.push(src.data[i+4]);
		if((i%4)==2) i++;
	}

	return dst;
}


</script>
<button onclick="copy()">Copy</button>
<br>
<textarea id="txt" cols="80">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt tincidunt lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel volutpat erat, ut congue arcu. Vestibulum turpis turpis, mattis nec neque id, elementum suscipit urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sed lectus eu lorem venenatis ullamcorper vel finibus nibh. Fusce suscipit, mi id elementum sagittis, erat felis viverra risus, vitae condimentum orci nulla sed sapien. Cras eget nunc purus.

Aenean maximus nulla quis mauris pulvinar tristique. Morbi arcu lorem, dictum eget leo eget, sagittis viverra nisl. Sed non eleifend urna. Sed iaculis augue id semper luctus. Quisque dictum lobortis enim, non commodo metus tincidunt id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec pellentesque mi. Donec nisi sapien, mattis ut dolor sed, commodo interdum enim. Aliquam eu nibh lacus. Pellentesque quis justo sed risus ultrices eleifend at et odio. Ut sit amet urna nec sapien feugiat lobortis a nec quam. Aenean tincidunt volutpat diam, at malesuada mauris tincidunt sed. Praesent vestibulum congue metus sed posuere. Fusce nec massa a lorem rutrum feugiat id vel nunc. Suspendisse massa massa, mollis id fermentum eget, euismod at metus.

Sed lectus felis, ultrices id volutpat eget, imperdiet a purus. Aenean elementum diam sem, a semper lorem congue at. Vivamus eleifend interdum tincidunt. Nullam consequat sed quam vitae commodo. Cras sollicitudin feugiat dui a scelerisque. Donec gravida libero justo, vel accumsan nibh suscipit nec. Suspendisse eget orci nec augue consectetur sagittis. Nam pulvinar sem sit amet arcu rutrum, in pellentesque diam accumsan. Maecenas pulvinar id mi vitae finibus. Vivamus malesuada mollis risus finibus egestas. Curabitur blandit quam in sem porttitor rutrum. Vestibulum pretium, nisi vitae aliquet ornare, augue felis viverra lectus, pulvinar tincidunt felis felis at eros. Suspendisse tempus metus vitae mollis sagittis.

Quisque ultrices condimentum turpis quis dapibus. Aenean ligula mauris, scelerisque in nibh sed, porta rutrum diam. Vivamus at nibh odio. Duis vehicula purus vel sollicitudin iaculis. Sed vitae fermentum urna. Duis ac odio sem. Pellentesque scelerisque ipsum elit, ac euismod nisi placerat ac. Curabitur quis nunc id magna hendrerit ultrices quis sed lorem. Suspendisse vestibulum, lacus eu laoreet imperdiet, tellus enim commodo tortor, sed bibendum felis lorem eget orci. Sed fermentum est a nibh viverra condimentum. Donec accumsan consequat dolor vel venenatis. Sed nec sapien mollis, semper felis et, mattis nulla. Curabitur varius euismod bibendum. Cras lorem metus, posuere quis ultricies quis, faucibus eget tellus. Suspendisse venenatis, augue nec vehicula venenatis, massa ipsum accumsan orci, ac vulputate augue velit ut tortor. Proin at ullamcorper urna, non tincidunt ante.

Vivamus consectetur tempus mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum pharetra mattis. Aliquam erat volutpat. Curabitur volutpat bibendum erat, in euismod orci tristique quis. Aliquam orci risus, feugiat eget euismod non, sodales a nunc. Praesent iaculis ipsum a dui eleifend, ut consectetur massa porta. Donec finibus finibus enim, nec bibendum dolor vehicula vitae. Aliquam vitae ex faucibus, pellentesque tellus non, volutpat urna. Vestibulum non hendrerit mauris, eu pulvinar urna. Aenean vel sapien venenatis, vestibulum urna vel, ullamcorper velit. Ut in felis in nisl varius scelerisque quis ut enim. Integer efficitur, lectus id auctor interdum, nibh ex pellentesque ipsum, blandit blandit tortor arcu vitae eros. Donec non sodales ex, vitae facilisis turpis. Curabitur non lectus non sapien porttitor posuere et non nulla.
</textarea>
<div id="cpy"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>

	<script>

	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	ctx.fillStyle = "red";
	ctx.fillRect(10, 10, 50, 50);

	function copy() {
	var enc = new window.TextEncoder();
	var dec = new window.TextDecoder();
	var txt = document.getElementById('txt');
	var val = txt.value;
	var byt = enc.encode(val);
	var imgData = ctx.getImageData(10, 10, 50, 50);
	cpyArray2ImageData(imgData,byt);
	ctx.putImageData(imgData, 10, 70);
	var imgDataBack = ctx.getImageData(10, 70, 50, 50)
	var back = cpyImageData2Array(imgDataBack);
	var cpy = document.getElementById('cpy');
	cpy.innerText = dec.decode(new Uint8Array(back));
	}

	function cpyArray2ImageData(dst,src){
	var l = src.length;
	var i,j;

	for(i=0;i<3;i++){
	dst.data[i]=l%256;
	l = (l - l%256)/256;
	}
	dst.data[3]=255;
	j=0;
	for(i=0; i<src.length;i++){
	dst.data[j+4]=src[i];
	j++;
	if((j%4)==3){
	dst.data[j+5]=255;
	j++;
	}
	}
	}

	function cpyImageData2Array(src){
	var i;
	var l=0;

	dst=[];

	for(i=0;i<3;i++){
	l = src.data[2-i]+l*256;
	}
	var t = (l-(l%3))/3;
	l = l+t;

	for(i=0;i<l;i++){
	dst.push(src.data[i+4]);
	if((i%4)==2) i++;
	}

	return dst;
	}


	</script>
	<button onclick="copy()">Copy</button>
	<br>
	<textarea id="txt" cols="80">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt tincidunt lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel volutpat erat, ut congue arcu. Vestibulum turpis turpis, mattis nec neque id, elementum suscipit urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sed lectus eu lorem venenatis ullamcorper vel finibus nibh. Fusce suscipit, mi id elementum sagittis, erat felis viverra risus, vitae condimentum orci nulla sed sapien. Cras eget nunc purus.

	Aenean maximus nulla quis mauris pulvinar tristique. Morbi arcu lorem, dictum eget leo eget, sagittis viverra nisl. Sed non eleifend urna. Sed iaculis augue id semper luctus. Quisque dictum lobortis enim, non commodo metus tincidunt id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec pellentesque mi. Donec nisi sapien, mattis ut dolor sed, commodo interdum enim. Aliquam eu nibh lacus. Pellentesque quis justo sed risus ultrices eleifend at et odio. Ut sit amet urna nec sapien feugiat lobortis a nec quam. Aenean tincidunt volutpat diam, at malesuada mauris tincidunt sed. Praesent vestibulum congue metus sed posuere. Fusce nec massa a lorem rutrum feugiat id vel nunc. Suspendisse massa massa, mollis id fermentum eget, euismod at metus.

	Sed lectus felis, ultrices id volutpat eget, imperdiet a purus. Aenean elementum diam sem, a semper lorem congue at. Vivamus eleifend interdum tincidunt. Nullam consequat sed quam vitae commodo. Cras sollicitudin feugiat dui a scelerisque. Donec gravida libero justo, vel accumsan nibh suscipit nec. Suspendisse eget orci nec augue consectetur sagittis. Nam pulvinar sem sit amet arcu rutrum, in pellentesque diam accumsan. Maecenas pulvinar id mi vitae finibus. Vivamus malesuada mollis risus finibus egestas. Curabitur blandit quam in sem porttitor rutrum. Vestibulum pretium, nisi vitae aliquet ornare, augue felis viverra lectus, pulvinar tincidunt felis felis at eros. Suspendisse tempus metus vitae mollis sagittis.

	Quisque ultrices condimentum turpis quis dapibus. Aenean ligula mauris, scelerisque in nibh sed, porta rutrum diam. Vivamus at nibh odio. Duis vehicula purus vel sollicitudin iaculis. Sed vitae fermentum urna. Duis ac odio sem. Pellentesque scelerisque ipsum elit, ac euismod nisi placerat ac. Curabitur quis nunc id magna hendrerit ultrices quis sed lorem. Suspendisse vestibulum, lacus eu laoreet imperdiet, tellus enim commodo tortor, sed bibendum felis lorem eget orci. Sed fermentum est a nibh viverra condimentum. Donec accumsan consequat dolor vel venenatis. Sed nec sapien mollis, semper felis et, mattis nulla. Curabitur varius euismod bibendum. Cras lorem metus, posuere quis ultricies quis, faucibus eget tellus. Suspendisse venenatis, augue nec vehicula venenatis, massa ipsum accumsan orci, ac vulputate augue velit ut tortor. Proin at ullamcorper urna, non tincidunt ante.

	Vivamus consectetur tempus mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum pharetra mattis. Aliquam erat volutpat. Curabitur volutpat bibendum erat, in euismod orci tristique quis. Aliquam orci risus, feugiat eget euismod non, sodales a nunc. Praesent iaculis ipsum a dui eleifend, ut consectetur massa porta. Donec finibus finibus enim, nec bibendum dolor vehicula vitae. Aliquam vitae ex faucibus, pellentesque tellus non, volutpat urna. Vestibulum non hendrerit mauris, eu pulvinar urna. Aenean vel sapien venenatis, vestibulum urna vel, ullamcorper velit. Ut in felis in nisl varius scelerisque quis ut enim. Integer efficitur, lectus id auctor interdum, nibh ex pellentesque ipsum, blandit blandit tortor arcu vitae eros. Donec non sodales ex, vitae facilisis turpis. Curabitur non lectus non sapien porttitor posuere et non nulla.
	</textarea>
	<div id="cpy"></div>
	</body>
	</html>