Canvas的全螢幕，儲存，上傳

今天要來整理canvas的呈現方式，儲存，上傳，字串化格式的操作

p5.js 的DOM的selectors操作

select('canvas'); //-- element tag
select('#can1'); //-- element id
select('.c1'); //-- element class

let can;
function setup() {
	can = createCanvas(400, 500);
	can.id("can1");
	can.class("c1");
	can.position(100, 100);
	background(255, 255, 0);
	console.log(can.elt);


	//-- p5.js 的DOM的Selector操作
	select('canvas'); //-- element tag
	select('#can1');  //-- element id
	select('.c1');    //-- element class

    select('canvas').mouseClicked((e) => {
		console.log(e);
		save("a1.png");
		let data1 = can.elt.toDataURL("image/png");
		console.log(data1);    
	});
    
    //-- 利用 toDataURL 轉換成 超連結下載的功能
    let can_src = can.elt.toDataURL("image/png").replace("image/png", "image/octet-stream");
	let a = createA(can_src, '下載圖片');
	a.attribute('download', 'a1.png');
    a.position(0, 0);
}

//-- 全螢幕顯示的操作指令
function keyPressed(e) {
	console.log(e); 
	if (e.key == 'z') { //-- 按下Z鍵切換成全螢幕顯示
		let fs = fullscreen();
		if (!fs) {
			fullscreen(!fs);
		}
	}
}

完整的canvas的屬性設定，id, class, style, position等等
以及事件設定，keyPressed, mouseClicked等等

<canvas id="can1" class="c1" width="400" height="500" style="width: 400px; height: 500px; position: absolute; left: 100px; top: 100px;"></canvas>

在全螢幕的功能部份，p5.js使用 fullscreen()指令
以上面的程式碼為例，
當按下Z鍵時，就會切換到全螢幕呈現模式。

//-- 在p5.js中，關於element的操作，可以參考p5.Element的說明
p5.Element 以及 DOM 的操作
https://p5js.org/reference/#/p5.Element

//-- 利用 toDataURL() 取的圖像的編碼資料，並以base64將資料字串化
can.elt.toDataURL("image/png");

以下為圖像的編碼資料，data:image/png 是圖檔的格式，base64 是資料字串化的格式，iVBORw ... Jggg== 是圖檔的資料字串

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAH0CAYAAAAT2nuAAAAAAXNSR0IArs4c6QAAEZdJREFUeF7t1bENACAMBLGw/9BBYgOuNjVprJfu7M6OR4AAAQIEPgWOgHyK+U6AAAECT0BADIEAAQIEkoCAJDZHBAgQICAgNkCAAAECSUBAEpsjAgQIEBAQGyBAgACBJCAgic0RAQIECAiIDRAgQIBAEhCQxOaIAAECBATEBggQIEAgCQhIYnNEgAABAgJiAwQIECCQBAQksTkiQIAAAQGxAQIECBBIAgKS2BwRIECAgIDYAAECBAgkAQFJbI4IECBAQEBsgAABAgSSgIAkNkcECBAgICA2QIAAAQJJQEASmyMCBAgQEBAbIECAAIEkICCJzREBAgQICIgNECBAgEASEJDE5ogAAQ...
QhIYnNEgAABAgJiAwQIECCQBAQksTkiQIAAAQGxAQIECBBIAgKS2BwRIECAgIDYAAECBAgkAQFJbI4IECBAQEBsgAABAgSSgIAkNkcECBAgcAHlnNhk1ndAuwAAAABJRU5ErkJggg==

//-- 利用 toDataURL 轉換成 超連結下載的功能

let can_src = can.elt.toDataURL("image/png").replace("image/png", "image/octet-stream");
let a = createA(can_src, '下載圖片');
a.attribute('download', 'a1.png');

//-- 另外是利用將圖像的 編碼資料字串 上傳到網站儲存到網站的方式
使用jQuery的方法
在index.html中，加入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

在 mySketch.js 中

function mousePressed() {
    let imgurl = can.elt.toDataURL("image/png");
    $.post("upload.php", { img: imgurl }, (data, status) => {
        alert("Data: " + data + "\nStatus: " + status);
    });
}

在 upload.php 中

<?php
    $img = $_POST["img"];
    $img = substr(explode(";",$img)[1], 7);
    file_put_contents('img1.png', base64_decode($img));
    echo $img;
?>

//-- 利用chrome 的主控台的 元件螢幕快照功能下載canvas圖像
元件螢幕快照

參考資料
HTMLCanvasElement.toDataURL()
https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLCanvasElement/toDataURL
jQuery - AJAX get() and post() Methods
https://www.w3schools.com/jquery/jquery_ajax_get_post.asp