js实现打印图片
使用window.print()方法打印图片
在JavaScript中，可以通过window.print()方法触发浏览器的打印功能。要打印图片，可以将图片放入一个专门用于打印的容器中。
<img id="printImage" src="your-image.jpg" style="display:none;">
<button onclick="printImage()">打印图片</button>
<script>
function printImage() {
const img = document.getElementById('printImage');
img.style.display = 'block';
window.print();
img.style.display = 'none';
}
</script>使用CSS控制打印样式
通过CSS的@media print规则可以专门为打印设置样式，确保图片在打印时正确显示。
@media print {
body * {
visibility: hidden;
}
#printImage, #printImage * {
visibility: visible;
}
#printImage {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}创建打印专用iframe
更可靠的方法是在内存中创建一个iframe，将图片放入其中后打印，避免影响主页面。
function printImage(url) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.onload = function() {
const doc = iframe.contentWindow.document;
doc.open();
doc.write('<html><body><img src="' + url + '" style="width:100%;"></body></html>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
setTimeout(() => {
document.body.removeChild(iframe);
}, 1000);
};
iframe.src = 'about:blank';
}处理多图片打印
要打印多张图片，可以将它们放入一个容器中统一处理。
function printImages(imageUrls) {
const printWindow = window.open('', '_blank');
printWindow.document.open();
let html = '<html><body>';
imageUrls.forEach(url => {
html += `<img src="${url}" style="display:block; width:100%; margin-bottom:20px;">`;
});
html += '</body></html>';
printWindow.document.write(html);
printWindow.document.close();
printWindow.onload = function() {
printWindow.print();
printWindow.close();
};
}使用canvas打印动态内容
对于需要从canvas导出的图片，可以先将其转换为数据URL再打印。
function printCanvas(canvas) {
const dataUrl = canvas.toDataURL('image/png');
const printWindow = window.open('', '_blank');
printWindow.document.write(`
<html>
<body>
<img src="${dataUrl}" style="width:100%;">
</body>
</html>
`);
printWindow.document.close();
printWindow.print();
printWindow.close();
}注意事项
打印功能依赖于浏览器实现，不同浏览器可能有不同行为。某些浏览器可能会阻止弹出窗口，需要用户允许。
对于跨域图片，可能会遇到安全限制。确保图片与页面同源或服务器已配置CORS允许访问。
考虑添加打印按钮的状态管理，防止用户在打印过程中重复点击。
