Compare commits

..

No commits in common. "master" and "feature/gcc_support" have entirely different histories.

182 changed files with 2126 additions and 15906 deletions

5
.gitignore vendored
View File

@ -20,6 +20,5 @@ Python/build/
*.o
*.pyc
# Website
Website/node_modules/
Website/dist/
# Typescript
typescript/node_modules/

3
.gitmodules vendored
View File

@ -1,3 +0,0 @@
[submodule "Python"]
path = Python
url = https://github.com/creditornot/blurhash-python.git

View File

@ -2,22 +2,22 @@
## Summary
BlurHash applies a simple [DCT transform](https://en.wikipedia.org/wiki/Discrete_cosine_transform) to the image data,
keeping only the first few components, and then encodes these components using a base 83 encoding, with a JSON,
HTML and shell-safe character set. The DC component, which represents the average colour of the image, is stored exactly
as an sRGB value, for easy use without impleneting the full algorithm. The AC components are encoded lossily.
BlurHash applies a simple [DCT transform](https://en.wikipedia.org/wiki/Discrete_cosine_transform) to the image data, keeping only the first few components, and then encodes
these components using a base 83 encoding, with a JSON, HTML and shell-safe character set. The DC component,
which represents the average colour of the image, is stored exactly as an sRGB value, for easy use without impleneting
the full algorithm. The AC components are encoded lossily.
## Reference implementation
[Simplified Swift decoder implemenation.](Swift/BlurHashDecode.swift)
[Simplified Swift decoder implemenation.](../Swift/BlurHashDecode.swift)
[Simplified Swift encoder implemenation.](Swift/BlurHashEncode.swift)
[Simplified Swift encoder implemenation.](../Swift/BlurHashEncode.swift)
## Structure
Here follows an example of a BlurHash string, with the different parts labelled:
Example: LlMF%n00%#MwS|WCWEM{R*bbWBbH
Example: LNMF%n00%#MwS|WCWEM{R*bbWBbH
Legend: 12333344....................
1. **Number of components, 1 digit.**
@ -26,7 +26,7 @@ Here follows an example of a BlurHash string, with the different parts labelled:
2. **Maximum AC component value, 1 digit.**
All AC components are scaled by this value. It represents a floating-point value of `(max + 1) / 166`.
All AC components are scaled by this value. It represents a floating-point value of `(max + 1) / 83`.
3. **Average colour. 4 digits.**
@ -35,13 +35,8 @@ Here follows an example of a BlurHash string, with the different parts labelled:
4. **AC components, 2 digits each, `nx * ny - 1` components in total.**
The AC components of the DCT transform, ordred by increasing X first, then Y. They are encoded as three values for `R`, `G` and `B`,
each between 0 and 18. They are combined together as `R * 19^2 + G * 19 + B`, for a total range of 0 to 6859.
Each value represents a floating-point value between -1 and 1. 0-8 represent negative values, 9 represents zero, and 10-18
represent positive values. Positive values are encoded as `((X - 9) / 9) ^ 2`, while negative
values are encoded as `-((9 - X) / 9 ) ^ 2`. `^` represents exponentiation. This value is then multiplied by the maximum AC
component value, field 2 above.
The AC components of the DCT transform, ordred by increasing X first, then Y. These values range from 0 to 6859. See below for a
more detailed description.
## Base 83
@ -52,15 +47,6 @@ The character used set is `0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopq
## Discrete Cosine Transform
To decode a single pixel of output, you loop over the DCT components and calculate a weighted sum of cosine functions. In
pseudocode, for a normalised pixel position `x`, `y`, with each coordinate ranging from 0 to 1, and components `Cij` ,
you calculate the following for each of R, G and B:
To be written.
foreach j in 0 ... ny - 1
foreach i in 0 ... nx - 1
value = value + Cij * cos(x * i * pi) * cos(y * j * pi)
The `C00` component is the DC component, while the others are the AC components. The DC component must first be converted
from sRGB to linear RGB space. AC components are already linear.
Once the R, G and B values have been calculated, the must be converted from linear to your output colourspace, usually sRGB.
AC components are encoded as values between 0 and 18, and then combined together as `R * 19^2 + G * 19 + B`.

View File

@ -1,8 +1,3 @@
PROGRAM=blurhash
$(PROGRAM): blurhash_stb.c encode.c encode.h stb_image.h
blurhash: blurhash_stb.c encode.c encode.h stb_image.h
$(CC) -o $@ blurhash_stb.c encode.c -lm
.PHONY: clean
clean:
rm -f $(PROGRAM)

1
C/README.md Normal file
View File

@ -0,0 +1 @@

View File

@ -1,34 +0,0 @@
# BlurHash encoder in portable C
This code implements an encoder for the BlurHash algorithm in C. It can be used to integrate into other language
using an FFI interface. Currently the Python integration uses this code.
## Usage as a library
Include the `encode.c` and `encode.h` files in your project. They have no external dependencies.
A single file function is defined:
const char *blurHashForPixels(int xComponents, int yComponents, int width, int height, uint8_t *rgb, size_t bytesPerRow) {
This function returns a string containing the BlurHash. This memory is managed by the function, and you should not free it.
It will be overwritten on the next call into the function, so be careful!
* `xComponents` - The number of components in the X direction. Must be between 1 and 9. 3 to 5 is usually a good range for this.
* `yComponents` - The number of components in the Y direction. Must be between 1 and 9. 3 to 5 is usually a good range for this.
* `width` - The width in pixels of the supplied image.
* `height` - The height in pixels of the supplied image.
* `rgb` - A pointer to the pixel data. This is supplied in RGB order, with 3 bytes per pixels.
* `bytesPerRow` - The number of bytes per row of the RGB pixel data.
## Usage as a command-line tool
You can also build a command-line version to test the encoder. However, note that it uses `stb_image` to load images,
which is not really security-hardened, so it is **not** recommended to use this version in production on untrusted data!
Use one of the integrations instead, which use more robust image loading libraries.
Nevertheless, if you want to try it out quickly, simply run:
$ make
$ ./blurhash 4 3 ../Swift/BlurHashTest/pic1.png
LaJHjmVu8_~po#smR+a~xaoLWCRj

View File

@ -4,7 +4,7 @@
#include <math.h>
#ifndef M_PI
#define M_PI 3.14159265358979323846
# define M_PI 3.14159265358979323846
#endif
static float *multiplyBasisFunction(int xComponent, int yComponent, int width, int height, uint8_t *rgb, size_t bytesPerRow);
@ -49,8 +49,8 @@ const char *blurHashForPixels(int xComponents, int yComponents, int width, int h
actualMaximumValue = fmaxf(fabsf(ac[i]), actualMaximumValue);
}
int quantisedMaximumValue = fmaxf(0, fminf(82, floorf(actualMaximumValue * 166 - 0.5)));
maximumValue = ((float)quantisedMaximumValue + 1) / 166;
int quantisedMaximumValue = fmaxf(0, fminf(82, floorf(actualMaximumValue * 83 - 0.5)));
maximumValue = ((float)quantisedMaximumValue + 1) / 83;
ptr = encode_int(quantisedMaximumValue, 1, ptr);
} else {
maximumValue = 1;

40
Kotlin/.gitignore vendored
View File

@ -1,40 +0,0 @@
# Built application files
*.apk
*.ap_
# Files for the Dalvik VM
*.dex
# Java class files
*.class
# Generated files
bin/
gen/
# Gradle files
.gradle/
build/
# Local configuration file (sdk path, etc)
local.properties
# Proguard folder generated by Eclipse
proguard/
# Log Files
*.log
.idea/.workspace
# http://stackoverflow.com/questions/16736856/what-should-be-in-my-gitignore-for-an-android-studio-project
.gradle
/local.properties
/.idea/workspace.xml
/.idea/libraries
.DS_Store
/build
.idea
**/*.iml
*.hprof
**/*.project

126
Kotlin/BlurHashDecoder.kt Normal file
View File

@ -0,0 +1,126 @@
package com.wolt.android.presentation.ui.helpers
import android.graphics.Bitmap
import android.graphics.Color
import android.graphics.drawable.BitmapDrawable
import com.wolt.android.WoltApp
import java.lang.Math.*
/**
* Created by mike on 31/07/2017.
*/
object BlurHashDecoder {
private val digitCharacters = arrayOf(
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd',
'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
'y', 'z', '#', '$', '%', '*', '+', ',', '-', '.',
':', ';', '=', '?', '@', '[', ']', '^', '_', '{',
'|', '}', '~'
)
private val MAX_SIZE = 20
fun decode(blurHash: String?, width: Int, height: Int, punch: Float): Bitmap? {
if (blurHash == null || blurHash.length < 6) {
return null
}
val sizeFlag = blurHash[0].toString().decode83()
val numY = (sizeFlag / 9) + 1
val numX = (sizeFlag % 9) + 1
val quantisedMaximumValue = blurHash[1].toString().decode83()
val maximumValue = (quantisedMaximumValue + 1) / 83
if (blurHash.length != 4 + 2 * numX * numY) {
return null
}
val colors = (0..numX * numY - 1).map { i ->
if (i == 0) {
val value = blurHash.substring(2, 6).decode83()
decodeDc(value)
} else {
val startIndex = 4 + i * 2
val value = blurHash.substring(startIndex, startIndex + 2).decode83()
decodeAc(value, maximumValue * punch)
}
}
val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
for (y in 0..height - 1) {
for (x in 0..width - 1) {
var r = 0f
var g = 0f
var b = 0f
for (j in 0..numY - 1) {
for (i in 0..numX - 1) {
val basis = (cos(PI * x * i / width) * cos(PI * y * j / height)).toFloat()
val color = colors[i + j * numX]
r += color[0] * basis
g += color[1] * basis
b += color[2] * basis
}
}
bitmap.setPixel(x, y, Color.rgb(linearToSRgb(r), linearToSRgb(g), linearToSRgb(b)))
}
}
return bitmap
}
@Suppress("LoopToCallChain")
private fun String.decode83(): Int {
var value: Int = 0
for (i in 0..this.length - 1) {
val digit = digitCharacters.indexOf(this[i])
if (digit != -1) {
value = value * 83 + digit
}
}
return value
}
private fun decodeDc(value: Int): Array<Float> {
val intR = value shr 16
val intG = (value shr 8) and 255
val intB = value and 255
return arrayOf(sRgbToLinear(intR), sRgbToLinear(intG), sRgbToLinear(intB))
}
fun sRgbToLinear(value: Int): Float {
val v = value / 255f
return if (v <= 0.04045) (v / 12.92f) else (pow((v + 0.055) / 1.055, 2.4).toFloat())
}
private fun decodeAc(value: Int, maximumValue: Float): Array<Float> {
val quantR = value / (19 * 19)
val quantG = (value / 19) % 19
val quantB = value % 19
return arrayOf(
signPow((quantR - 9) / 9.0, 2.0) * maximumValue,
signPow((quantG - 9) / 9.0, 2.0) * maximumValue,
signPow((quantB - 9) / 9.0, 2.0) * maximumValue
)
}
private fun signPow(value: Double, exp: Double) = copySign(pow(abs(value), exp), value).toFloat()
private fun linearToSRgb(value: Float): Int {
val v = max(0f, min(1f, value))
if (v <= 0.0031308f) {
return (v * 12.92f * 255 + 0.5f).toInt()
} else {
return ((1.055f * pow(v.toDouble(), 1 / 2.4) - 0.055f) * 255 + 0.5f).toInt()
}
}
}

View File

@ -1,29 +0,0 @@
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
allprojects {
repositories {
google()
jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}

View File

@ -1,29 +0,0 @@
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
compileSdkVersion 29
defaultConfig {
applicationId "com.wolt.blurhash"
minSdkVersion 14
targetSdkVersion 29
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation project(path: ':lib')
implementation 'androidx.appcompat:appcompat:1.1.0'
}

View File

@ -1,21 +0,0 @@
# Add project specific ProGuard rules here.
# You can control the set of applied configuration files using the
# proguardFiles setting in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
# Uncomment this to preserve the line number information for
# debugging stack traces.
#-keepattributes SourceFile,LineNumberTable
# If you keep the line number information, uncomment this to
# hide the original source file name.
#-renamesourcefileattribute SourceFile

View File

@ -1,21 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.wolt.blurhashapp">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name="com.wolt.blurhashapp.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>

View File

@ -1,24 +0,0 @@
package com.wolt.blurhashapp
import android.os.Bundle
import android.view.View
import android.widget.EditText
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.wolt.blurhashkt.BlurHashDecoder
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val etInput: EditText = findViewById(R.id.etInput)
val ivResult: ImageView = findViewById(R.id.ivResult)
findViewById<View>(R.id.tvDecode).setOnClickListener {
val bitmap = BlurHashDecoder.decode(etInput.text.toString(), 20, 12)
ivResult.setImageBitmap(bitmap)
}
}
}

View File

@ -1,34 +0,0 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
android:fillType="evenOdd"
android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
android:strokeColor="#00000000"
android:strokeWidth="1">
<aapt:attr name="android:fillColor">
<gradient
android:endX="78.5885"
android:endY="90.9159"
android:startX="48.7653"
android:startY="61.0927"
android:type="linear">
<item
android:color="#44000000"
android:offset="0.0"/>
<item
android:color="#00000000"
android:offset="1.0"/>
</gradient>
</aapt:attr>
</path>
<path
android:fillColor="#FFFFFF"
android:fillType="nonZero"
android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
android:strokeColor="#00000000"
android:strokeWidth="1"/>
</vector>

View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff009de0"/>
<corners android:radius="8dp"/>
</shape>

View File

@ -1,171 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
android:fillColor="#26A69A"
android:pathData="M0,0h108v108h-108z"/>
<path
android:fillColor="#00000000"
android:pathData="M9,0L9,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M19,0L19,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M29,0L29,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M39,0L39,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M49,0L49,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M59,0L59,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M69,0L69,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M79,0L79,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M89,0L89,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M99,0L99,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,9L108,9"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,19L108,19"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,29L108,29"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,39L108,39"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,49L108,49"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,59L108,59"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,69L108,69"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,79L108,79"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,89L108,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M0,99L108,99"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M19,29L89,29"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M19,39L89,39"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M19,49L89,49"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M19,59L89,59"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M19,69L89,69"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M19,79L89,79"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M29,19L29,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M39,19L39,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M49,19L49,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M59,19L59,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M69,19L69,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
<path
android:fillColor="#00000000"
android:pathData="M79,19L79,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8"/>
</vector>

View File

@ -1,43 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="24dp">
<EditText
android:id="@+id/etInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:hint="@string/hint_blurhash"
android:inputType="text"
android:singleLine="true"
android:text="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/tvDecode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="12dp"
android:background="@color/colorPrimary"
android:elevation="8dp"
android:paddingStart="12dp"
android:paddingTop="8dp"
android:paddingEnd="12dp"
android:paddingBottom="8dp"
android:text="@string/title_button_decode"
android:textColor="@color/colorAccent"
android:textSize="16sp" />
<ImageView
android:id="@+id/ivResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:adjustViewBounds="true" />
</LinearLayout>

View File

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>

View File

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#29b6f6</color>
<color name="colorPrimaryDark">#0086c3</color>
<color name="colorAccent">#444444</color>
</resources>

View File

@ -1,5 +0,0 @@
<resources>
<string name="app_name">BlurHash</string>
<string name="hint_blurhash">BlurHash string</string>
<string name="title_button_decode">Decode!</string>
</resources>

View File

@ -1,9 +0,0 @@
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

View File

@ -1,15 +0,0 @@
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
android.enableJetifier=true
android.useAndroidX=true
org.gradle.jvmargs=-Xmx1536m
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true

Binary file not shown.

View File

@ -1,6 +0,0 @@
#Mon Jul 01 10:02:38 EEST 2019
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip

172
Kotlin/gradlew vendored
View File

@ -1,172 +0,0 @@
#!/usr/bin/env sh
##############################################################################
##
## Gradle start up script for UN*X
##
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
PRG="$0"
# Need this for relative symlinks.
while [ -h "$PRG" ] ; do
ls=`ls -ld "$PRG"`
link=`expr "$ls" : '.*-> \(.*\)$'`
if expr "$link" : '/.*' > /dev/null; then
PRG="$link"
else
PRG=`dirname "$PRG"`"/$link"
fi
done
SAVED="`pwd`"
cd "`dirname \"$PRG\"`/" >/dev/null
APP_HOME="`pwd -P`"
cd "$SAVED" >/dev/null
APP_NAME="Gradle"
APP_BASE_NAME=`basename "$0"`
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS=""
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD="maximum"
warn () {
echo "$*"
}
die () {
echo
echo "$*"
echo
exit 1
}
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "`uname`" in
CYGWIN* )
cygwin=true
;;
Darwin* )
darwin=true
;;
MINGW* )
msys=true
;;
NONSTOP* )
nonstop=true
;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD="$JAVA_HOME/jre/sh/java"
else
JAVACMD="$JAVA_HOME/bin/java"
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD="java"
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
# Increase the maximum file descriptors if we can.
if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
MAX_FD_LIMIT=`ulimit -H -n`
if [ $? -eq 0 ] ; then
if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
MAX_FD="$MAX_FD_LIMIT"
fi
ulimit -n $MAX_FD
if [ $? -ne 0 ] ; then
warn "Could not set maximum file descriptor limit: $MAX_FD"
fi
else
warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
fi
fi
# For Darwin, add options to specify how the application appears in the dock
if $darwin; then
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
fi
# For Cygwin, switch paths to Windows format before running java
if $cygwin ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
# We build the pattern for arguments to be converted via cygpath
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
SEP=""
for dir in $ROOTDIRSRAW ; do
ROOTDIRS="$ROOTDIRS$SEP$dir"
SEP="|"
done
OURCYGPATTERN="(^($ROOTDIRS))"
# Add a user-defined pattern to the cygpath arguments
if [ "$GRADLE_CYGPATTERN" != "" ] ; then
OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
fi
# Now convert the arguments - kludge to limit ourselves to /bin/sh
i=0
for arg in "$@" ; do
CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
else
eval `echo args$i`="\"$arg\""
fi
i=$((i+1))
done
case $i in
(0) set -- ;;
(1) set -- "$args0" ;;
(2) set -- "$args0" "$args1" ;;
(3) set -- "$args0" "$args1" "$args2" ;;
(4) set -- "$args0" "$args1" "$args2" "$args3" ;;
(5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
(6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
(7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
(8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
(9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
esac
fi
# Escape application args
save () {
for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
echo " "
}
APP_ARGS=$(save "$@")
# Collect all arguments for the java command, following the shell quoting and substitution rules
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
cd "$(dirname "$0")"
fi
exec "$JAVACMD" "$@"

84
Kotlin/gradlew.bat vendored
View File

@ -1,84 +0,0 @@
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS=
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto init
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto init
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:init
@rem Get command-line arguments, handling Windows variants
if not "%OS%" == "Windows_NT" goto win9xME_args
:win9xME_args
@rem Slurp the command line arguments.
set CMD_LINE_ARGS=
set _SKIP=2
:win9xME_args_slurp
if "x%~1" == "x" goto execute
set CMD_LINE_ARGS=%*
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega

View File

@ -1,30 +0,0 @@
apply plugin: 'com.android.library'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'kotlin-android'
android {
compileSdkVersion 29
defaultConfig {
minSdkVersion 14
targetSdkVersion 29
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

View File

@ -1,21 +0,0 @@
# Add project specific ProGuard rules here.
# You can control the set of applied configuration files using the
# proguardFiles setting in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
# Uncomment this to preserve the line number information for
# debugging stack traces.
#-keepattributes SourceFile,LineNumberTable
# If you keep the line number information, uncomment this to
# hide the original source file name.
#-renamesourcefileattribute SourceFile

View File

@ -1 +0,0 @@
<manifest package="com.wolt.blurhashkt" />

View File

@ -1,122 +0,0 @@
package com.wolt.blurhashkt
import android.graphics.Bitmap
import android.graphics.Color
import kotlin.math.PI
import kotlin.math.cos
import kotlin.math.pow
import kotlin.math.withSign
object BlurHashDecoder {
fun decode(blurHash: String?, width: Int, height: Int, punch: Float = 1f): Bitmap? {
if (blurHash == null || blurHash.length < 6) {
return null
}
val numCompEnc = decode83(blurHash, 0, 1)
val numCompX = (numCompEnc % 9) + 1
val numCompY = (numCompEnc / 9) + 1
if (blurHash.length != 4 + 2 * numCompX * numCompY) {
return null
}
val maxAcEnc = decode83(blurHash, 1, 2)
val maxAc = (maxAcEnc + 1) / 166f
val colors = Array(numCompX * numCompY) { i ->
if (i == 0) {
val colorEnc = decode83(blurHash, 2, 6)
decodeDc(colorEnc)
} else {
val from = 4 + i * 2
val colorEnc = decode83(blurHash, from, from + 2)
decodeAc(colorEnc, maxAc * punch)
}
}
return composeBitmap(width, height, numCompX, numCompY, colors)
}
private fun decode83(str: String, from: Int = 0, to: Int = str.length): Int {
var result = 0
for (i in from until to) {
val index = charMap[str[i]] ?: -1
if (index != -1) {
result = result * 83 + index
}
}
return result
}
private fun decodeDc(colorEnc: Int): FloatArray {
val r = colorEnc shr 16
val g = (colorEnc shr 8) and 255
val b = colorEnc and 255
return floatArrayOf(srgbToLinear(r), srgbToLinear(g), srgbToLinear(b))
}
private fun srgbToLinear(colorEnc: Int): Float {
val v = colorEnc / 255f
return if (v <= 0.04045f) {
(v / 12.92f)
} else {
((v + 0.055f) / 1.055f).pow(2.4f)
}
}
private fun decodeAc(value: Int, maxAc: Float): FloatArray {
val r = value / (19 * 19)
val g = (value / 19) % 19
val b = value % 19
return floatArrayOf(
signedPow2((r - 9) / 9.0f) * maxAc,
signedPow2((g - 9) / 9.0f) * maxAc,
signedPow2((b - 9) / 9.0f) * maxAc
)
}
private fun signedPow2(value: Float) = value.pow(2f).withSign(value)
private fun composeBitmap(
width: Int, height: Int,
numCompX: Int, numCompY: Int,
colors: Array<FloatArray>
): Bitmap {
val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
for (y in 0 until height) {
for (x in 0 until width) {
var r = 0f
var g = 0f
var b = 0f
for (j in 0 until numCompY) {
for (i in 0 until numCompX) {
val basis = (cos(PI * x * i / width) * cos(PI * y * j / height)).toFloat()
val color = colors[j * numCompX + i]
r += color[0] * basis
g += color[1] * basis
b += color[2] * basis
}
}
bitmap.setPixel(x, y, Color.rgb(linearToSrgb(r), linearToSrgb(g), linearToSrgb(b)))
}
}
return bitmap
}
private fun linearToSrgb(value: Float): Int {
val v = value.coerceIn(0f, 1f)
return if (v <= 0.0031308f) {
(v * 12.92f * 255f + 0.5f).toInt()
} else {
((1.055f * v.pow(1 / 2.4f) - 0.055f) * 255 + 0.5f).toInt()
}
}
private val charMap = listOf(
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '#', '$', '%', '*', '+', ',',
'-', '.', ':', ';', '=', '?', '@', '[', ']', '^', '_', '{', '|', '}', '~'
)
.mapIndexed { i, c -> c to i }
.toMap()
}

View File

@ -1 +0,0 @@
include ':demo', ':lib'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 436 KiB

Binary file not shown.

BIN
Media/WhyBlurHash.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 398 KiB

1
Python

@ -1 +0,0 @@
Subproject commit 7469c813ea646ac022ca2879de76cc6e453237a1

107
Readme.md
View File

@ -1,4 +1,4 @@
# [BlurHash](http://blurha.sh)
# BlurHash
BlurHash is a compact representation of a placeholder for an image.
@ -10,16 +10,14 @@ images into your data to show as placeholders?
BlurHash will solve your problems! How? Like this:
<img src="Media/WhyBlurHash.png" width="600">
<img src="Media/WhyBlurHash.jpg" width="600">
You can also see nice examples and try it out yourself at [blurha.sh](http://blurha.sh/)!
## How does it work?
## How does it work
In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this
image. You do this on the backend of your service, and store the string along with the image. When you send data to your
image. You would do this on the backend of your service, and store the string along the image. When you send data to your
client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into an
image that it shows while the real image is loading over the network. The string is short enough that it comfortably fits into
image that it shows while the real image is loading over the network. The string is short enough that comfortably fits in with
whatever data format you use. For instance, it can easily be added as a field in a JSON object.
In summary:
@ -35,24 +33,15 @@ platform.
So far, we have created these implementations:
* [C](C) - An encoder implemenation in portable C code.
* [Swift](Swift) - Encoder and decoder implementations, and a larger library offering advanced features.
* [C](C) - A simple encoder implemenation in portable C code.
* [Swift](Swift) - Simple encoder and decoder implementations, and a larger library offering advanced features.
There is also an example app to play around with the algorithm.
* [Kotlin](Kotlin) - A decoder implementation for Android.
* [TypeScript](TypeScript) - Encoder and decoder implementations, and an example page to test.
* [Python](https://github.com/woltapp/blurhash-python) - Integration of the C encoder code into Python.
* [Kotlin](Kotlin) - A simple decoder implementation for Android.
* [TypeScript](TypeScript) - A simple decode implementation.
* [Python](Python) - Integration of the C encoder code into Python.
These cover our use cases, but could probably use polishing, extending and improving. There are also these third party implementations that we know of:
* [Pure Python](https://github.com/halcy/blurhash-python) - Implementation of both the encoder and decoder in pure Python.
* [One version in Go](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=2ahUKEwjJ9ueT9pXjAhXRw6YKHfrGBNcQFjAAegQIABAB&url=https%3A%2F%2Fgithub.com%2Fbbrks%2Fgo-blurhash&usg=AOvVaw2alZSHvT7HbublYbpNn9fY), and [another version in Go](https://github.com/buckket/go-blurhash).
* [PHP](https://github.com/kornrunner/php-blurhash) - Encoder and decoder implementations in pure PHP.
* [Java](https://github.com/hsch/blurhash-java) - Encoder implementation in Java.
* [Clojure](https://github.com/siili-core/blurhash) - Encoder and decoder implementations in Clojure.
* [Nim](https://github.com/SolitudeSF/blurhash) - Encoder and decoder implementation in pure Nim.
* [Rust and WebAssembly](https://github.com/fpapado/blurhash-rust-wasm) - Encoder and decoder implementations in Rust. Distributed as both native Rust and WebAssembly packages.
Perhaps you'd like to help extend this list? Which brings us to...
These cover our use cases, but could probably use polishing, extending and improving. Perhaps you'd like to help?
Which brings us to...
## Contributing
@ -60,34 +49,26 @@ We'd love contributions! The algorithm is [very simple](Algorithm.md) - less tha
ported to your platform of choice. And having support for more platforms would be wonderful! So, Java decoder? Golang encoder?
Haskell? Rust? We want them all!
We will also try to tag any issues on our [issue tracker](https://github.com/woltapp/blurhash/issues) that we'd love help with, so
if you just want to dip in, go have a look.
We will also try to tag any issues on our [issue tracker](https://github.com/woltapp/blurhash/issues) that we'd love help with, so if you just want to dip in, go have a look.
You can file a pull request with us, or you can start your own repo and project if you want to run everything yourself, we don't mind.
If you do want to contribute to this project, we have a [code of conduct](CodeOfConduct.md).
## Users
Who uses BlurHash? Here are some projects we know about:
* [Wolt](http://wolt.com/) - We are of course using it ourselves. BlurHashes are used in the mobile clients on iOS and Android, as well as on the web, as placeholders during image loading.
* [Mastodon](https://github.com/tootsuite/mastodon) - The Mastodon decentralised social media network uses BlurHashes both as loading placeholders, as well as for hiding media marked as sensitive.
## Good Questions
### How fast is encoding? Decoding?
These implementations are not very optimised. Running them on very large images can be a bit slow. The performance of
the encoder and decoder are about the same for the same input or output size, so decoding very large placeholders, especially
on your UI thread, can also be a bit slow.
The implementations here are not very optimised. Running them on very large images can be a bit slow. The performance of
the encoder and decoder is about the same for the same input or output size, so decoding very large placeholders, especially
on your UI thread, can be a bit slow.
However! The trick to using the algorithm efficiently is to not run it on full-sized data. The fine detail of an image is all thrown away,
However! The trick to using the algorithm correctly is to not run it on full-sized data. The fine detail of an image is all thrown away,
so you should scale your images down before running BlurHash on them. If you are creating thumbnails, run BlurHash on those
instead of the full images.
Similarly, when displaying the placeholders, very small images work very well when scaled up. We usually decode placeholders
that are 32 or even 20 pixels wide, and then let the UI layer scale them up, which is indistinguishable from decoding them at full size.
Similarly, when displaying the placeholders, very small images scaled work very well. We usually decode placeholders that are
32 or even 20 pixels wide, and then let the UI layer scale them up, which is indistinguishable from decoding them at full size.
### How do I pick the number of X and Y components?
@ -98,60 +79,12 @@ seems to strike a nice balance.
However, you should adjust the number of components depending on the aspect ratio of your images. For instance, very wide
images should have more X components and fewer Y components.
The Swift example project contains a test app where you can play around with the parameters and see the results.
### What is the `punch` parameter in some of these implementations?
It is a parameter that adjusts the contrast on the decoded image. 1 means normal, smaller values will make the effect more subtle,
and larger values will make it stronger. This is basically a design parameter, which lets you adjust the look.
Technically, what it does is scale the AC components up or down.
### Is this only useful as an image loading placeholder?
Well, that is what it was designed for originally, but it turns out to be useful for a few other things:
* Masking images without having to use expensive blurs - [Mastodon](http://github.com/tootsuite/mastodon) uses it for this.
* The data representation makes it quite easy to extract colour averages of the image for different areas. You can easily find approximations of things like the average colour of the top edge of the image, or of a corner. There is some code in the Swift BlurHashKit implementation to experiment with this. Also, the average colour of the entire image is just the DC component and can be decoded even without implementing any of the more complicated DCT stuff.
* We have been meaning to try to implement tinted drop shadows for UI elements by using the BlurHash and extending the borders. Haven't actually had time to implement this yet though.
### Why base 83?
First, 83 seems to be about how many low-ASCII characters you can find that are safe for use in all of JSON, HTML and shells.
Secondly, 83 * 83 is very close to, and a little more than, 19 * 19 * 19, making it ideal for encoding three AC components in two
characters.
### What about using the full Unicode character set to get a more efficient encoding?
We haven't looked into how much overehead UTF-8 encoding would introduce versus base 83 in single-byte characters, but
the encoding and decoding would probably be a lot more complicated, so in the spirit of minimalism BlurHash uses the simpler
option. It might also be awkward to copy-paste, depending on OS capabilities.
If you think it can be done and is worth it, though, do make your own version and show us! We'd love to see it in action.
### What about other basis representations than DCT?
This is something we'd *love* to try. The DCT looks quite ugly when you increase the number of components, probably because
the shape of the basis functions becomes too visible. Using a different basis with more aesthetically pleasing shape might be
a big win.
However, we have not managed come up with one. Some experimenting with a [Fourier-Bessel base](https://en.wikipedia.org/wiki/FourierBessel_series),
targeted at images that are going to be cropped into circles has been done, but without much success. Here again we'd love
to see what you can come up with!
## Authors
* [Dag Ågren](https://github.com/DagAgren) - Original algorithm design, Swift and C implementations
* [Mykhailo Shchurov](https://github.com/shchurov) - Kotlin decoder implementation
* [Hang Duy Khiem](https://github.com/hangduykhiem) - Android demo app
* [Olli Mahlamäki](https://github.com/omahlama) - TypeScript decoder and encoder implementations
* [Olli Mahlamäki](https://github.com/omahlama) - TypeScript decoder implemenation
* [Atte Lautanala](https://github.com/lautat) - Python integration
* [Lorenz Diener](https://github.com/halcy) - Pure Python implementation
* [Boris Momčilović](https://github.com/kornrunner) - Pure PHP implementation
* [Hendrik Schnepel](https://github.com/hsch) - Java encoder implementation
* [Tuomo Virolainen](https://github.com/tvirolai) - Clojure implementation
* [Fotis Papadogeorgopoulos](https://github.com/fpapado) - Rust and WebAssembly implementation
* _Your name here?_
## License

View File

@ -22,18 +22,6 @@
1B19DF602015E72C00D8FCD7 /* pic6.png in Resources */ = {isa = PBXBuildFile; fileRef = 1B19DF5F2015E72B00D8FCD7 /* pic6.png */; };
1B2BA1CA1F0E5EE3006057C1 /* encode.c in Sources */ = {isa = PBXBuildFile; fileRef = 1B2BA1C81F0E5EE3006057C1 /* encode.c */; };
1B2BA1CB1F0E5EEA006057C1 /* blurhash_stb.c in Sources */ = {isa = PBXBuildFile; fileRef = 1B2BA1C41F0E5ED6006057C1 /* blurhash_stb.c */; };
1B6C71FD2272453D000D3BB1 /* BlurHash.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA60701FF40A2F00E42DD7 /* BlurHash.swift */; };
1B6C71FE2272453D000D3BB1 /* FromString.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA60741FF40AF200E42DD7 /* FromString.swift */; };
1B6C71FF2272453D000D3BB1 /* ToString.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA60721FF40AEA00E42DD7 /* ToString.swift */; };
1B6C72002272453D000D3BB1 /* FromUIImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA60781FF40C5800E42DD7 /* FromUIImage.swift */; };
1B6C72012272453D000D3BB1 /* ToUIImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA60761FF40C4C00E42DD7 /* ToUIImage.swift */; };
1B6C72022272453D000D3BB1 /* Generation.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BC34D7F20098E2F00A17481 /* Generation.swift */; };
1B6C72032272453D000D3BB1 /* TupleMaths.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BC34D7D20098E1500A17481 /* TupleMaths.swift */; };
1B6C72042272453D000D3BB1 /* ColourSpace.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA607C1FF422AE00E42DD7 /* ColourSpace.swift */; };
1B6C72052272453D000D3BB1 /* StringCoding.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA607A1FF40D8900E42DD7 /* StringCoding.swift */; };
1B6C72062272453D000D3BB1 /* ColourProbes.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BDE56D02011EC5F00569DCB /* ColourProbes.swift */; };
1B83DED122D88D1500CAA12F /* EscapeSequences.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B83DED022D88D1500CAA12F /* EscapeSequences.swift */; };
1B83DED222D88D1500CAA12F /* EscapeSequences.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B83DED022D88D1500CAA12F /* EscapeSequences.swift */; };
1BAA606D1FF40A0800E42DD7 /* BlurHashEncode.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B49CD261EC47243006F8E7D /* BlurHashEncode.swift */; };
1BAA606E1FF40A0B00E42DD7 /* BlurHashDecode.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B49CD281EC4724C006F8E7D /* BlurHashDecode.swift */; };
1BAA60711FF40A2F00E42DD7 /* BlurHash.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BAA60701FF40A2F00E42DD7 /* BlurHash.swift */; };
@ -81,15 +69,6 @@
);
runOnlyForDeploymentPostprocessing = 1;
};
1B6C71F42272451E000D3BB1 /* CopyFiles */ = {
isa = PBXCopyFilesBuildPhase;
buildActionMask = 2147483647;
dstPath = "include/$(PRODUCT_NAME)";
dstSubfolderSpec = 16;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference section */
@ -106,34 +85,21 @@
1B0A25271EC5EAB000F25F08 /* pic4.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = pic4.png; sourceTree = "<group>"; };
1B0A25281EC5EAB000F25F08 /* pic5.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = pic5.png; sourceTree = "<group>"; };
1B19DF5F2015E72B00D8FCD7 /* pic6.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = pic6.png; sourceTree = "<group>"; };
1B1B249320C13E9700D8EF03 /* LICENSE */ = {isa = PBXFileReference; lastKnownFileType = text; path = LICENSE; sourceTree = "<group>"; };
1B1B249420C13E9700D8EF03 /* dev-requirements.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = "dev-requirements.txt"; sourceTree = "<group>"; };
1B1B249620C13E9700D8EF03 /* pic2.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = pic2.png; sourceTree = "<group>"; };
1B1B249720C13E9700D8EF03 /* pic2_bw.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = pic2_bw.png; sourceTree = "<group>"; };
1B1B249820C13E9700D8EF03 /* test_encode.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = test_encode.py; sourceTree = "<group>"; };
1B1B249920C13E9700D8EF03 /* MANIFEST.in */ = {isa = PBXFileReference; lastKnownFileType = text; path = MANIFEST.in; sourceTree = "<group>"; };
1B1B249A20C13E9700D8EF03 /* README.md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = README.md; sourceTree = "<group>"; };
1B1B249B20C13E9700D8EF03 /* setup.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = setup.py; sourceTree = "<group>"; };
1B1B249D20C13E9700D8EF03 /* tox.ini */ = {isa = PBXFileReference; lastKnownFileType = text; path = tox.ini; sourceTree = "<group>"; };
1B1B249E20C13E9700D8EF03 /* setup.cfg */ = {isa = PBXFileReference; lastKnownFileType = text; path = setup.cfg; sourceTree = "<group>"; };
1B1B24FF20C13E9700D8EF03 /* config.yml */ = {isa = PBXFileReference; lastKnownFileType = text; path = config.yml; sourceTree = "<group>"; };
1B1B250220C13E9700D8EF03 /* __init__.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = __init__.py; sourceTree = "<group>"; };
1B1B250320C13E9700D8EF03 /* encode.c */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.c; path = encode.c; sourceTree = "<group>"; };
1B1B250420C13E9700D8EF03 /* build_blurhash.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = build_blurhash.py; sourceTree = "<group>"; };
1B1B250520C13E9700D8EF03 /* encode.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = encode.h; sourceTree = "<group>"; };
1B1B250620C1491900D8EF03 /* Readme.md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = Readme.md; sourceTree = "<group>"; };
1B2BA1BD1F0E5EC5006057C1 /* blurhash */ = {isa = PBXFileReference; explicitFileType = "compiled.mach-o.executable"; includeInIndex = 0; path = blurhash; sourceTree = BUILT_PRODUCTS_DIR; };
1B2BA1C41F0E5ED6006057C1 /* blurhash_stb.c */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.c; path = blurhash_stb.c; sourceTree = "<group>"; };
1B2BA1C81F0E5EE3006057C1 /* encode.c */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.c; path = encode.c; sourceTree = "<group>"; };
1B2BA1C91F0E5EE3006057C1 /* encode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = encode.h; sourceTree = "<group>"; };
1B2BA1CC1F0E692F006057C1 /* stb_image.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = stb_image.h; sourceTree = "<group>"; };
1B2BA1D21F0F81B8006057C1 /* blurhash.i */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.c.preprocessed; path = blurhash.i; sourceTree = "<group>"; };
1B2BA1D41F0F8A64006057C1 /* BlurHash.c */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.c; path = BlurHash.c; sourceTree = "<group>"; };
1B2BA1D51F0F8A64006057C1 /* BlurHash.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = BlurHash.py; sourceTree = "<group>"; };
1B2BA1DA1F0F8A64006057C1 /* setup.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = setup.py; sourceTree = "<group>"; };
1B2BA1DB1F0F8E2E006057C1 /* BlurHash.c */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.c; name = BlurHash.c; path = ../../BlurHash/Ruby/BlurHash.c; sourceTree = "<group>"; };
1B2BA1DC1F0F8E2E006057C1 /* extconf.rb */ = {isa = PBXFileReference; lastKnownFileType = text.script.ruby; name = extconf.rb; path = ../../BlurHash/Ruby/extconf.rb; sourceTree = "<group>"; };
1B49CD1B1EC4721A006F8E7D /* BlurHashKit.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = BlurHashKit.framework; sourceTree = BUILT_PRODUCTS_DIR; };
1B49CD1F1EC4721A006F8E7D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
1B49CD261EC47243006F8E7D /* BlurHashEncode.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BlurHashEncode.swift; sourceTree = "<group>"; };
1B49CD281EC4724C006F8E7D /* BlurHashDecode.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BlurHashDecode.swift; sourceTree = "<group>"; };
1B6C71F122724500000D3BB1 /* BlurHashKit copy-Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; name = "BlurHashKit copy-Info.plist"; path = "/Users/dag/Code/Toot/BlurHash/BlurHashKit copy-Info.plist"; sourceTree = "<absolute>"; };
1B6C71F62272451E000D3BB1 /* libBlurHashKit.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libBlurHashKit.a; sourceTree = BUILT_PRODUCTS_DIR; };
1B83DED022D88D1500CAA12F /* EscapeSequences.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = EscapeSequences.swift; sourceTree = "<group>"; };
1BAA60701FF40A2F00E42DD7 /* BlurHash.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BlurHash.swift; sourceTree = "<group>"; };
1BAA60721FF40AEA00E42DD7 /* ToString.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToString.swift; sourceTree = "<group>"; };
1BAA60741FF40AF200E42DD7 /* FromString.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FromString.swift; sourceTree = "<group>"; };
@ -189,13 +155,6 @@
);
runOnlyForDeploymentPostprocessing = 0;
};
1B6C71F32272451E000D3BB1 /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
@ -228,61 +187,6 @@
name = Images;
sourceTree = "<group>";
};
1B1B249220C13E9700D8EF03 /* Python */ = {
isa = PBXGroup;
children = (
1B1B250020C13E9700D8EF03 /* src */,
1B1B249520C13E9700D8EF03 /* tests */,
1B1B24FE20C13E9700D8EF03 /* .circleci */,
1B1B249420C13E9700D8EF03 /* dev-requirements.txt */,
1B1B249320C13E9700D8EF03 /* LICENSE */,
1B1B249920C13E9700D8EF03 /* MANIFEST.in */,
1B1B249A20C13E9700D8EF03 /* README.md */,
1B1B249E20C13E9700D8EF03 /* setup.cfg */,
1B1B249B20C13E9700D8EF03 /* setup.py */,
1B1B249D20C13E9700D8EF03 /* tox.ini */,
);
name = Python;
path = ../Python;
sourceTree = "<group>";
};
1B1B249520C13E9700D8EF03 /* tests */ = {
isa = PBXGroup;
children = (
1B1B249620C13E9700D8EF03 /* pic2.png */,
1B1B249720C13E9700D8EF03 /* pic2_bw.png */,
1B1B249820C13E9700D8EF03 /* test_encode.py */,
);
path = tests;
sourceTree = "<group>";
};
1B1B24FE20C13E9700D8EF03 /* .circleci */ = {
isa = PBXGroup;
children = (
1B1B24FF20C13E9700D8EF03 /* config.yml */,
);
path = .circleci;
sourceTree = "<group>";
};
1B1B250020C13E9700D8EF03 /* src */ = {
isa = PBXGroup;
children = (
1B1B250120C13E9700D8EF03 /* blurhash */,
1B1B250420C13E9700D8EF03 /* build_blurhash.py */,
1B1B250320C13E9700D8EF03 /* encode.c */,
1B1B250520C13E9700D8EF03 /* encode.h */,
);
path = src;
sourceTree = "<group>";
};
1B1B250120C13E9700D8EF03 /* blurhash */ = {
isa = PBXGroup;
children = (
1B1B250220C13E9700D8EF03 /* __init__.py */,
);
path = blurhash;
sourceTree = "<group>";
};
1B2BA1B81F0E5E91006057C1 /* C */ = {
isa = PBXGroup;
children = (
@ -290,27 +194,48 @@
1B2BA1C81F0E5EE3006057C1 /* encode.c */,
1B2BA1C91F0E5EE3006057C1 /* encode.h */,
1B2BA1CC1F0E692F006057C1 /* stb_image.h */,
1B2BA1D21F0F81B8006057C1 /* blurhash.i */,
1BEFFFBF20BFDC1600187F3F /* Makefile */,
1B1B250620C1491900D8EF03 /* Readme.md */,
);
name = C;
path = ../C;
sourceTree = "<group>";
};
1B2BA1CD1F0F7AF3006057C1 /* Ruby */ = {
isa = PBXGroup;
children = (
1B2BA1DC1F0F8E2E006057C1 /* extconf.rb */,
1B2BA1DB1F0F8E2E006057C1 /* BlurHash.c */,
);
name = Ruby;
path = ../Ruby;
sourceTree = "<group>";
};
1B2BA1D31F0F8A64006057C1 /* Python */ = {
isa = PBXGroup;
children = (
1B2BA1DA1F0F8A64006057C1 /* setup.py */,
1B2BA1D41F0F8A64006057C1 /* BlurHash.c */,
1B2BA1D51F0F8A64006057C1 /* BlurHash.py */,
);
name = Python;
path = ../Python;
sourceTree = "<group>";
};
1B49CD111EC4721A006F8E7D = {
isa = PBXGroup;
children = (
1B49CD1D1EC4721A006F8E7D /* Swift */,
1B2BA1B81F0E5E91006057C1 /* C */,
1BEFFFC020BFE05600187F3F /* Kotlin */,
1B2BA1CD1F0F7AF3006057C1 /* Ruby */,
1B2BA1D31F0F8A64006057C1 /* Python */,
1BEFFFA420BEE66400187F3F /* TypeScript */,
1B1B249220C13E9700D8EF03 /* Python */,
1BEFFFC620BFF7B100187F3F /* Algorithm.md */,
1BEFFFC720BFF7B100187F3F /* CodeOfConduct.md */,
1BEFFFC820C000DE00187F3F /* License.txt */,
1BEFFFC320BFE34800187F3F /* Readme.md */,
1B49CD1C1EC4721A006F8E7D /* Products */,
1B6C71F122724500000D3BB1 /* BlurHashKit copy-Info.plist */,
);
sourceTree = "<group>";
};
@ -320,7 +245,6 @@
1B49CD1B1EC4721A006F8E7D /* BlurHashKit.framework */,
1B0A250C1EC5E90C00F25F08 /* BlurHashTest.app */,
1B2BA1BD1F0E5EC5006057C1 /* blurhash */,
1B6C71F62272451E000D3BB1 /* libBlurHashKit.a */,
);
name = Products;
sourceTree = "<group>";
@ -341,7 +265,6 @@
isa = PBXGroup;
children = (
1BAA60701FF40A2F00E42DD7 /* BlurHash.swift */,
1B83DED022D88D1500CAA12F /* EscapeSequences.swift */,
1BAA60741FF40AF200E42DD7 /* FromString.swift */,
1BAA60721FF40AEA00E42DD7 /* ToString.swift */,
1BAA60781FF40C5800E42DD7 /* FromUIImage.swift */,
@ -467,31 +390,13 @@
productReference = 1B49CD1B1EC4721A006F8E7D /* BlurHashKit.framework */;
productType = "com.apple.product-type.framework";
};
1B6C71F52272451E000D3BB1 /* libBlurHashKit */ = {
isa = PBXNativeTarget;
buildConfigurationList = 1B6C71FA2272451E000D3BB1 /* Build configuration list for PBXNativeTarget "libBlurHashKit" */;
buildPhases = (
1B6C71F22272451E000D3BB1 /* Sources */,
1B6C71F32272451E000D3BB1 /* Frameworks */,
1B6C71F42272451E000D3BB1 /* CopyFiles */,
);
buildRules = (
);
dependencies = (
);
name = libBlurHashKit;
productName = libBlurHash;
productReference = 1B6C71F62272451E000D3BB1 /* libBlurHashKit.a */;
productType = "com.apple.product-type.library.static";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
1B49CD121EC4721A006F8E7D /* Project object */ = {
isa = PBXProject;
attributes = {
DefaultBuildSystemTypeForWorkspace = Latest;
LastSwiftUpdateCheck = 1020;
LastSwiftUpdateCheck = 0830;
LastUpgradeCheck = 0930;
ORGANIZATIONNAME = "Dag Ågren";
TargetAttributes = {
@ -512,11 +417,6 @@
LastSwiftMigration = 0920;
ProvisioningStyle = Automatic;
};
1B6C71F52272451E000D3BB1 = {
CreatedOnToolsVersion = 10.2;
DevelopmentTeam = M9KXCWYWYR;
ProvisioningStyle = Automatic;
};
};
};
buildConfigurationList = 1B49CD151EC4721A006F8E7D /* Build configuration list for PBXProject "BlurHash" */;
@ -524,7 +424,6 @@
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
English,
en,
Base,
);
@ -534,7 +433,6 @@
projectRoot = "";
targets = (
1B49CD1A1EC4721A006F8E7D /* BlurHashKit */,
1B6C71F52272451E000D3BB1 /* libBlurHashKit */,
1B0A250B1EC5E90C00F25F08 /* BlurHashTest */,
1B2BA1BC1F0E5EC5006057C1 /* blurhash */,
);
@ -600,7 +498,6 @@
1BAA60751FF40AF200E42DD7 /* FromString.swift in Sources */,
1BAA607B1FF40D8900E42DD7 /* StringCoding.swift in Sources */,
1BAA60771FF40C4C00E42DD7 /* ToUIImage.swift in Sources */,
1B83DED122D88D1500CAA12F /* EscapeSequences.swift in Sources */,
1BAA60731FF40AEA00E42DD7 /* ToString.swift in Sources */,
1BC34D8020098E2F00A17481 /* Generation.swift in Sources */,
1BDE56D12011EC5F00569DCB /* ColourProbes.swift in Sources */,
@ -608,24 +505,6 @@
);
runOnlyForDeploymentPostprocessing = 0;
};
1B6C71F22272451E000D3BB1 /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
1B6C71FE2272453D000D3BB1 /* FromString.swift in Sources */,
1B6C72022272453D000D3BB1 /* Generation.swift in Sources */,
1B6C72032272453D000D3BB1 /* TupleMaths.swift in Sources */,
1B6C72002272453D000D3BB1 /* FromUIImage.swift in Sources */,
1B6C72042272453D000D3BB1 /* ColourSpace.swift in Sources */,
1B6C72052272453D000D3BB1 /* StringCoding.swift in Sources */,
1B83DED222D88D1500CAA12F /* EscapeSequences.swift in Sources */,
1B6C71FF2272453D000D3BB1 /* ToString.swift in Sources */,
1B6C71FD2272453D000D3BB1 /* BlurHash.swift in Sources */,
1B6C72062272453D000D3BB1 /* ColourProbes.swift in Sources */,
1B6C72012272453D000D3BB1 /* ToUIImage.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXTargetDependency section */
@ -663,6 +542,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
DEVELOPMENT_TEAM = 6GE6LAAR8V;
INFOPLIST_FILE = BlurHashTest/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
PRODUCT_BUNDLE_IDENTIFIER = com.wolt.BlurHashTest;
PRODUCT_NAME = "$(TARGET_NAME)";
@ -677,6 +557,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
DEVELOPMENT_TEAM = 6GE6LAAR8V;
INFOPLIST_FILE = BlurHashTest/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
PRODUCT_BUNDLE_IDENTIFIER = com.wolt.BlurHashTest;
PRODUCT_NAME = "$(TARGET_NAME)";
@ -756,7 +637,7 @@
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
IPHONEOS_DEPLOYMENT_TARGET = 10.3;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
@ -812,7 +693,7 @@
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
IPHONEOS_DEPLOYMENT_TARGET = 10.3;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
@ -835,6 +716,7 @@
DYLIB_INSTALL_NAME_BASE = "@rpath";
INFOPLIST_FILE = BlurHashKit/Info.plist;
INSTALL_PATH = "$(LOCAL_LIBRARY_DIR)/Frameworks";
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
PRODUCT_BUNDLE_IDENTIFIER = com.wolt.BlurHashKit;
PRODUCT_NAME = "$(TARGET_NAME)";
@ -856,6 +738,7 @@
DYLIB_INSTALL_NAME_BASE = "@rpath";
INFOPLIST_FILE = BlurHashKit/Info.plist;
INSTALL_PATH = "$(LOCAL_LIBRARY_DIR)/Frameworks";
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
PRODUCT_BUNDLE_IDENTIFIER = com.wolt.BlurHashKit;
PRODUCT_NAME = "$(TARGET_NAME)";
@ -864,45 +747,6 @@
};
name = Release;
};
1B6C71FB2272451E000D3BB1 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
CLANG_ENABLE_OBJC_WEAK = YES;
CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
CODE_SIGN_IDENTITY = "iPhone Developer";
CODE_SIGN_STYLE = Automatic;
DEVELOPMENT_TEAM = M9KXCWYWYR;
GCC_C_LANGUAGE_STANDARD = gnu11;
MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
MTL_FAST_MATH = YES;
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = BlurHashKit;
SKIP_INSTALL = YES;
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
};
name = Debug;
};
1B6C71FC2272451E000D3BB1 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
CLANG_ENABLE_OBJC_WEAK = YES;
CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
CODE_SIGN_IDENTITY = "iPhone Developer";
CODE_SIGN_STYLE = Automatic;
DEVELOPMENT_TEAM = M9KXCWYWYR;
GCC_C_LANGUAGE_STANDARD = gnu11;
MTL_FAST_MATH = YES;
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = BlurHashKit;
SKIP_INSTALL = YES;
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
@ -942,15 +786,6 @@
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
1B6C71FA2272451E000D3BB1 /* Build configuration list for PBXNativeTarget "libBlurHashKit" */ = {
isa = XCConfigurationList;
buildConfigurations = (
1B6C71FB2272451E000D3BB1 /* Debug */,
1B6C71FC2272451E000D3BB1 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 1B49CD121EC4721A006F8E7D /* Project object */;

View File

@ -9,7 +9,7 @@ extension UIImage {
let numX = (sizeFlag % 9) + 1
let quantisedMaximumValue = String(blurHash[1]).decode83()
let maximumValue = Float(quantisedMaximumValue + 1) / 166
let maximumValue = Float(quantisedMaximumValue + 1) / 83
guard blurHash.count == 4 + 2 * numX * numY else { return nil }

View File

@ -38,8 +38,8 @@ extension UIImage {
let maximumValue: Float
if ac.count > 0 {
let actualMaximumValue = ac.map({ max(abs($0.0), abs($0.1), abs($0.2)) }).max()!
let quantisedMaximumValue = Int(max(0, min(82, floor(actualMaximumValue * 166 - 0.5))))
maximumValue = Float(quantisedMaximumValue + 1) / 166
let quantisedMaximumValue = Int(max(0, min(82, floor(actualMaximumValue * 83 - 0.5))))
maximumValue = Float(quantisedMaximumValue + 1) / 83
hash += quantisedMaximumValue.encode83(length: 1)
} else {
maximumValue = 1

View File

@ -1,21 +1,21 @@
import Foundation
extension BlurHash {
public func linearRgb(atX: Float) -> (Float, Float, Float) {
public extension BlurHash {
public func linearRGB(atX: Float) -> (Float, Float, Float) {
return components[0].enumerated().reduce((0, 0, 0)) { (sum, xEnumerated) in
let (x, component) = xEnumerated
return sum + component * cos(Float.pi * Float(x) * atX)
}
}
public func linearRgb(atY: Float) -> (Float, Float, Float) {
public func linearRGB(atY: Float) -> (Float, Float, Float) {
return components.enumerated().reduce((0, 0, 0)) { (sum, yEnumerated) in
let (y, xComponents) = yEnumerated
return sum + xComponents[0] * cos(Float.pi * Float(y) * atY)
}
}
public func linearRgb(at position: (Float, Float)) -> (Float, Float, Float) {
public func linearRGB(at position: (Float, Float)) -> (Float, Float, Float) {
return components.enumerated().reduce((0, 0, 0)) { (sum, yEnumerated) in
let (y, xComponents) = yEnumerated
return xComponents.enumerated().reduce(sum) { (sum, xEnumerated) in
@ -25,48 +25,30 @@ extension BlurHash {
}
}
public func linearRgb(from upperLeft: (Float, Float), to lowerRight: (Float, Float)) -> (Float, Float, Float) {
return components.enumerated().reduce((0, 0, 0)) { (sum, yEnumerated) in
let (y, xComponents) = yEnumerated
return xComponents.enumerated().reduce(sum) { (sum, xEnumerated) in
let (x, component) = xEnumerated
let horizontalAverage: Float = x == 0 ? 1 : (sin(Float.pi * Float(x) * lowerRight.0) - sin(Float.pi * Float(x) * upperLeft.0)) / (Float(x) * Float.pi * (lowerRight.0 - upperLeft.0))
let veritcalAverage: Float = y == 0 ? 1 : (sin(Float.pi * Float(y) * lowerRight.1) - sin(Float.pi * Float(y) * upperLeft.1)) / (Float(y) * Float.pi * (lowerRight.1 - upperLeft.1))
return sum + component * horizontalAverage * veritcalAverage
}
}
}
public func linearRgb(at upperLeft: (Float, Float), size: (Float, Float)) -> (Float, Float, Float) {
return linearRgb(from: upperLeft, to: (upperLeft.0 + size.0, upperLeft.1 + size.1))
}
public var averageLinearRgb: (Float, Float, Float) {
public var averageLinearRGB: (Float, Float, Float) {
return components[0][0]
}
public var leftEdgeLinearRgb: (Float, Float, Float) { return linearRgb(atX: 0) }
public var rightEdgeLinearRgb: (Float, Float, Float) { return linearRgb(atX: 1) }
public var topEdgeLinearRgb: (Float, Float, Float) { return linearRgb(atY: 0) }
public var bottomEdgeLinearRgb: (Float, Float, Float) { return linearRgb(atY: 1) }
public var topLeftCornerLinearRgb: (Float, Float, Float) { return linearRgb(at: (0, 0)) }
public var topRightCornerLinearRgb: (Float, Float, Float) { return linearRgb(at: (1, 0)) }
public var bottomLeftCornerLinearRgb: (Float, Float, Float) { return linearRgb(at: (0, 1)) }
public var bottomRightCornerLinearRgb: (Float, Float, Float) { return linearRgb(at: (1, 1)) }
public var leftEdgeLinearRGB: (Float, Float, Float) { return linearRGB(atX: 0) }
public var rightEdgeLinearRGB: (Float, Float, Float) { return linearRGB(atX: 1) }
public var topEdgeLinearRGB: (Float, Float, Float) { return linearRGB(atY: 0) }
public var bottomEdgeLinearRGB: (Float, Float, Float) { return linearRGB(atY: 1) }
public var topLeftCornerLinearRGB: (Float, Float, Float) { return linearRGB(at: (0, 0)) }
public var topRightCornerLinearRGB: (Float, Float, Float) { return linearRGB(at: (1, 0)) }
public var bottomLeftCornerLinearRGB: (Float, Float, Float) { return linearRGB(at: (0, 1)) }
public var bottomRightCornerLinearRGB: (Float, Float, Float) { return linearRGB(at: (1, 1)) }
}
extension BlurHash {
public func isDark(linearRgb rgb: (Float, Float, Float)) -> Bool {
public extension BlurHash {
public func isDark(linearRGB rgb: (Float, Float, Float)) -> Bool {
return rgb.0 * 0.299 + rgb.1 * 0.587 + rgb.2 * 0.114 < 0.5
}
public var isDark: Bool { return isDark(linearRgb: averageLinearRgb) }
public var isDark: Bool { return isDark(linearRGB: averageLinearRGB) }
public func isDark(atX x: Float) -> Bool { return isDark(linearRgb: linearRgb(atX: x)) }
public func isDark(atY y: Float) -> Bool { return isDark(linearRgb: linearRgb(atY: y)) }
public func isDark(at position: (Float, Float)) -> Bool { return isDark(linearRgb: linearRgb(at: position)) }
public func isDark(from upperLeft: (Float, Float), to lowerRight: (Float, Float)) -> Bool { return isDark(linearRgb: linearRgb(from: upperLeft, to: lowerRight)) }
public func isDark(at upperLeft: (Float, Float), size: (Float, Float)) -> Bool { return isDark(linearRgb: linearRgb(at: upperLeft, size: size)) }
public func isDark(atX x: Float) -> Bool { return isDark(linearRGB: linearRGB(atX: x)) }
public func isDark(atY y: Float) -> Bool { return isDark(linearRGB: linearRGB(atY: y)) }
public func isDark(at position: (Float, Float)) -> Bool { return isDark(linearRGB: linearRGB(at: position)) }
public var isLeftEdgeDark: Bool { return isDark(atX: 0) }
public var isRightEdgeDark: Bool { return isDark(atX: 1) }

View File

@ -1,36 +0,0 @@
import Foundation
extension BlurHash {
var twoByThreeEscapeSequence: String {
let areas: [(from: (Float, Float), to: (Float, Float))] = [
(from: (0, 0), to: (0.333, 0.5)),
(from: (0, 0.5), to: (0.333, 1.0)),
(from: (0.333, 0), to: (0.666, 0.5)),
(from: (0.333, 0.5), to: (0.666, 1.0)),
(from: (0.666, 0), to: (1.0, 0.5)),
(from: (0.666, 0.5), to: (1.0, 1.0)),
]
let rgb: [(Float, Float, Float)] = areas.map { area in
linearRgb(from: area.from, to: area.to)
}
let maxRgb: (Float, Float, Float) = rgb.reduce((-Float.infinity, -Float.infinity, -Float.infinity), max)
let minRgb: (Float, Float, Float) = rgb.reduce((Float.infinity, Float.infinity, Float.infinity), min)
let positiveScale: (Float, Float, Float) = ((1, 1, 1) - averageLinearRgb) / (maxRgb - averageLinearRgb)
let negativeScale: (Float, Float, Float) = averageLinearRgb / (averageLinearRgb - minRgb)
let scale: (Float, Float, Float) = min(positiveScale, negativeScale)
let scaledRgb: [(Float, Float, Float)] = rgb.map { rgb in
return (rgb - averageLinearRgb) * scale + averageLinearRgb
}
let c = scaledRgb.map { rgb in
return (linearTosRGB(rgb.0) / 51) * 36 + (linearTosRGB(rgb.1) / 51) * 6 + (linearTosRGB(rgb.2) / 51) + 16
}
return "\u{1b}[38;5;\(c[1]);48;5;\(c[0])m▄\u{1b}[38;5;\(c[3]);48;5;\(c[2])m▄\u{1b}[38;5;\(c[5]);48;5;\(c[4])m▄\u{1b}[m"
}
}

View File

@ -9,7 +9,7 @@ public extension BlurHash {
let numX = (sizeFlag % 9) + 1
let quantisedMaximumValue = String(string[1]).decode83()
let maximumValue = Float(quantisedMaximumValue + 1) / 166
let maximumValue = Float(quantisedMaximumValue + 1) / 83
guard string.count == 4 + 2 * numX * numY else { return nil }

View File

@ -1,6 +1,6 @@
import UIKit
extension BlurHash {
public extension BlurHash {
public init(horizontalGradientFrom leftColour: UIColor, to rightColour: UIColor) {
let average = (leftColour.linear + rightColour.linear) / 2
let difference = (leftColour.linear - rightColour.linear) / 2

View File

@ -14,8 +14,8 @@ public extension BlurHash {
let maximumValue: Float
if ac.count > 0 {
let actualMaximumValue = ac.map({ max(abs($0.0), abs($0.1), abs($0.2)) }).max()!
let quantisedMaximumValue = Int(max(0, min(82, floor(actualMaximumValue * 166 - 0.5))))
maximumValue = Float(quantisedMaximumValue + 1) / 166
let quantisedMaximumValue = Int(max(0, min(82, floor(actualMaximumValue * 83 - 0.5))))
maximumValue = Float(quantisedMaximumValue + 1) / 83
hash += quantisedMaximumValue.encode83(length: 1)
} else {
maximumValue = 1

View File

@ -1,6 +1,6 @@
import UIKit
extension BlurHash {
public extension BlurHash {
public func cgImage(size: CGSize) -> CGImage? {
let width = Int(size.width)
let height = Int(size.height)
@ -42,40 +42,22 @@ extension BlurHash {
return cgImage
}
public func cgImage(numberOfPixels: Int = 1024, originalSize size: CGSize) -> CGImage? {
let width: CGFloat
let height: CGFloat
if size.width > size.height {
width = floor(sqrt(CGFloat(numberOfPixels) * size.width / size.height) + 0.5)
height = floor(CGFloat(numberOfPixels) / width + 0.5)
} else {
height = floor(sqrt(CGFloat(numberOfPixels) * size.height / size.width) + 0.5)
width = floor(CGFloat(numberOfPixels) / height + 0.5)
}
return cgImage(size: CGSize(width: width, height: height))
}
public func image(size: CGSize) -> UIImage? {
guard let cgImage = cgImage(size: size) else { return nil }
return UIImage(cgImage: cgImage)
}
public func image(numberOfPixels: Int = 1024, originalSize size: CGSize) -> UIImage? {
guard let cgImage = cgImage(numberOfPixels: numberOfPixels, originalSize: size) else { return nil }
return UIImage(cgImage: cgImage)
let width: CGFloat
let height: CGFloat
if size.width > size.height {
width = floor(sqrt(CGFloat(numberOfPixels)) * size.width / size.height + 0.5)
height = floor(CGFloat(numberOfPixels) / width + 0.5)
} else {
height = floor(sqrt(CGFloat(numberOfPixels)) * size.height / size.width + 0.5)
width = floor(CGFloat(numberOfPixels) / height + 0.5)
}
return image(size: CGSize(width: width, height: height))
}
}
@objc extension UIImage {
public convenience init?(blurHash string: String, size: CGSize, punch: Float = 1) {
guard let blurHash = BlurHash(string: string),
let cgImage = blurHash.punch(punch).cgImage(size: size) else { return nil }
self.init(cgImage: cgImage)
}
public convenience init?(blurHash string: String, numberOfPixels: Int = 1024, originalSize size: CGSize, punch: Float = 1) {
guard let blurHash = BlurHash(string: string),
let cgImage = blurHash.punch(punch).cgImage(numberOfPixels: numberOfPixels, originalSize: size) else { return nil }
self.init(cgImage: cgImage)
}
}

View File

@ -8,10 +8,6 @@ func -(lhs: (Float, Float, Float), rhs: (Float, Float, Float)) -> (Float, Float,
return (lhs.0 - rhs.0, lhs.1 - rhs.1, lhs.2 - rhs.2)
}
func *(lhs: (Float, Float, Float), rhs: (Float, Float, Float)) -> (Float, Float, Float) {
return (lhs.0 * rhs.0, lhs.1 * rhs.1, lhs.2 * rhs.2)
}
func *(lhs: (Float, Float, Float), rhs: Float) -> (Float, Float, Float) {
return (lhs.0 * rhs, lhs.1 * rhs, lhs.2 * rhs)
}
@ -20,10 +16,6 @@ func *(lhs: Float, rhs: (Float, Float, Float)) -> (Float, Float, Float) {
return (lhs * rhs.0, lhs * rhs.1, lhs * rhs.2)
}
func /(lhs: (Float, Float, Float), rhs: (Float, Float, Float)) -> (Float, Float, Float) {
return (lhs.0 / rhs.0, lhs.1 / rhs.1, lhs.2 / rhs.2)
}
func /(lhs: (Float, Float, Float), rhs: Float) -> (Float, Float, Float) {
return (lhs.0 / rhs, lhs.1 / rhs, lhs.2 / rhs)
}
@ -43,11 +35,3 @@ func *=(lhs: inout (Float, Float, Float), rhs: Float) {
func /=(lhs: inout (Float, Float, Float), rhs: Float) {
lhs = lhs / rhs
}
func min(_ a: (Float, Float, Float), _ b: (Float, Float, Float)) -> (Float, Float, Float) {
return (min(a.0, b.0), min(a.1, b.1), min(a.2, b.2))
}
func max(_ a: (Float, Float, Float), _ b: (Float, Float, Float)) -> (Float, Float, Float) {
return (max(a.0, b.0), max(a.1, b.1), max(a.2, b.2))
}

View File

@ -1,45 +1,3 @@
# BlurHash for iOS, in Swift
## Standalone decoder and encoder
[BlurHashDecode.swift](BlurHashDecode.swift) and [BlurHashEncode.swift](BlurHashEncode.swift) contain a decoder
and encoder for BlurHash to and from `UIImage`. Both files are completeiy standalone, and can simply be copied into your
project directly.
### Decoding
[BlurHashDecode.swift](BlurHashDecode.swift) implements the following extension on `UIImage`:
public convenience init?(blurHash: String, size: CGSize, punch: Float = 1)
This creates a UIImage containing the placeholder image decoded from the BlurHash string, or returns nil if decoding failed.
The parameters are:
* `blurHash` - A string containing the BlurHash.
* `size` - The requested output size. You should keep this small, and let UIKit scale it up for you. 32 pixels wide is plenty.
* `punch` - Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders.
### Encoding
[BlurHashEncode.swift](BlurHashEncode.swift) implements the following extension on `UIImage`:
public func blurHash(numberOfComponents components: (Int, Int)) -> String?
This returns a string containing the BlurHash for the image, or nil if the image was in a weird format that is not supported.
The parameters are:
* `numberOfComponents` - a Tuple of integers specifying the number of components in the X and Y directions. Both must be
between 1 and 9 inclusive, or the function will return nil. 3 to 5 is usually a good range.
## BlurHashKit
This is a more advanced library, currently in development. It will let you do more advanced operations using BlurHashes,
such testing whether various parts of an image are dark and light, or generating BlurHashes as gradients from corner colours.
It is currently not documented or finalised, but feel free to look into the different files and what they implement, or look at
how it is used by the test app.
## BlurHashTest.app
This is a simple test app that shows how to use the various pieces of BlurHash functionality, and lets you play with the
algorithm.

View File

@ -1,2 +0,0 @@
node_modules/
dist/

View File

@ -1,9 +0,0 @@
{
"printWidth": 80,
"overrides": [
{
"files": ["*.ts"],
"options": {}
}
]
}

View File

@ -1,10 +0,0 @@
# Changelog
## 1.1.2 (June 29, 2019)
- added `isBlurhashValid()` utility
## 1.1.1 (June 29, 2019)
- fixed incorrect type declaration path in package.json
- improved error handling

View File

@ -1,78 +0,0 @@
# blurhash
[![NPM Version](https://img.shields.io/npm/v/blurhash.svg?style=flat)](https://npmjs.org/package/blurhash)
[![NPM Downloads](https://img.shields.io/npm/dm/blurhash.svg?style=flat)](https://npmjs.org/package/blurhash)
> JavaScript encoder and decoder for the [Wolt BlurHash](https://github.com/woltapp/blurhash) algorithm
## Install
```sh
npm install --save blurhash
```
See [react-blurhash](https://github.com/woltapp/react-blurhash) to use blurhash with React.
## API
### `decode(blurhash: string, width: number, height: number, punch?: number) => Uint8ClampedArray`
> Decodes a blurhash string to pixels
#### Example
```js
import { decode } from "blurhash";
const pixels = decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 32);
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(width, height);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
document.body.append(canvas);
```
### `encode(pixels: Uint8ClampedArray, width: number, height: number, componentX: number, componentY: number) => string`
> Encodes pixels to a blurhash string
```js
import { encode } from "blurhash";
const loadImage = async src =>
new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = (...args) => reject(args);
img.src = src;
});
const getImageData = image => {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
return context.getImageData(0, 0, image.width, image.height);
};
const encodeImageToBlurhash = async imageUrl => {
const image = await loadImage(imageUrl);
const imageData = getImageData(image);
return encode(imageData.data, imageData.width, imageData.height, 4, 4);
};
```
### `isBlurhashValid(blurhash: string) => { result: boolean; errorReason?: string }`
```js
import { isBlurhashValid } from "blurhash";
const validRes = isBlurhashValid("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
// { result: true }
const invalidRes = isBlurhashValid("???");
// { result: false, errorReason: "The blurhash string must be at least 6 characters" }
```

1
TypeScript/Readme.md Normal file
View File

@ -0,0 +1 @@
# BlurHash in TypeScript

View File

@ -1,74 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Blurhash test file</title>
<style>
* {
box-sizing: border-box;
}
<head>
<title>Blurhash test file</title>
<style>
* {
box-sizing: border-box;
}
#canvas {
display: block;
width: 632px;
height: 356px;
}
.wrapper {
display: flex;
align-items: flex-start;
}
.blurhashWrapper {
padding: 0 20px;
}
canvas {
display: block;
width: 632px;
height: 356px;
background: #ccc;
}
#blurhash {
margin-top: 20px;
font-size: 24px;
width: 632px;
}
label {
display: block;
padding: 10px 0;
}
label > span {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<h1>BlurHash demo</h1>
<div class="wrapper">
<div>
<h2>Encode</h2>
<canvas id="original" width="100" height="100"></canvas>
<label>
<span>File:</span>
<input id="fileinput" type="file" accept="image/*" />
</label>
<label>
<span>Components</span>
<input type="number" id="x" value="4" min="1" max="9" />
×
<input type="number" id="y" value="3" min="1" max="9" />
</label>
</div>
<div class="blurhashWrapper">
<h2>Blurhash</h2>
<input id="blurhash" type="text" value="" />
</div>
<div>
<h2>Decode</h2>
<canvas id="canvas" width="32" height="32"></canvas>
</div>
</div>
<script src="./demo.js"></script>
</body>
</html>
#blurhash {
margin-top: 20px;
font-size: 24px;
width: 632px;
}
</style>
</head>
<body>
<canvas id="canvas" width="32" height="32"></canvas>
<input id="blurhash" type="text" value="LNMF%n00%#MwS|WCWEM{R*bbWBbH" />
<script src="./demo.js"></script>
</body>
</html>

1
TypeScript/dist/base64.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export declare const decode64: (str: String) => number;

21
TypeScript/dist/base64.js vendored Normal file
View File

@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var digitCharacters = [
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
"k", "l", "m", "n", "o", "p", "q", "r", "s", "t",
"u", "v", "w", "x", "y", "z", "A", "B", "C", "D",
"E", "F", "G", "H", "I", "J", "K", "L", "M", "N",
"O", "P", "Q", "R", "S", "T", "U", "V", "W", "X",
"Y", "Z", ":", ";"
];
exports.decode64 = function (str) {
var value = 0;
for (var i = 0; i < str.length; i++) {
var c = str[i];
var digit = digitCharacters.indexOf(c);
value = (value << 6) + digit;
}
return value;
};
//# sourceMappingURL=base64.js.map

1
TypeScript/dist/base64.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"base64.js","sourceRoot":"","sources":["../src/base64.ts"],"names":[],"mappings":";;AAAA,IAAM,eAAe,GAAG;IACpB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;IAChD,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;IAChD,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;IAChD,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;IAChD,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;IAChD,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;IAChD,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;CACrB,CAAA;AAEY,QAAA,QAAQ,GAAG,UAAC,GAAW;IAChC,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAI,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAC,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC5B,IAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACjB,IAAM,KAAK,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACzC,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC;KAChC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC,CAAA"}

2
TypeScript/dist/decode.d.ts vendored Normal file
View File

@ -0,0 +1,2 @@
declare const decode: (blurhash: string, width: number, height: number, punch?: number) => Uint8ClampedArray;
export default decode;

76
TypeScript/dist/decode.js vendored Normal file
View File

@ -0,0 +1,76 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var base64_1 = require("./base64");
var utils_1 = require("./utils");
var decodeDC = function (value) {
var intR = value >> 16;
var intG = (value >> 8) & 255;
var intB = value & 255;
return [utils_1.sRGBToLinear(intR), utils_1.sRGBToLinear(intG), utils_1.sRGBToLinear(intB)];
};
var decodeAC = function (value, maximumValue) {
var quantR = value >> 8;
var quantG = (value >> 4) & 15;
var quantB = value & 15;
var rgb = [
utils_1.signPow((quantR - 8) / 8, 3.0) * maximumValue * 2,
utils_1.signPow((quantG - 8) / 8, 3.0) * maximumValue * 2,
utils_1.signPow((quantB - 8) / 8, 3.0) * maximumValue * 2,
];
return rgb;
};
var decode = function (blurhash, width, height, punch) {
punch = punch | 1;
if (blurhash.length < 6) {
console.error('too short blurhash');
return null;
}
var sizeFlag = base64_1.decode64(blurhash[0]);
var numY = (sizeFlag >> 3) + 1;
var numX = (sizeFlag & 7) + 1;
var quantisedMaximumValue = base64_1.decode64(blurhash[1]);
var maximumValue = (quantisedMaximumValue + 1) / 128;
if (blurhash.length !== 4 + 2 * numX * numY) {
console.error('blurhash length mismatch', blurhash.length, 4 + 2 * numX * numY);
return null;
}
var colors = new Array(numX * numY);
for (var i = 0; i < colors.length; i++) {
if (i === 0) {
var value = base64_1.decode64(blurhash.substring(2, 6));
colors[i] = decodeDC(value);
}
else {
var value = base64_1.decode64(blurhash.substring(4 + i * 2, 6 + i * 2));
colors[i] = decodeAC(value, maximumValue * punch);
}
}
var bytesPerRow = width * 4;
var pixels = new Uint8ClampedArray(bytesPerRow * height);
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var r = 0;
var g = 0;
var b = 0;
for (var j = 0; j < numY; j++) {
for (var i = 0; i < numX; i++) {
var basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
var color = colors[i + j * numX];
r += color[0] * basis;
g += color[1] * basis;
b += color[2] * basis;
}
}
var intR = utils_1.linearTosRGB(r);
var intG = utils_1.linearTosRGB(g);
var intB = utils_1.linearTosRGB(b);
pixels[4 * x + 0 + y * bytesPerRow] = intR;
pixels[4 * x + 1 + y * bytesPerRow] = intG;
pixels[4 * x + 2 + y * bytesPerRow] = intB;
pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha
}
}
return pixels;
};
exports.default = decode;
//# sourceMappingURL=decode.js.map

1
TypeScript/dist/decode.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"decode.js","sourceRoot":"","sources":["../src/decode.ts"],"names":[],"mappings":";;AAAA,mCAAoC;AACpC,iCAA8D;AAE9D,IAAM,QAAQ,GAAG,UAAC,KAAa;IAC7B,IAAM,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;IACzB,IAAM,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;IAChC,IAAM,IAAI,GAAG,KAAK,GAAG,GAAG,CAAC;IACzB,OAAO,CAAC,oBAAY,CAAC,IAAI,CAAC,EAAE,oBAAY,CAAC,IAAI,CAAC,EAAE,oBAAY,CAAC,IAAI,CAAC,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,IAAM,QAAQ,GAAG,UAAC,KAAa,EAAE,YAAoB;IACnD,IAAM,MAAM,GAAG,KAAK,IAAI,CAAC,CAAC;IAC1B,IAAM,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC;IACjC,IAAM,MAAM,GAAG,KAAK,GAAG,EAAE,CAAC;IAE1B,IAAM,GAAG,GAAG;QACV,eAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC;QACjD,eAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC;QACjD,eAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC;KAClD,CAAC;IAEF,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,IAAM,MAAM,GAAG,UAAC,QAAgB,EAAE,KAAa,EAAE,MAAc,EAAE,KAAc;IAC7E,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;IAElB,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QACvB,OAAO,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC;KACb;IAED,IAAM,QAAQ,GAAG,iBAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,IAAM,IAAI,GAAG,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC,IAAM,IAAI,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAEhC,IAAM,qBAAqB,GAAG,iBAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,IAAM,YAAY,GAAG,CAAC,qBAAqB,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAEvD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,IAAI,EAAE;QAC3C,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;QAChF,OAAO,IAAI,CAAC;KACb;IAED,IAAM,MAAM,GAAG,IAAI,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,CAAC,EAAE;YACX,IAAM,KAAK,GAAG,iBAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACjD,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;SAC7B;aAAM;YACL,IAAM,KAAK,GAAG,iBAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACjE,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,CAAC;SACnD;KACF;IAED,IAAM,WAAW,GAAG,KAAK,GAAG,CAAC,CAAC;IAC9B,IAAM,MAAM,GAAG,IAAI,iBAAiB,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;IAE3D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;YAC9B,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,IAAI,CAAC,GAAG,CAAC,CAAC;YAEV,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;oBAC7B,IAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;oBACrF,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;oBACjC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;oBACtB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;oBACtB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;iBACvB;aACF;YAED,IAAI,IAAI,GAAG,oBAAY,CAAC,CAAC,CAAC,CAAC;YAC3B,IAAI,IAAI,GAAG,oBAAY,CAAC,CAAC,CAAC,CAAC;YAC3B,IAAI,IAAI,GAAG,oBAAY,CAAC,CAAC,CAAC,CAAC;YAE3B,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,IAAI,CAAC;YAC3C,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,IAAI,CAAC;YAC3C,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,IAAI,CAAC;YAC3C,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ;SACpD;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC"}

1
TypeScript/dist/index.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export { default as decode } from './decode';

5
TypeScript/dist/index.js vendored Normal file
View File

@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var decode_1 = require("./decode");
exports.decode = decode_1.default;
//# sourceMappingURL=index.js.map

1
TypeScript/dist/index.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,mCAA6C;AAApC,0BAAA,OAAO,CAAU"}

4
TypeScript/dist/utils.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export declare const sRGBToLinear: (value: number) => number;
export declare const linearTosRGB: (value: number) => number;
export declare const sign: (n: number) => 1 | -1;
export declare const signPow: (val: number, exp: number) => number;

23
TypeScript/dist/utils.js vendored Normal file
View File

@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.sRGBToLinear = function (value) {
var v = value / 255;
if (v <= 0.04045) {
return v / 12.92;
}
else {
return Math.pow((v + 0.055) / 1.055, 2.4);
}
};
exports.linearTosRGB = function (value) {
var v = Math.max(0, Math.min(1, value));
if (v <= 0.0031308) {
return Math.round(v * 12.92 * 255 + 0.5);
}
else {
return Math.round((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);
}
};
exports.sign = function (n) { return (n < 0 ? -1 : 1); };
exports.signPow = function (val, exp) { return exports.sign(val) * Math.pow(Math.abs(val), exp); };
//# sourceMappingURL=utils.js.map

1
TypeScript/dist/utils.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;AAAa,QAAA,YAAY,GAAG,UAAC,KAAa;IACxC,IAAI,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC;IACpB,IAAI,CAAC,IAAI,OAAO,EAAE;QAChB,OAAO,CAAC,GAAG,KAAK,CAAC;KAClB;SAAM;QACL,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC;KAC3C;AACH,CAAC,CAAC;AAEW,QAAA,YAAY,GAAG,UAAC,KAAa;IACxC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IACxC,IAAI,CAAC,IAAI,SAAS,EAAE;QAClB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;KAC1C;SAAM;QACL,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;KACvE;AACH,CAAC,CAAC;AAEW,QAAA,IAAI,GAAG,UAAC,CAAS,IAAK,OAAA,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAhB,CAAgB,CAAC;AAEvC,QAAA,OAAO,GAAG,UAAC,GAAW,EAAE,GAAW,IAAK,OAAA,YAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAxC,CAAwC,CAAC"}

View File

@ -1,37 +1,22 @@
{
"name": "blurhash",
"version": "1.1.3",
"description": "Encoder and decoder for the Wolt BlurHash algorithm.",
"version": "1.0.0",
"description": "Decoder for the Wolt BlurHash alrgorithm.",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/woltapp/blurhash/tree/master/TypeScript"
},
"homepage": "http://blurhash.com",
"types": "dist/index.t.js",
"scripts": {
"prepublishOnly": "npm run build",
"build": "npm run ts",
"demo": "webpack-dev-server --mode development",
"prettier": "prettier src/**/*.ts",
"prettier-fix": "npm run prettier -- --write",
"ts": "tsc",
"ts:watch": "npm run ts -- --noEmit --watch"
"build": "tsc",
"demo": "webpack-dev-server"
},
"keywords": [
"blurhash",
"blur",
"hash",
"image"
"blurhash"
],
"author": "omahlama",
"license": "MIT",
"license": "ISC",
"devDependencies": {
"prettier": "1.18.2",
"ts-loader": "6.0.4",
"typescript": "3.5.3",
"webpack": "4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "3.7.2"
"ts-loader": "3.2.0",
"typescript": "2.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.9.7"
}
}

View File

@ -1,104 +1,21 @@
const digitCharacters = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z",
"#",
"$",
"%",
"*",
"+",
",",
"-",
".",
":",
";",
"=",
"?",
"@",
"[",
"]",
"^",
"_",
"{",
"|",
"}",
"~"
];
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
"U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d",
"e", "f", "g", "h", "i", "j", "k", "l", "m", "n",
"o", "p", "q", "r", "s", "t", "u", "v", "w", "x",
"y", "z", "#", "$", "%", "*", "+", ",", "-", ".",
":", ";", "=", "?", "@", "[", "]", "^", "_", "{",
"|", "}", "~",
]
export const decode83 = (str: String) => {
let value = 0;
for (let i = 0; i < str.length; i++) {
const c = str[i];
const digit = digitCharacters.indexOf(c);
value = value * 83 + digit;
}
return value;
};
export const encode83 = (n: number, length: number): string => {
var result = "";
for (let i = 1; i <= length; i++) {
let digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;
result += digitCharacters[Math.floor(digit)];
}
return result;
};
let value = 0;
for(let i=0; i<str.length; i++) {
const c = str[i];
const digit = digitCharacters.indexOf(c);
value = value * 83 + digit;
}
return value;
}

View File

@ -1,42 +1,5 @@
import { decode83 } from "./base83";
import { sRGBToLinear, signPow, linearTosRGB } from "./utils";
import { ValidationError } from "./error";
/**
* Returns an error message if invalid or undefined if valid
* @param blurhash
*/
const validateBlurhash = (blurhash: string) => {
if (!blurhash || blurhash.length < 6) {
throw new ValidationError(
"The blurhash string must be at least 6 characters"
);
}
const sizeFlag = decode83(blurhash[0]);
const numY = Math.floor(sizeFlag / 9) + 1;
const numX = (sizeFlag % 9) + 1;
if (blurhash.length !== 4 + 2 * numX * numY) {
throw new ValidationError(
`blurhash length mismatch: length is ${
blurhash.length
} but it should be ${4 + 2 * numX * numY}`
);
}
};
export const isBlurhashValid = (
blurhash: string
): { result: boolean; errorReason?: string } => {
try {
validateBlurhash(blurhash);
} catch (error) {
return { result: false, errorReason: error.message };
}
return { result: true };
};
import { decode83 } from './base83';
import { sRGBToLinear, signPow, linearTosRGB } from './utils';
const decodeDC = (value: number) => {
const intR = value >> 16;
@ -53,31 +16,33 @@ const decodeAC = (value: number, maximumValue: number) => {
const rgb = [
signPow((quantR - 9) / 9, 2.0) * maximumValue,
signPow((quantG - 9) / 9, 2.0) * maximumValue,
signPow((quantB - 9) / 9, 2.0) * maximumValue
signPow((quantB - 9) / 9, 2.0) * maximumValue,
];
return rgb;
};
const decode = (
blurhash: string,
width: number,
height: number,
punch?: number
) => {
validateBlurhash(blurhash);
const decode = (blurhash: string, width: number, height: number, punch?: number) => {
punch = punch | 1;
if (blurhash.length < 6) {
console.error('too short blurhash');
return null;
}
const sizeFlag = decode83(blurhash[0]);
const numY = Math.floor(sizeFlag / 9) + 1;
const numX = (sizeFlag % 9) + 1;
const quantisedMaximumValue = decode83(blurhash[1]);
const maximumValue = (quantisedMaximumValue + 1) / 166;
const maximumValue = (quantisedMaximumValue + 1) / 83;
if (blurhash.length !== 4 + 2 * numX * numY) {
console.error('blurhash length mismatch', blurhash.length, 4 + 2 * numX * numY);
return null;
}
const colors = new Array(numX * numY);
for (let i = 0; i < colors.length; i++) {
if (i === 0) {
const value = decode83(blurhash.substring(2, 6));
@ -99,9 +64,7 @@ const decode = (
for (let j = 0; j < numY; j++) {
for (let i = 0; i < numX; i++) {
const basis =
Math.cos((Math.PI * x * i) / width) *
Math.cos((Math.PI * y * j) / height);
const basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
let color = colors[i + j * numX];
r += color[0] * basis;
g += color[1] * basis;

View File

@ -1,66 +1,16 @@
import decode from "./decode";
import encode from "./encode";
const blurhashElement = document.getElementById("blurhash") as HTMLInputElement;
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const originalCanvas = document.getElementById("original") as HTMLCanvasElement;
const fileInput = document.getElementById("fileinput") as HTMLInputElement;
const componentXElement = document.getElementById("x") as HTMLInputElement;
const componentYElement = document.getElementById("y") as HTMLInputElement;
import decode from './decode';
function render() {
const blurhash = blurhashElement.value;
if (blurhash) {
const blurhash = (document.getElementById('blurhash') as HTMLInputElement).value;
const pixels = decode(blurhash, 32, 32);
if (pixels) {
const ctx = canvas.getContext("2d");
const imageData = new ImageData(pixels, 32, 32);
ctx.putImageData(imageData, 0, 0);
if(pixels) {
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
const imageData = new ImageData(pixels, 32, 32);
ctx.putImageData(imageData, 0, 0);
}
}
}
function clamp(n: number) {
return Math.min(9, Math.max(1, n));
}
function doEncode() {
const file = fileInput.files[0];
const componentX = clamp(+componentXElement.value);
const componentY = clamp(+componentYElement.value);
if (file) {
const ctx = originalCanvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, originalCanvas.width, originalCanvas.height);
URL.revokeObjectURL(img.src);
setTimeout(() => {
const imageData = ctx.getImageData(
0,
0,
originalCanvas.width,
originalCanvas.height
);
const blurhash = encode(
imageData.data,
imageData.width,
imageData.height,
componentX,
componentY
);
blurhashElement.value = blurhash;
render();
}, 0);
};
img.src = URL.createObjectURL(fileInput.files[0]);
}
}
blurhashElement.addEventListener("keyup", render);
fileInput.addEventListener("change", doEncode);
componentXElement.addEventListener("change", doEncode);
componentYElement.addEventListener("change", doEncode);
render();
document.getElementById('blurhash').addEventListener('keyup', render);
render();

View File

@ -1,128 +0,0 @@
import { encode83 } from "./base83";
import { sRGBToLinear, signPow, linearTosRGB } from "./utils";
import { ValidationError } from "./error";
type NumberTriplet = [number, number, number];
const bytesPerPixel = 4;
const multiplyBasisFunction = (
pixels: Uint8ClampedArray,
width: number,
height: number,
basisFunction: (i: number, j: number) => number
): NumberTriplet => {
let r = 0;
let g = 0;
let b = 0;
const bytesPerRow = width * bytesPerPixel;
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
const basis = basisFunction(x, y);
r +=
basis * sRGBToLinear(pixels[bytesPerPixel * x + 0 + y * bytesPerRow]);
g +=
basis * sRGBToLinear(pixels[bytesPerPixel * x + 1 + y * bytesPerRow]);
b +=
basis * sRGBToLinear(pixels[bytesPerPixel * x + 2 + y * bytesPerRow]);
}
}
let scale = 1 / (width * height);
return [r * scale, g * scale, b * scale];
};
const encodeDC = (value: NumberTriplet): number => {
const roundedR = linearTosRGB(value[0]);
const roundedG = linearTosRGB(value[1]);
const roundedB = linearTosRGB(value[2]);
return (roundedR << 16) + (roundedG << 8) + roundedB;
};
const encodeAC = (value: NumberTriplet, maximumValue: number): number => {
let quantR = Math.floor(
Math.max(
0,
Math.min(18, Math.floor(signPow(value[0] / maximumValue, 0.5) * 9 + 9.5))
)
);
let quantG = Math.floor(
Math.max(
0,
Math.min(18, Math.floor(signPow(value[1] / maximumValue, 0.5) * 9 + 9.5))
)
);
let quantB = Math.floor(
Math.max(
0,
Math.min(18, Math.floor(signPow(value[2] / maximumValue, 0.5) * 9 + 9.5))
)
);
return quantR * 19 * 19 + quantG * 19 + quantB;
};
const encode = (
pixels: Uint8ClampedArray,
width: number,
height: number,
componentX: number,
componentY: number
): string => {
if (componentX < 1 || componentX > 9 || componentY < 1 || componentY > 9) {
throw new ValidationError("BlurHash must have between 1 and 9 components");
}
if (width * height * 4 !== pixels.length) {
throw new ValidationError("Width and height must match the pixels array");
}
let factors: Array<[number, number, number]> = [];
for (let y = 0; y < componentY; y++) {
for (let x = 0; x < componentX; x++) {
const normalisation = x == 0 && y == 0 ? 1 : 2;
const factor = multiplyBasisFunction(
pixels,
width,
height,
(i: number, j: number) =>
normalisation *
Math.cos((Math.PI * x * i) / width) *
Math.cos((Math.PI * y * j) / height)
);
factors.push(factor);
}
}
const dc = factors[0];
const ac = factors.slice(1);
let hash = "";
let sizeFlag = componentX - 1 + (componentY - 1) * 9;
hash += encode83(sizeFlag, 1);
let maximumValue: number;
if (ac.length > 0) {
let actualMaximumValue = Math.max(...ac.map(val => Math.max(...val)));
let quantisedMaximumValue = Math.floor(
Math.max(0, Math.min(82, Math.floor(actualMaximumValue * 166 - 0.5)))
);
maximumValue = (quantisedMaximumValue + 1) / 166;
hash += encode83(quantisedMaximumValue, 1);
} else {
maximumValue = 1;
hash += encode83(0, 1);
}
hash += encode83(encodeDC(dc), 4);
ac.forEach(factor => {
hash += encode83(encodeAC(factor, maximumValue), 2);
});
return hash;
};
export default encode;

View File

@ -1,7 +0,0 @@
export class ValidationError extends Error {
constructor(message: string) {
super(message);
this.name = "ValidationError";
this.message = message;
}
}

View File

@ -1,3 +1 @@
export { default as decode, isBlurhashValid } from "./decode";
export { default as encode } from "./encode";
export * from "./error";
export { default as decode } from './decode';

View File

@ -18,5 +18,4 @@ export const linearTosRGB = (value: number) => {
export const sign = (n: number) => (n < 0 ? -1 : 1);
export const signPow = (val: number, exp: number) =>
sign(val) * Math.pow(Math.abs(val), exp);
export const signPow = (val: number, exp: number) => sign(val) * Math.pow(Math.abs(val), exp);

View File

@ -1,12 +1,13 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"lib": ["es5", "dom"],
"declaration": true,
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true
},
"include": ["src/index.ts"]
}
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"declaration": true,
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
},
"include": [
"src/index.ts"
]
}

File diff suppressed because it is too large Load Diff

View File

@ -1,11 +0,0 @@
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead",
"modules": false
}
]
]
}

View File

@ -1,31 +0,0 @@
{
"printWidth": 100,
"overrides": [
{
"files": ["*.js"],
"options": {
"singleQuote": true,
"trailingComma": "all"
}
},
{
"files": ["webpack.config.js"],
"options": {
"trailingComma": "es5"
}
},
{
"files": ["*.css", "*.scss"],
"options": {
"parser": "scss",
"singleQuote": true
}
},
{
"files": "*.json",
"options": {
"parser": "json"
}
}
]
}

View File

@ -1,9 +0,0 @@
# blurha.sh
Website for blurhash lives here.
## Developing
`npm start` runs the development server
`npm deploy` builds the site, moves the contents into gh-pages branch and pushes it.

Some files were not shown because too many files have changed in this diff Show More