js实现打印图片
使用window.print()方法打印图片
将图片放入一个可打印的容器中，通过CSS控制打印样式。示例代码如下：
function printImage(imageUrl) {
const printWindow = window.open('', '_blank');
printWindow.document.write(`
<html>
<head>
<title>Print Image</title>
<style>
@media print {
body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
}
</style>
</head>
<body>
<img src="${imageUrl}" />
</body>
</html>
`);
printWindow.document.close();
printWindow.onload = function() {
printWindow.print();
};
}使用Canvas转换后打印
对于需要调整图片尺寸或格式的情况，可以使用Canvas处理：
function printCanvasImage(url) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const dataUrl = canvas.toDataURL('image/png');
const printWin = window.open('');
printWin.document.write(`<img src="${dataUrl}" />`);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
};
img.src = url;
}使用CSS控制打印布局
通过创建专门的打印样式表确保图片正确输出：
<style id="printStyle">
@media print {
@page {
size: auto;
margin: 0mm;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.no-print {
display: none;
}
}
</style>
<script>
function preparePrint(imageElement) {
const clone = imageElement.cloneNode(true);
document.body.innerHTML = '';
document.body.appendChild(clone);
window.print();
location.reload();
}
</script>处理跨域图片打印
当遇到跨域图片时，需要先通过服务器代理或CORS解决资源访问问题：
function printCrossOriginImage(url) {
fetch(url, { mode: 'cors' })
.then(response => response.blob())
.then(blob => {
const objectUrl = URL.createObjectURL(blob);
const printWindow = window.open('', '_blank');
printWindow.document.write(`<img src="${objectUrl}" />`);
printWindow.document.close();
printWindow.print();
URL.revokeObjectURL(objectUrl);
});
}注意事项
- 打印对话框的触发需要用户交互事件（如点击）
- 移动端可能需要特殊处理打印样式
- 某些浏览器会阻止弹出窗口，需要提前获得用户许可
- 高质量打印建议使用原始分辨率图片
- 考虑添加打印取消后的回调处理
以上方法可根据具体需求组合使用，实现不同场景下的图片打印功能。
