打印图像中的特定字段

Question

我想做的很简单，很乐意看到/听到，例子/想法 对于正确的方法：

假设我有一个jpg图像：宽度为780像素，高度为2546像素 包含优惠券。

我的目标是点击优惠券并打印出来......

我的问题是实施它的最佳方式是什么

我想到了图像地图，当点击特定的“优惠券”时会触发一个java脚本调用，并且通过图像地图规范，它会加载一张（特定的）优惠券图像进行打印。

我认为可能有更好的解决方案..

请记住，我唯一的选择是一张包含打印优惠券的大图片。

Answer 1

将优惠券图片包裹在div中

<div id="coupon_viewer" onClick="this.style.display='none'">
  <img src="coupon.jpg">
</div>

使用此CSS

div#coupon_viewer { z-index:100; width:200px; height:300px; overflow:hidden; }
div#coupon_viewer>img { position:relative; left:0px; top:0px; }

当您点击主优惠券时，只需显示查看器div并将左侧和顶部属性设置为该优惠券的相应坐标。您还可以根据需要设置div宽度和高度。然后是window.print（）。

如果您的窗口在渲染coupon_viewer图层之前启动了打印对话框，那么您可以延迟打印命令，足以让任何慢浏览器渲染优惠券层。

setTimeout(function () { window.print(); }, 800);

快速搜索之后，我找到了一个关于如何在点击优惠券时拉出坐标的线程。然后，您可以将坐标乘以减小第一个图像大小的任何因子。 jQuery get mouse position within an element

以下是溢出属性规范隐藏的链接，这意味着当您使用left和top属性在其中移动图像时，div将充当视口： http://www.w3schools.com/cssref/pr_pos_overflow.asp

祝你好运

Answer 2

我最终使用图像地图做到了：

协调'发送到打印按钮'并发送到接受参数

的javascript'print（）'方法

参数是图片的数量（优惠券）

我有一个包含所有优惠券图片的文件夹： 1.jpg，2.jpg .....等'

print方法检索字符串（1.jpg）

然后打印出来。