1. 一阔营销首页
  2. 网站建设

css怎么把file标签搞得透明，如何使用CSS让File标签透明

虎爸 • • 网站建设

Javascript奇淫技巧：密码保护的私密图片

JavaScript奇淫技巧：图片压缩、图片加密

本文将用JavaScript实现两个颇有技术含量的功能：图片压缩、图片加密。

最终效果：可实现将任意图片加密、压缩，并保存到一个独立的html页面中，输入正确的密码，才能看到原图。

效果演示：

第一步、压缩图片

技术原理

将图片读入canvas，并使用canvas的toDataURL方法将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。

完整代码

保存为html文件即可运行。

? ? ? ? ? ? ? ? ? ? ? ? 压缩后的图片：? ? ? ? ? ? ? ? ? ?

运行效果

css怎么把file标签搞得透明，如何使用CSS让File标签透明

测试一下，这段动过手脚的base64编码以图片方式加载，看是否能显示图片。

效果如下，图片无法正常显示。

css怎么把file标签搞得透明，如何使用CSS让File标签透明

密码正确，解密并显示图片：

css怎么把file标签搞得透明，如何使用CSS让File标签透明

并在JShaman的配置中勾选择“字符串加密”：

css怎么把file标签搞得透明，如何使用CSS让File标签透明

加密后的代码将完全找不到之前的口令字符：

css怎么把file标签搞得透明，如何使用CSS让File标签透明

在网页中查看，加密的JS代码，其中搜索不到口令“123”：

css怎么把file标签搞得透明，如何使用CSS让File标签透明

这样就实现了完整的图片加密：将图片加密存放到了单独的html中，可以方便的携带、存储、传递。

而内容是加密的、口令也是加密的。只有知道口令的人，才能看到图片，安全又私密。

本文来自虎爸投稿，不代表一阔营销立场，如若转载，请注明出处：https://www.1kuo.com/508672.html

赞 (0)
虎爸虎爸
0
上一篇 2023-05-24 17:42:39
下一篇 2023-05-24 17:45:25

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。