개요

Blurhash, 동적 생성blur 이미지(모호한 이미지).
용도로 실제 표시된 이미지의 상상할 수 있는blur 이미지를 자리 표시자로 표시함으로써 읽기 시간의 UX를 개선합니다.
▶ 오른쪽은blur 이미지를 사용한 예

Blurhash를 준비해주세요.

공식 Github 자료 라이브러리 출처를 얻습니다.
다양한 언어를 지원합니다PHP 버전.
환경 관계로 인해 Composer를 사용하지 않고 원본 파일을 다운로드하여 사용합니다.
ZIP 다운로드에서 zip을 다운로드할 수 있습니다.

zip 압축을 풀면'php-blurhash-master'라는 디렉터리를 만들 수 있습니다.
사용이 편리함을 고려하여 "blurhash"로 이름을 바꾸고, 모든 디렉터리를 좋아하는 곳에 두십시오.

Blurhash 구현

Blurhash를 사용한 처리는 인코딩과 디코딩 두 가지가 있습니다.
① 원본 이미지blur를 이미지화하여 짧은 문자열 생성 (인코딩)
②blur 이미지로 문자열 되돌리기(디코딩)

먼저 필요한 파일을 읽습니다.
Composer를 사용하지 않으므로 require 에서 각 파일을 읽어야 합니다.
encode.php

<?php
use kornrunner\Blurhash\Blurhash;
use kornrunner\Blurhash\Color;
use kornrunner\Blurhash\DC;
use kornrunner\Blurhash\AC;
use kornrunner\Blurhash\Base83;

require_once('blurhash/src/Blurhash.php');
require_once('blurhash/src/Color.php');
require_once('blurhash/src/DC.php');
require_once('blurhash/src/AC.php');
require_once('blurhash/src/Base83.php');

// Composerを利用した場合は下記2行だけでOK
// require_once('vendor/autoload.php');
// use kornrunner\Blurhash\Blurhash;

// メモリが足りなければ調整
// ini_set('memory_limit', '512M');
:
:
// 続きの処理

　
우선 원본 이미지를blur 이미지로 문자열로 인코딩합니다.
encode.php

$file = 'original.png';
$image = imagecreatefromstring(file_get_contents($file));
$width = imagesx($image);
$height = imagesy($image);

$pixels = [];
for ($y = 0; $y < $height; ++$y) {
    $row = [];
    for ($x = 0; $x < $width; ++$x) {
        $index = imagecolorat($image, $x, $y);
        $colors = imagecolorsforindex($image, $index);

        $row[] = [$colors['red'], $colors['green'], $colors['blue']];
    }
    $pixels[] = $row;
}

$components_x = 3;
$components_y = 4;
$blurhash = Blurhash::encode($pixels, $components_x, $components_y);

echo $blurhash;
// 出力結果
// LEHV9uae2yk8pyo0adR*.7kCMdnj

소스는Github 샘플만화입니다.
파일을 전송하고 처리하면 짧은 문자열이 생성됩니다.
이 문자열을 디코딩하면blur 이미지가 표시됩니다.
원본 이미지를 전달하고 동적으로 인코딩~디코딩을 하면 처리에 시간이 좀 걸린다.
따라서 원본 이미지를 인코딩하고 문자열을 저장하며 표시할 때 디코딩하고 이미지를 표시합니다.이 가능하다, ~할 수 있다,...
　
다음 디코딩 후blur 이미지를 표시합니다.
이번에는 img 탭으로 표시하기 위해 get 매개 변수로 인코딩된 문자열을 전달합니다.
view.html

<img src="decode.php?image=LEHV9uae2yk8pyo0adR*.7kCMdnj">

decode.php

$blurhash = $_GET['image']; // 生成した文字列を取得

// 画像のサイズを取得（もしくは生成したいサイズを入力）
$fileinfo = getimagesize('original.png');
$width    = $fileinfo[0];
$height   = $fileinfo[1];

$pixels = Blurhash::decode($blurhash, $width, $height);
$image  = imagecreatetruecolor($width, $height);
for ($y = 0; $y < $height; ++$y) {
    for ($x = 0; $x < $width; ++$x) {
        [$r, $g, $b] = $pixels[$y][$x];
        // if($r > 255) {$r = 255;} // 場合によって追記
        // if($g > 255) {$g = 255;} // 場合によって追記
        // if($b > 255) {$b = 255;} // 場合によって追記
        imagesetpixel($image, $x, $y, imagecolorallocate($image, $r, $g, $b));
    }
}
// 画像を出力
header('Content-Type: image/png');
imagepng($image);

이제 decode.php 에 전달된 문자열이 디코딩되어 이미지로 표시됩니다.// 場合によって追記 에 대한 3 줄은 이미지(예를 들어 하얀 이미지 등)에 따라 RGB를 초과합니까?오류가 발생하여 상한선을 설정했습니다.
참고로 공식적으로는 JavaScript/TypeScript 디코딩을 추천합니다.

blur 이미지를 저장할 때

blur 그림을 저장하지 않고 표시하는 방법을 썼지만 저장할 수도 있습니다.
① 브라우저에서 실행decode.php하면 이미지가 표시되므로 저장을 마우스 오른쪽 버튼으로 클릭합니다.
② 마지막 행을 다음 내용으로 변경하면 지정된 위치에 저장됩니다.

// header('Content-Type: image/png');
imagepng($image, '保存先/保存名.png');

base64로 blur 이미지 보이기

blur 이미지를 저장하고 싶지 않지만 동적으로 디코딩 처리하는 것을 좋아하지 않습니다.
이미지를 base64에 인코딩하여 src에 전달할 수 있습니다.
decode.php

// decode.phpの最終行を以下に書き換える
// header('Content-Type: image/png');
// imagepng($image);

// 画像のGDリソースをbase64に変換する
ob_start(); 
imagepng($image); 
$image_data = ob_get_contents(); 
ob_end_clean(); 

$image_data_base64 = base64_encode($image_data);

echo $image_data_base64;
// 出力結果
// iVBORw0KGgoAAAANSUhEUgAAAeAAAAFACAIAAADrqjgsAAAACXBIWXMAAA7E....

　
base64로 변환된 내용을 저장합니다. 아래와 같이 전달하면 그림을 표시할 수 있습니다.
(단, 문자열은 때때로 심상치 않게 길어서 설치에 적합하지 않다)
view.html

<img src="data:image/jpeg;base64,<?= $image_data_base64 ?>" alt="">

참조 URL

BlurHash를 네일아트북으로 가져오기

GD 출력을 base64로 변환

GD로 만든 이미지를 파일화하지 않고 img 라벨로 표시합니다.

Data URI scheme