Реактивные веб-сайты Николай Мациевский Евгений ...

72РЕАКТИВНЫЕ ВЕБ-САЙТЫ53 Кб до 17, что экономит 32% (для сравнения: gzip сжимает ее до 15,5 Кб,bzip2 — до 14,6 Кб).Особенно привлекательно в этом методе то, что часть JavaScript,ответственная за получение кода на стороне клиента, очень небольшая:var codeimg = new Image()// когда картинка загрузится, вызовется эта функцияcodeimg.onload = function () {var code = '' // переменная, куда будет собираться кодvar size = 119 // размер изображения (оно квадратное)var canvas = document.createElement("canvas")canvas.width = canvas.height =canvas.style.width = canvas.style.height = sizevar inner = canvas.getContext("2d")// загружаем изображение в созданный нами CANVASinner.drawImage(codeimg)// забираем содержимое и переводим его в символыvar data = inner.getImageData(0, 0, size, size)for (var i = 0, len = data.length; i 0) code += String.fromCharCode(data[i])}eval(code)}// указываем URL изображения, где у нас хранится кодcodeimg.src = 'image-with-our-code.png'Серверная часть также очень проста, реализацию на PHP можно посмотретьв блоге автора метода, так же легко она реализуется на любомдругом языке — в квадратное изображение, сторона которого равна квадратномукорню из значения длины файла, в каждую точку ставится покоду символа из передаваемого контента.Таким же методом можно паковать и CSS — в конце вместо eval нужнолишь создать в DOM тег с соответствующим содержимым.Само изображение, получающееся в результате, ничего интересногособой не представляет — обычный бинарный шум.