image glitch experiment

JPG 编码的故障图像。(glitch images with jpg encoding)

Github stars Tracking Chart

JPG 编码的故障图像

这是一个针对网页浏览器的实验,它可以破坏 JPG 图像,使其出现 "glitched"。

glitch experiment screen shot

在线演示

这个实验是基于 smack my glitch up js 脚本。

jpg-glitcher 的桌面应用程序也可以使用,你可以在这里下载。

眩晕效果代码

如果你是开发者,只是对 glitch 效果的代码感兴趣,有一个单独的资源库:glitch-canvas

本实验中使用的第三方代码

许可证

MIT License

开发

如果你有兴趣添加功能,修复代码的错误,或者在你自己的服务器上运行这个工具,这里有一些提示可以帮助你熟悉代码库。

如果你有关于代码的问题,不要犹豫,打开一个问题或给我发邮件。

  • config.js:所有的默认值和设置都在这里。
  • glitcher.js 是应用程序的主要起点。所有的事件都在这里被连接。
  • 该应用没有使用任何大型的dom库或应用框架(如jquery,angular或react)。
  • 在可能的情况下,该应用程序使用webworkers来完成复杂的任务。
  • 所有显示给用户的字符串都位于 lang/文件夹中。每一种语言都会创建一个不同的文件。
  • 该应用程序使用一个serviceworker来使它在支持它的浏览器中离线可用。
  • 使用构建脚本完全是可选的,而且不是让应用程序工作的必要条件。

构建脚本

构建脚本负责连接和最小化所有的脚本和样式,它使用 gruntjs。

请确保你的机器上的 nodejs 和 npm 都已正确设置]。

运行 npm install 来安装构建脚本的依赖关系。

构建时,运行 npm run build,优化后的文件会被复制到 production/ 文件夹中。

缺少了什么?

发现了一个 bug? 缺少了一个功能? 说明不清楚? 你是否在一个有趣的项目中使用了这个工具? 也许可以看看这些问题,开一个 pull 请求,然后告诉我,谢谢!

最重要的是

谢谢你看了这个回帖,祝你有美好的一天:)


Main metrics

Overview
Name With Ownersnorpey/jpg-glitch
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 3)
PlatformLinux, Mac, Online, Windows, Web browsers
License:MIT License
所有者活动
Created At2013-06-27 17:47:26
Pushed At2018-02-28 17:39:56
Last Commit At2018-02-28 18:35:06
Release Count1
Last Release Namev1.0 (Posted on 2015-12-23 23:28:59)
First Release Namev1.0 (Posted on 2015-12-23 23:28:59)
用户参与
Stargazers Count1.2k
Watchers Count42
Fork Count95
Commits Count173
Has Issues Enabled
Issues Count17
Issue Open Count6
Pull Requests Count4
Pull Requests Open Count0
Pull Requests Close Count0
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

image glitch experiment

this is an experiment for the web browser. it corrupts jpg images so that they appear "glitched".

glitch experiment screen shot

online demo

this experiment is very much based on the smack my glitch up js script.

a desktop app of the jpg-glitcher is also available. you can download it here.

glitch effect code

if you're a developer and just interested in the code for the glitch effect, there's a separate repository for that: glitch-canvas.

third party code used in this experiment

license

MIT License

development

if you're interested in adding features, fixing bugs the code, or running the tool on your own server, here are some pointers to help you get familar with the code base.

if you have questions about the code, don't hesitate to open an issue or send me an email.

  • config.js: all defaults and settings are in here
  • glitcher.js the main app starting point. all events are hooked up in here.
  • the app does not use any big dom libraries or app frameworks (like jquery, angular or react)
  • where possible, the app uses webworkers for complex tasks
  • all strings that are displayed to the user are located in the lang/ folder. for each language, a different file is created.
  • the app uses a serviceworker to make it available offline in browsers that support it
  • the app was built without any preprocessors in mind. using the build script is entirely optional and not required to get the app to work.

build script

the build script takes care of concatenating and minifying all scripts and styles. it uses gruntjs.

please make sure that both nodejs and npm are set up properly] on your machine.

run npm install to install the dependencies of the build script.

to build, run npm run build the optimized files will get copied to the production/ folder.

missing something?

found a bug? missing a feature? instructions unclear? are you using this tool in an interesting project? maybe have a look at the issues, open a pull request and let me know. thanks!

most importantly

thank you for taking a look at this repo. have a great day :)