Jquery Maphilight 打印问题

Posted 2023-05-09

【中文标题】Jquery Maphilight 打印问题

【英文标题】：Jquery Maphilight Print Issue

【发布时间】：2012-01-26 03:36:04

【问题描述】：

我只是在打印一切正常时遇到 jquery maphilight 问题，实际上它是一个很棒的插件，但是当我去尝试打印时，图像不会出现在该区域中，只是突出显示的部分。知道是否有人面临这个问题并解决了这个问题。

谢谢。

【参考方案1】：

Maphilight 将图像的不透明度更改为 0 并将其设置为背景图像。浏览器将其排除在打印之外是正常行为。如果客户端将其浏览器设置为，则可以打印背景图像，但不能强制。

可能有更好的方法来解决这个问题..但这就是我所做的。编辑 maphilight js 文件以包含图像，以便无需打印背景图像即可打印。

之前：

$('<div></div>').css(display:'block',
                            background:'url("'+this.src+'")',
                            position:'relative',
                            padding:0,
                            width:this.width,
                            height:this.height
                            );

之后：

$('<div><img src="' +  img.attr('src') + '"></div>').css(display:'block',
                            background:'url("'+this.src+'")',
                            position:'relative',
                            padding:0,
                            width:this.width,
                            height:this.height
                            );

【讨论】：

使用此方法会导致所选区域与点击的地图区域相距 10-15px。

【参考方案2】：

因为 maphilight 将图像不透明度设置为 0，所以当您打印图像时不会显示（但高光会显示）。 解决方法： 制作一个粗而深的笔触宽度并添加以下样式：

<style>
    @media print 
        .map 
        opacity: 0.7 !important;
    

</style>