加载完成后剪切图像

时间:2013-02-13 15:34:23

标签: php javascript ajax image css3

我谷歌搜索了很多但没有找到足够的答案。

我需要在我的一个页面中放置一个图像(900 X 5200 px)。由于图像是敏感的,我需要阻止用户复制图像。我有一个想法可以做到这一点:

我将图像分成几部分。然后图像网格将加载到一些div中。因此用户将无法保存图像。或者他/她只能保存整个图像的1平方厘米部分。

但如果网格的某些小部分无法加载,则此计划将无效。所以,我想做另一件事。我想加载完整的图像然后将图像切割成部分。然后在div中完全显示部分。

这需要javascript。但我很困惑如何开始并需要你的帮助。

现在你知道了这件事,如果你有更好的想法请分享。

提前致谢。

3 个答案:

答案 0 :(得分:3)

诀窍很简单。创建一个div,背景为要显示的图像。在其上层叠带有透明图像的div。当用户去保存图像时,它们会变成空白。对服务器进行编程,使其不返回对图像的“直接”请求(因此,一些聪明的小伙子不能只查看css并检索图像的URL)。

当然,图像仍会在其缓存中,但切片图像也是如此,因此不会使确定的人更难以检索图片。

答案 1 :(得分:1)

TL; DR 不要过度设计解决方案,打印屏幕可以解决任何问题。

您无法阻止人们复制此图像。干净利落。无论你做了多少努力,简单的PRT SCRN并粘贴到Paint中就足够了。

您最好的选择是不要过度设计,只需在页面上添加水印和版权声明即可。其他选项可能包括在图像顶部放置透明<div>,以便无法右键单击并保存,但仍不会阻止图像存储在用户的缓存中。或者阻止他们使用开发人员工具或Firebug来查找源图像。

答案 2 :(得分:0)

你可以这样做: http://www.pixastic.com/lib/docs/actions/crop/

然而,您需要围绕该库开发逻辑。

我已经举了示例,你可以在这个链接上看到它: http://simplestudio.rs/yard/crop_img/

基本上你可以通过php获取你的图像的URL,并使用我的代码或类似的代码将你的图像裁剪成碎片并在画布上显示。

这样,图像无法通过浏览器或检查元素访问,或者无法访问。用户可以单独保存这些部分,但您可以将我的代码配置为5px,我将其设置为20x20px。

*通过右键单击图像上的任意位置来测试保存图像片段并执行“将图像另存为...”选项。

另外你需要考虑如何隐藏src到php提供的图像,如果你需要帮助我可以帮助你。