1. Jenis media Blob mestilah "image/svg+xml"
2 elemen svg diperlukan
3 Sisipkan elemen foreignObject 4. Letakkan HTML
yang mematuhi spesifikasi ke dalam elemen foreignObject Menukar dom kepada kanvas adalah semudah langkah di atas. Berikut ialah tunjuk cara mudah yang diberikan dalam dokumen:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" >' +
'<em>I</em> like ' +
'<span >' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
</script>
</body>
</html>Salin selepas log masuk
Salin kod dan jalankannya Wah, hebat sekali dua baris seni kata yang menarik.
Nah, ternyata menukar dom kepada kanvas adalah sangat mudah? Kemudian saya menggunakan
untuk mengeluarkan semua DOM dalam badan dan meletakkannya dalam elemen foreignObject Bukankah ia OK dan keseluruhan halaman ditangkap?
document.body.innerHTML
Demo hanyalah Hello World, tetapi struktur Dom dalam projek sebenar jauh lebih rumit daripada ini, contohnya, helaian gaya luaran, gambar dan beberapa teg mungkin tidak mematuhi xml spesifikasi (seperti Teg penutup tiada, dsb.). Berikut ialah contoh mudah .container tidak menggunakan gaya sebaris, tetapi ditakrifkan dalam teg gaya Fon berwarna merah Selepas ia ditukar kepada imej, gaya tidak akan berkuat kuasa.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
color: red;
}
</style>
</head>
<body>
<div class="container" >
Hello World!
</div>
<canvas id="canvas" width=200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" >' +
document.querySelector('.container').innerHTML +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
</script>
</body>
</html>Salin selepas log masuk
Memandangkan gaya luaran tidak berkuat kuasa, kami boleh merentasi semua elemen DOM melalui JS dan menambah semua gaya pada gaya sebaris melalui objek elemen.style. Idea ini kedengaran bagus, tetapi saya benar-benar tidak boleh menulis fungsi yang menukar gaya luaran kepada gaya sebaris. Permintaan adalah ketat, dan saya tidak mempunyai banyak masa untuk mengacau, jadi saya ingin mencari mana-mana perpustakaan yang sudah siap. Jadi saya pergi ke Google sekali lagi. Nasib baik, saya menjumpai perpustakaan yang dipanggil html2canvas sekaligus. Ia adalah perpustakaan yang hebat, sangat berkuasa, tetapi sangat mudah untuk digunakan Dengan kaedah yang begitu mudah, saya boleh mengambil tangkapan skrin seluruh halaman saya:
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
document.body.appendChild(canvas);
}).catch(function(e) {
console.error('error', e);
});
}Salin selepas log masuk
Di sana. adalah satu lagi masalah pada masa ini, iaitu, kaedah ini memintas keseluruhan halaman secara lalai (iaitu, ia akan menggunakan innerHeight dan innerWidth anda sebagai sempadan, dan akan terdapat banyak ruang putih, bagaimanapun, dek saya hanya menduduki A). bahagian kecil halaman, saya hanya mahu bahagian dek. Malah, ia lebih mudah untuk dikendalikan jika kita sudah mempunyai kanvas, kita boleh memprosesnya. Idea umum ialah: 1. Tukarkan objek kanvas yang diperolehi di atas kepada Blob dan masukkan ke dalam elemen img. Kemudian lukis img.src ke dalam kanvas. Pada masa ini, memanggil kaedah
boleh memintas kandungan yang kita inginkan. Dua fungsi berikut menukar kanvas kepada imej dan sebaliknya.
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png", 0.1);
return image;
}
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image, startX, startY, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);
return canvas;
}Salin selepas log masuk
canvas.drawImageKemudian, tukar convertHtml2Canvas yang kami tulis di atas kepada yang berikut:
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
var img = convertCanvasToImage(canvas);
document.body.appendChild(img);
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 0, 0, 384, 696);
img.src = convertCanvasToImage(canvas).src;
$(img).css({
display: 'block',
position: 'absolute',
top: 0,
left: 400 + 'px'
});
}
}).catch(function(e) {
console.error('error', e);
});
}Salin selepas log masuk
Pada masa ini, anda boleh memintas sebahagian daripada kandungan halamannya. Kesannya seperti halaman ujian perkongsian dek. Bahagian kiri halaman ialah struktur DOM, dan bahagian kanan ialah imej yang ditukar menggunakan html2canvas.
Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk melaksanakan fungsi tangkapan skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
