JQuery canvas生成圖片是一種非常方便的技術(shù),可以讓我們?cè)诰W(wǎng)頁(yè)中動(dòng)態(tài)地生成圖片,非常實(shí)用。下面我們來(lái)看一下如何使用JQuery canvas生成圖片的方法。
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 200, 200);
};
img.src = 'example.jpg';
以上代碼使用了canvas標(biāo)簽,通過JQuery的API來(lái)生成一個(gè)圖片的畫布,接著在畫布上加載指定的圖片,并通過drawImage方法來(lái)將圖片放到畫布上。其中,onload方法確保圖片加載后再執(zhí)行畫布的繪制操作。
var dataURL = canvas.toDataURL();
$('body').append('<img src="'+dataURL+'">');
最后,我們可以通過canvas的toDataURL方法來(lái)將畫布保存為base64編碼格式的圖片文件。將這個(gè)編碼后的數(shù)據(jù)重定向到一張圖片上,就可以實(shí)現(xiàn)在網(wǎng)頁(yè)上動(dòng)態(tài)生成圖片的功能了。