javascript - 打印图像中的特定字段

Question

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

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

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

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

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

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

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

score 1 · Accepted Answer

将您的优惠券图像包装在 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获取元素内的鼠标位置

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

祝你好运

score 0 · Accepted Answer

我最终使用图像映射做到了：

协调“发送到打印按钮”并发送到接受参数的 javascript 'print()' 方法

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

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

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

然后打印出来。

2 回答 2