JS 2 PNG
JS 2 PNG
JavaScript конвертор
До 60% сжатия!
Информация
Как это работает
Принцип работы этого метода обфускации очень прост. Сейчас мы попробуем объяснить этот принцип в 4 простых шага.
А теперь слегка поподробней. В ASCII для кодирования каждого символа используется 8 бит информации, что даёт 2^8 комбинаций или 256 возможных символов. Для начала, каждый символ JavaScript, конвертируем в код символов ASCII.
В 8-битном бинарном файле изображения 8 бит используется для интерпретации цвета. Используя 8 бит, ты можешь кодировать 256 различных цветов, начиная от белого до чёрного (градации серого). В цветном изображении для каждого пикселя используется 3 байта информации. Это позволяет хранить данные для красного, синего и зелёного цветов, в промежутке от 0 до 255, чтобы в дальнейшем объединять их, преобразовывая в определённый цвет.
Этот метод работает по принципу кодирования 256 доступных ASCII символов из JavaScript файла в 256 возможных цветов бинарного PNG изображения. Далее, при помощи canvas
, происходит чтение значений цвета каждого пикселя, с дальнейшим преобразованием полученных данных обратно в ASCII эквивалент. Полученный результат преобразовывается из ASCII кода в символы и выполняется при помощи new Function
в память клиента. Использование данного метода сжатия совместно с gzip на стороне сервера помогает достигнуть отличного результата.
Скрипт декодер
Развёрнутая версия скрипта декодера без минификации, 1'293 Байт, MD5: 76D67BF40FF7FF0844F527D5A4CDF693
. В качестве источника данных можно использовать как сам PNG архив, указав ссылку на файл, так и Base64 код, указав его вместо ссылки. Код будет распакован по событию window.onload
конструтором new Function
в память, без добавления в DOM.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | !function( image_source, image, canvas_element, draw_image, window_onload ){ canvas_element=document.createElement('canvas'), draw_image=canvas_element.getContext&&function(){ if( body=document.body, get_context=canvas_element.getContext('2d'), !get_context.getImageData )throw'Canvas draw error'; image.src=image_source, image.style.opacity='0', image.style.position='absolute', body.appendChild(image), image.onload=function(){ for( x=0, z=-1, new_array=[], offset_width=this.offsetWidth, offset_height=this.offsetHeight, canvas_element.width=offset_width, canvas_element.height=offset_height, get_context.drawImage(this,0,0), body.removeChild(this), get_image_data=get_context.getImageData(0,0,offset_width,offset_height).data; x<get_image_data.length; x+=4 )get_image_data[x]>0&&( new_array[++z]=String.fromCharCode(get_image_data[x]) ); new Function('return '+new_array.join(''))() } }, window_onload=window.onload, window.onload='function'!=typeof window_onload? draw_image:( window_onload&&window_onload(), draw_image() ) }( 'http://base64/code/or/image/source.png', new Image ); |
Минифицированный cкрипт декодер
Минифицированная версия скрипта декодера, 616 Байт, MD5: FFCF0F77F992418D05B222FDF9787C61
.
1 | !function(e,o,n,a,i,d,f){i=o.createElement('canvas'),d=i.getContext&&function(){if(b=o.body,r=i.getContext('2d'),!r.getImageData)throw'Canvas draw error';n.src=e,n.style.opacity='0',n.style.position='absolute',b.appendChild(n),n.onload=function(){for(x=0,z=-1,Z=[],t=this,j=t.offsetWidth,J=t.offsetHeight,i.width=j,i.height=J,r.drawImage(t,0,0),b.removeChild(t),g=r.getImageData(0,0,j,J).data;x<g.length;x+=4)g[x]>0&&(Z[++z]=String.fromCharCode(g[x]));new Function('return '+Z.join(''))()}},f=a.onload,a.onload='function'!=typeof f?d:(f&&f(),d())}('http://base64/code/or/image/source.png',document,new Image,window); |
4 сообщений в “Информация”
Добавить комментарий
Информация
Публикации:
О сервисе
НАША МИССИЯ
Наш сервис создан для того, чтобы оптимизировать твой проект и сделать его использование как можно более комфортным для пользователей. Главная цель для нас — это сделать Интернет комфортней и удобней для всех, путём оптимизации передаваемых через сеть данных. Чем меньший объём данных передаётся клиентскому устройству, тем быстрее работает твой проект. Чем быстрее работает твой проект, тем комфортней его пользователям.
СОЗДАН ДЛЯ ВСЕХ
Мы постараемся ответить на все твои вопросы и умные комментарии. Не стесняйся оставлять отзывы о работоспособности сервиса или об обнаруженных тобой проблемах. Чем больше информации мы получим, чем точнее будут твои комментарии, тем лучше будет работать наш сервис. Если ты гуру JavaScript и можешь привнести что-то полезное в наш сервис или дать совет как его усовершенствовать, воспользуйся формой обратной связи на вкладке #Контакты и расскажи нам о своих наработках. Поверь, такой подход гораздо продуктивней, чем бездумно закрытая вкладка в браузере.
ПОДЕЛИСЬ С ДРУГОМ
Расскажи друзьям и коллегам о нашем сервисе. Чем больше людей узнает о нас, тем больше WEB-сайтов и приложений в сети Интернет будут оптимизированы с нашей общей помощью, а каждый оптимизированный JavaScript проект — это наш общий вклад в развитие Интернет.
ПОДДЕРЖИ ПРОЕКТ
Наш проект является совершенно бесплатным, и таковым будет всегда. Если тебе понравился наш сервис, и ты готов сделать посильное пожертвование в его развитие, самое время сделать это прямо сейчас.
Все вырученные деньги пойдут на оплату хостинга, доменного имени, SSL сертификата, а также разработку и поддержание новых проектов. Возможно, именно твой вклад поможет нам создать ещё больше интересных и полезных сервисов, которые помогут тебе и твоим друзьям в разработке новых проектов и оптимизации существующих решений.
Мы готовы принять твой вклад при помощи Qiwi или WebMoney.
- WMZ 699810956552
- WME 292513019893
- WMR 194643025058
- WMU 250743446959
- QIWI 4890494135727683
DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.
at Image.n.onload
Когда использую base, все работает
Когда ссылку на изображение -получается это, что не так, не подскажете?
Здравствуйте!
Это говорит о том, что скрипт выполняется на одном домене, а изображение находится на другом «cross-origin data».
Скрипт я запускаю локально. Изображение лежит прямо рядом со скриптом. Есть какой-нибудь способ чтобы скрипт не считал, что изображение с другого домена? По сути, никакого сервера нет, и не хотелось бы его делать, это браузерная игра…
Попробуйте вариант с Base64