將canvas的結果輸出到image
前言
最近要做將canvas變成webgl的texture，需要將canvas的結果輸出到image，後來想想，以前做過將canvas的畫面照下來的功能，但是忘記怎麼做的，所以我又重新學了一次並把它紀錄下來。
內容
範例程式碼如下html 的部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>canvas to image</title> </head> <body> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <div id="subImage"> </div> </body> </html>
javascript的部分
var newCanvas = document.createElement("canvas");
newCanvas.width = 256;
newCanvas.height= 256;
//
var canvasEle = newCanvas;
var ctx = canvasEle.getContext("2d");
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect (0, 0, 256, 256);
var urlData = canvasEle.toDataURL();
var newImage = new Image();
newImage.onload = function(){
$("#subImage").get(0).appendChild(newImage);
}
newImage.src = urlData;
值得注意的是範例的canvas並不需要加入DOM裡面就可以做繪製的動作，再來是canvasEle.toDataURL()，這個method會將目前canvas的結果編成"圖片資料"，然後過程和一般的URL圖片一樣需要設置onload，雖然不需要網路連線，但還是需要onload，這點一定要注意。
沒有留言:
張貼留言