Image

Javascript Canvas Load Image with Cross Origin

Canvas Usage

html canvas 簡單來說就是個 image,只是它可以使用 Javascript 來 render 你所想要的樣子,所以能操作的東西十分的多,可以拿來做動畫或是遊戲等等的,有其他的套件輔助會比較方便。

1
2
3
4
5
6
7
8
9
10
11
12
// 建立 canvas
// context 暫時沒有用到
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// 設定 canvas 的大小,就像是一張圖片的大小是 800 x 400
canvas.width = 800;
canvas.height = 400;

// css 裡的 style,用來縮放,還有很多有的沒的......
canvas.style.width = '400px';
canvas.style.height = '300px';

Load Image From Url

用 Javascript Image 物件來建立圖片。

1
2
3
4
5
var img = new Image();
img.onload = function(){
// 完整載入圖片之後才會執行這一段
};
img.src = 'http://i.imgur.com/ImageHere';

閱讀全文