HTML5觸屏手機(jī)截屏源代碼
HTML5技術(shù)是現(xiàn)代互聯(lián)網(wǎng)發(fā)展中必不可少的一部分，尤其在移動設(shè)備的應(yīng)用中更加廣泛的使用。隨著智能手機(jī)的不斷普及，手機(jī)截屏的需求也日益增加，下面介紹一份HTML5觸屏手機(jī)截屏的源代碼。
代碼如下：
// 獲取畫布對象
const canvas = document.createElement('canvas');// 獲取網(wǎng)頁寬高
const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;
// 設(shè)置畫布寬高
canvas.width = pageWidth;
canvas.height = pageHeight;
// 獲取畫布繪圖環(huán)境
const ctx = canvas.getContext('2d');// 繪制背景顏色
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 將頁面繪制在畫布上
const img = new Image();
img.src = 'data:image/svg+xml,' + encodeURIComponent(`
${document.documentElement.innerHTML}
`);
// 繪制圖片
img.onload = function() {ctx.drawImage(img, 0, 0);
// 使用圖片進(jìn)行截屏
const a = document.createElement('a');a.href = canvas.toDataURL('image/png');a.download = 'screenshot.png';
a.click();
}上述代碼首先創(chuàng)建一個畫布對象，然后獲取整個網(wǎng)頁的寬度和高度，將其設(shè)置為畫布的寬度和高度。接著設(shè)置畫布的背景顏色，然后將整個頁面繪制在畫布上。繪制完成后，使用 toDataURL() 方法將畫布轉(zhuǎn)化為圖片，并保存為PNG格式，用于進(jìn)行截屏操作。 以上就是HTML5觸屏手機(jī)截屏的源代碼，它是一份十分基礎(chǔ)的代碼，可以根據(jù)實(shí)際需求進(jìn)行相應(yīng)的修改和優(yōu)化。
上一篇html5讓代碼折疊
下一篇js和css有什么用途