画布,禁用图像下载 [英] Canvas, disable image download
本文介绍了画布,禁用图像下载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在用 html5/js 制作游戏,地图上有战争迷雾.当您右键单击画布时,您可以将画布另存为图像,因此,您可以将整个地图保存为 jpg,但需要隐藏该地图.
有什么技巧可以禁用此功能吗?
我尝试在与地图相同的画布中创建我的战争迷雾,它可以工作,但移动迷雾更难,因为我需要为整个地图的每次移动创建.
谢谢.
解决方案
以下是适度模糊图像的方法:
它的工作原理是打乱您的地图,使临时用户无法轻松查看.
- 将您的图像垂直和水平切成许多部分.
- 将所有这些碎片打乱,然后根据它们创建一个新的打乱图像.
- 将该加扰图像提供给网页(用户无法识别该加扰图像).
- 将加扰顺序保存在 JSON 数组中,以便您以后可以对图像进行解扰.
混淆演示:>
混淆代码
<头><link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/><!-- 重置 css --><script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><风格>身体{背景颜色:象牙色;填充:20px;}#obfuscated{border:1px 纯蓝色;}#canvas{border:1px 纯红色;}</风格><脚本>$(函数(){var img=new Image();img.onload=开始;img.crossOrigin="匿名";img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/obfuscated.png";var verticalSlices=60;var水平切片=60;var sliceCount=verticalSlices*horizontalSlices;var sliceWidth,sliceHeight;var slices=[];var json;函数开始(){//切片大小的变量sliceWidth=img.width/verticalSlices;sliceHeight=img.height/horizontalSlices;//创建一个切片数组用于打乱我们的图像for(var i=0;i头部><身体><p>加扰前</p><img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/koolaidman.png"><br><p>加扰后</p><img id="混淆" 宽度=300 高度=300>