精易论坛

标题: 图片转box-shadow，保护图片不被下载 [优化] [打印本页]

作者: 观音 时间: 2024-8-16 18:31
标题: 图片转box-shadow，保护图片不被下载 [优化]
本帖最后由观音于 2024-8-16 21:27 编辑

昨天刷到一个html的视频，说到可以将图片转成 box-shadow 也就是阴影新增一个 1px*1px 的div，设置盒子阴影偏移，就可以实现一个像素一个颜色值，众所周知，图片就是由一个个颜色组成的
这样可以防止图片被别人直接保存，当然也就是图一乐，没啥实际意义，而且这样会导致文件很大，600kb的图片转换成了惊人的22MB

通过缩小数据,用js修改boxshadow,600kb的照片可以压缩到5.87MB，但是数据太大会修改失败，只能修改小尺寸图片已经优化好了，600kb的照片现在只有6MB

直接看效果图

源码截图

图片转box-shadow.e (961.98 KB, 下载次数: 23)

RuGuo_2024-08-16_18-29-03.png (143.99 KB, 下载次数: 42)

作者: 勉勉 时间: 2024-8-16 19:09
开源精神必须支持~

作者: 笨来无一悟 时间: 2024-8-16 19:14

作者: 亿意亦易 时间: 2024-8-16 19:21
支持大佬

作者: 空竹 时间: 2024-8-16 19:36
很久之前利用这个做过文本生成的，你这个更nb，

作者: 艾玛克138 时间: 2024-8-16 21:16
谢了，很实用，就喜欢这样的资料

作者: pipicool 时间: 2024-8-16 21:35
学习一下

作者: ttggnn 时间: 2024-8-16 21:42
支持开源~！感谢分享

作者: 784326742 时间: 2024-8-16 22:35
其实没啥用，还是感谢分享

作者: ZHuanR 时间: 2024-8-16 23:03
新技能已get√

作者: hxq7311 时间: 2024-8-17 01:21

开源精神必须支持

作者: renhe2018 时间: 2024-8-17 05:55
哈哈，挺有心机啊。能截图不保存不?

作者: 查过 时间: 2024-8-17 07:18
感谢您对论坛的支持！

作者: 豆豆灰常开心 时间: 2024-8-17 07:23
感谢发布原创作品，精易因你更精彩！6666666666666

作者: wuqingg 时间: 2024-8-17 08:48
支持开源，感谢分享

作者: year1970 时间: 2024-8-17 08:59
感谢分享

作者: 我們還太嫩 时间: 2024-8-17 10:21
求个楼主的配色分享

作者: kyo9766 时间: 2024-8-17 11:24
就喜欢这些好玩的东西，感谢分享

作者: 396384183 时间: 2024-8-19 09:43
感谢大神分享~！

作者: 胖子葛格 时间: 2024-8-19 10:10
感谢大神分享~！

作者: ctry78985 时间: 2024-8-19 11:52
感谢分享

作者: 光影魔术 时间: 2024-8-19 21:26
感谢分享源码

作者: 小虎来了 时间: 2024-8-21 10:02
支持开源~！感谢分享

作者: 熊不熊 时间: 2024-12-4 17:26
感谢分享，很给力！~

欢迎光临精易论坛 (https://125.confly.eu.org/)

Powered by Discuz! X3.4