打印图像中的特定字段答案

【问题标题】：print a specific field in an image打印图像中的特定字段
【发布时间】：2012-10-07 22:44:20
【问题描述】：

我试图做的很简单，很高兴看到/听到，例子/想法对于正确的方法：

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

我的目标是点击一张优惠券并打印出来……

我的问题是实现它的最佳方法是什么

我认为图像映射会在单击特定“优惠券”时触发 java 脚本调用，并通过图像映射规范加载（特定的）优惠券图像以进行打印。

我认为也许有更好的解决方案..

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

【问题讨论】：

【解决方案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 并将 left 和 top 属性设置为该优惠券的适当坐标。您还可以根据需要设置 div 的宽度和高度。然后是 window.print()。

如果您的窗口在渲染coupon_viewer 层之前启动打印对话框，这里是您可以延迟打印命令的方法，该时间足以让任何慢速浏览器渲染coupon 层。

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

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

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

祝你好运

【讨论】：

在您通过 javascript 应用尺寸调整之前，打印命令不会产生页面结果吗？
我遇到过这种情况。有些浏览器的渲染速度很慢，以至于在页面准备好之前就出现了打印对话框。 Safari因此而臭名昭著。我只是在打印命令中添加了 500ms-800ms 的时间延迟。工作正常。
我不明白这个解决方案你能解释一下吗？当我单击“大”图像时，如何设置适当的坐标，然后将这些坐标发送到打印？ hidden 属性和 div#coupon_viewer>img 的目的是什么？
更新了我上面的答案。希望有帮助。

【解决方案2】：

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

协调'发送到打印按钮'并发送到接受参数的javascript'print（）'方法

参数是一张图片的编号（优惠券）

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

print 方法检索字符串 (1.jpg)

然后打印出来。

【讨论】：