Страницы

Поиск по вопросам

Показаны сообщения с ярлыком изображения. Показать все сообщения
Показаны сообщения с ярлыком изображения. Показать все сообщения

понедельник, 13 апреля 2020 г.

Квадратные thumbnails из не квадратных изображений?

#javascript #изображения #thumbnails #php #css

                    
Уважаемое сообщество, подскажите пожалуйста куда копать? Проблема заключается вот в чем:
Есть фотографии из соц сетей (вконтакте, инстаграм например). Изображения вытаскиваются
из api, и обычно в ответе от api присутствует thumbnail фотографии (src_small к примеру).
В случае с инстаграмом всё отлично - там по дефолту квадратные изображения. В случае
с остальными соц сетями - изображения там какие попадутся. 
Так вот в чем вопрос: возможно ли средствами css отображать только квадратную область
изображения ? Просто обрезать на сервере - довольно трудозатратная операция, если фотографии
будут грузиться пачками по 20 (например). И если будет много пользователей делать это
одновременно, страшно подумать что случится с моим дешевым хостингом (а пока вообще
бесплатным) :)    


Ответы

Ответ 1



Осмелюсь как вариант предложить такой индусский код: http://jsfiddle.net/ptEy8/ Но очень хотелось бы увидеть ещё варианты! Хороший вопрос.

Слайдер под jquery > 1.8

#jquery #slider #изображения #html #css

                    
Есть возможность адаптировать этот плагин под jquery старше 1.9 , дело в том, что
он с 1.8 > не работает, а слайдер хорош www.tympanus.net/codrops/2011/04/28/rotating-image-slider/    


Ответы

Ответ 1



Любой плагин можно со старых версий перевести на новую. Подключите jQuery Migrate и вычисляйте устаревшие методы, заменяя их на новын аналоги. Вот к примеру $.browser, который используется в том плагине - с версии 1.9 удален. Естественно, что он вызывает ошибку.

суббота, 11 апреля 2020 г.

Как обратиться к локальному файлу по ссылке в приложении Chrome

#google_chrome #файлы #javascript #изображения

                    
Доброго времени суток!
Можно-ли получить доступ к локальному файлу из приложения или расширения под Chrome
используя пути такого вида:

file:///C:\Folder\File.jpg 
C:\Folder\File.jpg

При попытке создать объект File() из локальной ссылки появляются ошибки:

Error: GET chrome-extension://acnoddeoamaikpmmdkehnkppmcgcpfjl/C:ImagesTestcat.jpg
net::ERR_FILE_NOT_FOUND
Not allowed to load local resource: C:\Images\myjpeg.jpg

За полным разъяснением этого вопроса смотреть мой ответ.    


Ответы

Ответ 1



Приложение или расширение Chrome не может получить доступ к локальному файлу напрямую, так как это было бы серьезным нарушением безопасности. Конечно, это ограничение можно обойти, как мне объяснили на stackoverflow через Native host. Правда, лично я не пробовал этого делать, так как свою проблему решил просто сохранением локальных файлов внутри Indexed BD. Подробнее обо всех известных мне способах хранения файлов и последующей работы с ними читайте далее. Работа с файлами через Indexed BD. Как сохранить файл в indexedbd? Ответ с разъяснениями здесь. Как получить файл по сети и сохранить в indexedbd? Ответ здесь. Используем FileSystem API для сохранения и работы с файлами. Справка по FileSystem API. Статья о работе с FileSystem API. Local Storage & Session storage & Cookie Storage Как работать с cookie storage? Справка здесь. Как сохранить файл в local storage? Как работать с session storage (временное хранилище)? Сами файлы (их объекты) для работы с ними Вы можете получить через drag&drop или . Почитать подробнее о том, как это делается с примерами и последующим разбором полетов можно здесь. Надеюсь, что ответ объяснил хотя бы поверхностно о работе с файлами в приложениях и расширениях Google Chrome.

Ответ 2



Тут нужно немного по-другому. Попробуйте путь file://C:/0.JPG

четверг, 9 апреля 2020 г.

Как искать похожие изображения между двумя папками?

#linux #изображения

                    
Есть ли возможность у findimagedupes сравнивать изображения в одной папке с другой?

Например, в одной папке 100 изображений, и в другой столько же. В первой папке есть
одно изображение, более, чем на 85%, похожее на одно изображение в другой папке.

Я пробовал делать так:

findimagedupes -t 85 "первая_папка/*"  "вторая_папка/*"


но дело в том, что он показывает совпадения, которые нашлись в первой папке и/или
во второй. А надо, чтобы сообщал, что «найдено изображение в папке первая_папка, которое
совпадает с изображением во вторая_папка»
    


Ответы

Ответ 1



можно в цикле перебрать все пары файлов: $ for f1 in первый_каталог/*; do \ for f2 in второй_каталог/*; do \ findimagedupes -t 85 $f1 $f2; done; done если же требуется, чтобы в выводимых строках пары файлов не были перемешаны (первым может идти файл то из первого, то из второго каталога), то можно каждую строку отсортировать, воспользовавшись возможностью программы findimagedupes передавать получаемые строки на обработку указанному скрипту (см. man findimagedupes): $ for f1 in первый_каталог/*; do \ for f2 in второй_каталог/*; do \ findimagedupes -t 85 -i \ 'VIEW(){ for f in "$@"; do echo $f; done | sort | xargs echo; }' -- \ $f1 $f2; done; done такой перебор каждого-с-каждым довольно ресурсоёмок («отпечатки»-fingerprints вычисляются при каждом запуске), поэтому для большей оптимальности следует либо дополнить нужной функциональностью саму программу, либо, вызывая её для всех файлов сразу, несколько усложнить скрипт, передаваемый программе опцией -i. обновление «усложнил» скрипт: #!/bin/bash d1=$(realpath $1) d2=$(realpath $2) e1=$(echo $d1 | sed 's,/,\\/,g') findimagedupes -t 85 -i 'VIEW() { n1=$(for f in "$@"; do echo $f; done \ | sed -n "/^'$e1'/{p;q}"); n2=$(for f in "$@"; do echo $f; done \ | grep "^'$d2'" | xargs echo); if [ -n "$n1" -a "$n2" ]; then \ for f in "$@"; do echo $f; done | sed -n "/^'$e1'/!{s|^|$n1 |;p}"; fi; \ }' $d1/* $d2/* вызывается он с двумя параметрами: первый_каталог второй_каталог (без каких-либо масок, просто пути к каталогам). для каждой строки, генерируемой программой, он оставляет только один файл из первого каталога (первый встретившийся), но разбивает её на несколько строк так, чтобы в каждой получившейся строке было только по одному файлу из второго каталога. например, строку dir1/file1 dir1/file2 dir2/file1 dir2/file2 он заменит на две строки: dir1/file1 dir2/file1 dir1/file1 dir2/file2 и, конечно, строки, в которых присутствуют только файлы из первого или только из второго каталога, игнорируются.

PHP вставка части изображения

#php #изображения #gd #imagick

                    
Есть шаблон в PNG 


И есть скриншот



Средствами PHP нужно:

а) Обрезать (изменить размер?) скриншот под размеры экрана шаблона (экран вырезан,
он прозрачный).

б) Придать перспективу скриншоту.

в) Вставить скриншот на прозрачную область шаблона.

Что нужно использовать - GD, Imagick? И как вставлять скриншот - по координатам или
по маске экрана шаблона?
    


Ответы

Ответ 1



Я думаю, стоит использовать ImageMagick. Он умеет искажать в перспективе, по четырём точкам – что вам и нужно. И вот примеры искажений на php – вам понадобится Bilinear: //Example 5 - Bilinear $imagick = new \Imagick(realpath($this->control->getImagePath())); $points = array( 0, 0, 25, 25, # top left 176, 0, 126, 0, # top right 0, 135, 0, 105, # bottom right 176, 135, 176, 135 # bottum left ); $imagick->setImageBackgroundColor("#fad888"); $imagick->setImageVirtualPixelMethod(\Imagick::VIRTUALPIXELMETHOD_BACKGROUND); $imagick->distortImage(\Imagick::DISTORTION_BILINEAR, $points, true); header("Content-Type: image/jpeg"); echo $imagick; Понадобятся 4 точки из исходного изображения – просто углы скриншота, и 4 точки, в которые они должны после искажения попасть – границы области экрана в PNG. Ваш скрин не совсем хорош пропорциями: он квадратный, а у экрана iPad mini экран 4:3 (1024:768). Если вписывать по ширине, снизу останется пустое место. Если по высоте, край пропадёт из виду. Просто вписать – растянется в высоту.

вторник, 31 марта 2020 г.

Оставить только необходимые цвета с Bitmap

#c_sharp #net #изображения #bitmap #обработка_изображений


Как в Bitmap оставить только необходимые цвета пикселей, а остальные превратить,
например, в чёрный цвет?

Конечно, хотелось бы решение пошустрей.
    


Ответы

Ответ 1



Самый простой вариант - через GetPixel и SetPixel, но будет работать довольно медленно. Лучше использовать Scan0 и преобразовать картинку в массив intов, соответствующих цвету каждого пикселя - для этого подходит формат PixelFormat.Format32bppArgb - в нём цвета представлены 4 байтами и в intе тоже 4 байта. Ниже код обработки на VB.NET, его можно легко переписать на C#. Этот код заменяет один цвет на другой, но позволяет при сравнении игнорировать альфа-канал (и сохранять его при замене). Если нужно какое-либо ещё условие, то надо заменить соответствующее сравнение и присваивание. Public Shared Sub ReplaceColor(ByVal Bmp As Bitmap, ByVal OldColor As Color, ByVal NewColor As Color, Optional ByVal IgnoreAlpha As Boolean = False) Dim BmpData As BitmapData = Bmp.LockBits(New Rectangle(Nothing, Bmp.Size), ImageLockMode.ReadWrite, PixelFormat.Format32bppArgb) Dim ArgbData(BmpData.Stride * BmpData.Height / 4 - 1) As Integer Dim Mask As Integer = If(IgnoreAlpha, (1 << 24) - 1, -1), NotMask As Integer = Not Mask Dim OldVal As Integer = ((((((CInt(OldColor.A) << 8) Or OldColor.R) << 8) Or OldColor.G) << 8) Or OldColor.B) And Mask Dim NewVal As Integer = ((((((CInt(NewColor.A) << 8) Or NewColor.R) << 8) Or NewColor.G) << 8) Or NewColor.B) And Mask Marshal.Copy(BmpData.Scan0, ArgbData, 0, ArgbData.Length) For Q As Integer = 0 To ArgbData.Length - 1 If (ArgbData(Q) And Mask) = OldVal Then ArgbData(Q) = (ArgbData(Q) And NotMask) Or NewVal Next Q Marshal.Copy(ArgbData, 0, BmpData.Scan0, ArgbData.Length) Bmp.UnlockBits(BmpData) End Sub

воскресенье, 29 марта 2020 г.

Не изменяется разрешение изображения

#python #изображения #opencv


На вход дается картинка с разрешением 2560x1440 так:

image = cv2.VideoCapture('image.jpg')
image.set(3, 640)
image.set(4, 480)
print(image.get(3),'x',image.get(4))


но метод set разрешение картинки не меняет.

Какое может быть ещё решение?
    


Ответы

Ответ 1



Вы неправильно используете функцию cv2.VideoCapture() - она предназначена для чтения видеопотока. Если вам нужно прочитать и изменть разрешение одного изображения - это можно сделать так: # читаем исходную картинку In [79]: img = cv2.imread(r'D:\download\lena.jpg') # разрешение In [80]: img.shape Out[80]: (512, 512, 3) # меняем разрешение и сохраняем в переменную `new` In [81]: new = cv2.resize(img, (100, 100)) # разрешение после изменения разрешения In [82]: new.shape Out[82]: (100, 100, 3) Чтобы прочитать изображение по интернет-ссылке: url = 'http://...' cap = cv2.VideoCapture(url) ret,img = cap.read()

воскресенье, 15 марта 2020 г.

android ImageView разметка

#android #xml #изображения #разметка


Доброго времени суток. Подскажите, можно ли используя только лишь Layout-ы, не используя
Surface, Canvas и прочее, сделать подобное ( см. аттач )? Имеется ввиду именно расположение
контроллов с поддержкой landscape. Спасибо!

    


Ответы

Ответ 1



Да, можно. Нужна комбинация 5-6 (может и больше) вложенных друг в друга лейаутов. На верхнем уровне LinearLayout с горизонтальной ориентацией, далее в него 2 вложенных LinearLayout один с аватаркой, а второй (справа) содержащий все остальное. В правом надо будет организовать RelativeLayout, где слева большой ImageView а справа снизу Button. Мелкие ImageView сгруппировать в TableView с двумя строчками, в каждой строчке еще по одному RelativeLayout Это как бы версия, возможно она не сработает, а может и сработает. Но смысл простой - комбинацией различных типов лейаутов всегда можно нарисовать практически все что угодно. Еще ни разу не было, чтобы я не смог нарисовать какой угодно сложный набор. Дерзайте. Update Большой круг с фотиком можно например сделать так: Где drawable/ball: В итоге получится примерно так:

Ответ 2



А можно и без 5-6 наложений, надо всего лишь использовать RelativeLayout. Делал на скорую руку, так что сильно не пинайте. Update Для этих кругов используйте стиль из ответа @Barmaley и подключайте его через android:background

воскресенье, 8 марта 2020 г.

Библиотека под unix для работы с изображениями

#cpp #изображения #unix


Подскажите пожалуйста либу под unix, которая позволит выполнять все функции с изображениям:
обрезать, склеивать, переворачивать, и т.д.

Желательно уже скомпилированную и с описанным API.
    


Ответы

Ответ 1



вопрос не по стандартам, но http://www.boost.org/doc/libs/1_61_0/libs/gil/doc/index.html http://www.imagemagick.org/Magick++/Image++.html - с чем в этом примере вы не смогли разобраться? еще более высокоуровневая либа http://cimg.eu/ что значит "уже скомпилированную"? если у вас проблемы со сборкой библиотеки с нуля - для убунты есть готовый пакет libmagick++-dev

WPF. Image. Не отображает картинку

#wpf #изображения


Есть картинка 
В конструкторе окна оно ее видит и отображает, при запуске программы - нет. Если
инициализировать ее в конструкторе класса - пишет не удается найти ресурс, но как это,
если в окне она ЕСТЬ!!!??? Помогите плиз!
    


Ответы

Ответ 1



Исходя из /bin/debug/, думаю, вы делаете что-то не то. Для начала, картинку нужно добавить в проект: Убедитесь, что в качестве Build Action указано Resource, и отключено копирование в выходной каталог: Теперь картинку можно подключать через путь внутри проекта: Обратите внимание, что в проекте картинка лежит в каталоге Resources, и это соответствует пути в pack URI.

суббота, 7 марта 2020 г.

SASS, задать высоту изображению, исходя из его ширины

#css #изображения #sass


Изображение должно занимать 100% ширины блока. Блок резиновый, до определённых моментов.
Мне нужно, чтобы высота изображения была в 3,3 раза меньше, чем ширина. Как это задать
в SASS?
    


Ответы

Ответ 1



Вариант с img {position: absolute;} .container { max-width: 400px; width: 100%; } .image { height: 0; padding-bottom: 30%; position: relative; width: 100%; } img { display: block; height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
Или смотреть на jsfiddle Вариант с инлайновым background-image .container { max-width: 400px; width: 100%; } .image { background-position: 50% 50%; background-size: cover; height: 0; padding-bottom: 30%; position: relative; width: 100%; }
Или смотреть на jsfiddle

Ответ 2



Можно сделать вот так: .wrapper { width: 100%; } .wrapper-inner { position: relative; height: 0; border: none; } .ratio-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #eee; } .xwrapper { padding-top: 30.30%; /* 100% ширины делим на 3.3 */ } img{ max-height: 100% }


среда, 4 марта 2020 г.

Преобразование с помощью android studio фона в различное форматы разрешения

#android #android_studio #изображения


Можно ли и как с помощью android Studio загрузить картинку фона в приложении , чтобы
она преобразовалась сразу в форматы ldpi, mdpi, hdpi, xhdpi,xxhdpi,xxxhdpi
и какие разрешения при этом должны быть
    


Ответы

Ответ 1



С помощью плагина для Android Studio или IntelliJ IDEA Android Drawable Importer

вторник, 25 февраля 2020 г.

Какого цвета больше на картинке.

#php #изображения #imagick


Допустим есть несколько изображений. Нужно для них сгенерировать фон. 

Для первой картинки очевидно что он должен быть оранжевым, для второго темно-серым,
для третьего не понятно)

Как програмно узнать (желательно imagemagick) какого цвета больше на картинке?
    


Ответы

Ответ 1



Конвертнуть в indexed color формат, уменьшив число цветов до 256 или ещё меньше. imagemagick convert в histogram сосчитает кол-во упоминаний этих цветов, возьмите оттуда максимум. Вот командная строка, которой я получил цвета для ваших примеров: convert image.jpg -format %c -depth 8 histogram:info:histogram_image.txt && sort -n histogram_image.txt | tail -1 Для ваших трёх изображений (вырезал из примера), «победили» следующие цвета: Вот так выглядит 10-пиксельная рамка соотв. цветов с исходными изображениями:

Ответ 2



Сталкивался уже с такой задачей. В итоге получилась такая функция getDominantColors: // Функция, которая определяет "расстояние" между объектами function getDistance($arr1, $arr2, $l) { // Определяется "расстояние машины такси" — так быстрее, но для более точного результата желательно использовать евклидому метрику $s = 0; for($i = 0; $i < $l; ++$i) $s += $arr1[$i] > $arr2[$i] ? ($arr1[$i] - $arr2[$i]) : ($arr2[$i] - $arr1[$i]); return $s; } /* Сама функция, которая определяет доминирующие цвета Значения, передаваемые функции: $url — путь к картинке на сервере $amount — количество цветов, которые надо определить $sort — сортировать ли цвета по убыванию встречаемости на картинке $maxPreSize — максимальный размер уменьшаемой картинки (подробнее чуть дальше) $epselon — минимальное суммарное отклонение, необходимое для выхода из цикла */ function getDominantColors($url, $amount = 1, $sort = true, $maxPreSize = 50, $epselon = 1) { // Определяем, существует ли указанный файл. Если нет, то выдаём ошибку. if(!file_exists($url)) return false; // Определяем размер картинки, если это картинка. $size = getimagesize($url); if($size === false) return false; $width = $size[0]; $height = $size[1]; // Определяем формат изображения из заголовка файла и проверяем, есть ли функция, которая может это изображение открыть. Если нет, значит файл — не картинка, и выдаём ошибку. $format = strtolower(substr($size['mime'], strpos($size['mime'], '/') + 1)); if($format == 'x-ms-bmp') $format = 'wbmp'; $func = 'imagecreatefrom'.$format; if(!function_exists($func)) return false; $bitmap = @$func($url); if(!$bitmap) return false; // Здесь мы уменьшаем исходную картинку, чтобы иметь дело не со всеми пикселями, а только с некоторыми. Это значительно увеличивает скорость алгоритма. Чем меньше размер — тем меньше точность. $newW = $width > $maxPreSize ? $maxPreSize : $width; $newH = $height > $maxPreSize ? $maxPreSize : $height; $bitmapNew = imagecreatetruecolor($newW, $newH); // Для большей точности надо использовать функцию imageCopyResambled, но она тратит очень много времени, поэтому используется быстрая и грубая функция imageCopyResized. imageCopyResized($bitmapNew, $bitmap, 0, 0, 0, 0, $newW, $newH, $width, $height); // Заносим цвета всех пикселей в один массив $pixelsAmount = $newW * $newH; $pixels = Array(); for($i = 0; $i < $newW; ++$i) for($j = 0; $j < $newH; ++$j) { $rgb = imagecolorat($bitmapNew, $i, $j); $pixels[] = Array( ($rgb >> 16) & 0xFF, ($rgb >> 8) & 0xFF, $rgb & 0xFF ); } imagedestroy($bitmapNew); // Выбираем случайные пиксели для установки центроидов в них $clusters = Array(); $pixelsChosen = Array(); for($i = 0; $i < $amount; ++$i) { // Желательно не ставить несколько центроидов в одну точку do { $id = rand(0, $pixelsAmount - 1); } while(in_array($id, $pixelsChosen)); $pixelsChosen[] = $id; $clusters[] = $pixels[$id]; } $clustersPixels = Array(); $clustersAmounts = Array(); // Начинаем цикл do { // Обнуляем хранилище пикселей, принадлежащих текущему центроиду и их счётчик for($i = 0; $i < $amount; ++$i) { $clustersPixels[$i] = Array(); $clustersAmounts[$i] = 0; } // Проходимся по всем пикселям и определяем ближайший к ним центроид for($i = 0; $i < $pixelsAmount; ++$i) { $distMin = -1; $id = 0; for($j = 0; $j < $amount; ++$j) { $dist = getDistance($pixels[$i], $clusters[$j], 3); if($distMin == -1 or $dist < $distMin) { $distMin = $dist; $id = $j; } } $clustersPixels[$id][] = $i; ++$clustersAmounts[$id]; } // Перемещаем центроид в центр масс пикселей, принадлежащих ему, заодно вычисляем, насколько он сместился $diff = 0; for($i = 0; $i < $amount; ++$i) { if($clustersAmounts[$i] > 0) { $old = $clusters[$i]; for($k = 0; $k < 3; ++$k) { $clusters[$i][$k] = 0; for($j = 0; $j < $clustersAmounts[$i]; ++$j) $clusters[$i][$k] += $pixels[$clustersPixels[$i][$j]][$k]; $clusters[$i][$k] /= $clustersAmounts[$i]; } // Будем сравнивать максимальное отклонение $dist = getDistance($old, $clusters[$i], 3); $diff = $diff > $dist ? $diff : $dist; } } } while($diff >= $epselon); // Сортировка получившихся кластеров (не помню как метод называется) if($sort and $amount > 1) for($i = 1; $i < $amount; ++$i) for($j = $i; $j >= 1 and $clustersAmounts[$j] > $clustersAmounts[$j - 1]; --$j) { $t = $clustersAmounts[$j - 1]; $clustersAmounts[$j - 1] = $clustersAmounts[$j]; $clustersAmounts[$j] = $t; $t = $clusters[$j - 1]; $clusters[$j - 1] = $clusters[$j]; $clusters[$j] = $t; } // Значение цвета — величина целая, поэтому её надо округлить for($i = 0; $i < $amount; ++$i) for($j = 0; $j < 3; ++$j) $clusters[$i][$j] = floor($clusters[$i][$j]); // Очищаем память imagedestroy($bitmap); // Возвращаем массив, который содержит доминирующие цвета. Каждый цвет — массив, состоящий из 3-х элементов — красный, зелёный и синий канал цвета. return $clusters; }

понедельник, 24 февраля 2020 г.

Растровая картинка как фон для path в SVG

#изображения #svg #png #path


Есть задача установить значение .test {fill: url(image.png)} для 

Гугл уже кипит от моих запросов по этой теме. Пробовал и clippath и mask но почему
то не выходит. Подскажите, что не так делаю или как решить данную задачу?
    


Ответы

Ответ 1



Пробовал и clippath и mask но почему то не выходит. Подскажите что не так делаю или как решить данную задачу? clipPath Представьте, что у вас есть лист с картинкой, вы накладываете на неё шаблон и вырезаете ножом по шаблону. Всё лишнее отбрасываете и используете только вырезанную часть картинки. Вот так работает clippath. В качестве шаблона выступает фигура SVG Далее вы указываете ссылку на изображение из которого вырезаете фигуру. Обратите внимание, что тег SVG используется здесь, как свойство CSS clip-path="url(#clip-ff)"
UPD 26.11.2017 Пример SVG clipPath для оформления шапки сайта .banner_1 { min-height: 100px; background-color: #41dddb; } .banner_2 { background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg); background-size:cover; } mask Принцип действия здесь другой в отличии от clipPath. Маска это трафарет сквозь который вы смотрите на рисунок, то. что вы видите сквозь трафарет, будет выведено на экран. В качестве трафарета может выступать любая фигура svg: rect, polygon, polyline, circle, ellipse, pathили их совместная комбинация. маску до её применения обязательно прячут в секции Ниже код, использования маски:
Обратите внимание, что обязательно нужно задать цвет заполнения маски: style="fill:white;stroke-width:1;stroke:white" Белый цвет - полная прозрачность, чёрный -маска непрозрачна. Другие цвета заполнения маски будут работать, как свойство opacity. Например: серый цвет - даёт полупрозрачность. Комбинированная маска Состоит из двух фигур SVG: прямоугольника (rect), у которого цвет заполнения отличается от white и black и поэтому мы получаем полупрозрачную область фона. path - шестиугольник с белым цветом заполнения - полностью прозрачная область. Обводка (stroke) шестиугольника оттенок серого.
Более подробно, с примерами, - Практические примеры применения масок svg

Ответ 2



Пожалуй только через defs и инлайново:

воскресенье, 23 февраля 2020 г.

Распознавание символов и работа с изображенями

#c_sharp #изображения #нейронные_сети


Имеется нейронная сеть, способная распознавать символы. При загрузке рисунка из Paint
размеров 150 на 150 всё работает нормально.Фон здесь белый, буква нарисована чёрным цветом.



При загрузке картинки ( также 150 на 150) с прозрачным фоном программа работает "наоборот"

Для удобства понимания вывел цвета пикселей( во втором случае первый пиксель, который
является прозрачным, почему-то распознаётся как чёрный, а чёрный соответственно не
является почему-то чёрным).

Первая и вторая картинка имеет одинаковый формат .png

Каким образом можно настроить программу для работы с изображением на прозрачном фоне?

Метод считывания картинки

public void get(Bitmap map) 
    {
        for (int x = 0; x < mbut.GetLength(0); x++)
        {
            for (int y = 0; y < mbut.GetLength(1); y++)
            {
                Color col = map.GetPixel(x, y);
                if (col.R == 0 && col.B == 0 && col.G == 0)
                    mbut[x, y] = true;
                else label9.Text = "Цвет пикселя номер " + x + ":" + y+" "+ Convert.ToString(map.GetPixel(x, y));
            }
        }     
        label10.Text = "Цвет первого пикселя: " + Convert.ToString(map.GetPixel(0, 0));
    }


Метод прорисовки весов

 public void draw(int n)
    {
        using (Bitmap map = new Bitmap(150, 150))
        {
            for (int x = 0; x < weight.GetLength(0); x++)
            {
                for (int y = 0; y < weight.GetLength(1); y++)
                {
                    if (weight[x, y] > 1)
                    {                            
                        map.SetPixel(x, y, Color.Black);
                    }         
                }
            }
            map.Save(String.Format("Pictures/{0}.png",n), System.Drawing.Imaging.ImageFormat.Png);
        }
    }

    


Ответы

Ответ 1



Предполагаю что проблема в работе с каналами цветного изображения в цветовой схеме ARGB. Когда Paint сохраняет изображение, он приводит её к RGB и проблем не возникает. При других редакторах цветовая схема остается ARGB. Вот какая складывается ситуация: Вы берете цветовой схемы, в первом случае это RGB, и по каналу R определяете черный это или не черный. В итоге инициализация проходит успешно. Во втором случае с схемой ARGB, в которой изображение имеет прозрачность, первым каналом является A - alpha(оно-же прозрачность) вы пытаетесь по прозрачным цветам определить черный и сталкиваетесь с ситуацией когда все пиксели которые прозрачны - получают черный цвет а те которые не прозрачны остаются белыми. В этом и кроется секрет вашей хитроумной инверсии :)

Ответ 2



if (col.R == 0 && col.B == 0 && col.G == 0) Не хватает проверки && col.A != 0. Видимо, paint сохранил прозрачный фон всеми ноликами.

воскресенье, 16 февраля 2020 г.

Распознавание символов и работа с изображенями

#c_sharp #изображения #нейронные_сети


Имеется нейронная сеть, способная распознавать символы. При загрузке рисунка из Paint
размеров 150 на 150 всё работает нормально.Фон здесь белый, буква нарисована чёрным цветом.



При загрузке картинки ( также 150 на 150) с прозрачным фоном программа работает "наоборот"

Для удобства понимания вывел цвета пикселей( во втором случае первый пиксель, который
является прозрачным, почему-то распознаётся как чёрный, а чёрный соответственно не
является почему-то чёрным).

Первая и вторая картинка имеет одинаковый формат .png

Каким образом можно настроить программу для работы с изображением на прозрачном фоне?

Метод считывания картинки

public void get(Bitmap map) 
    {
        for (int x = 0; x < mbut.GetLength(0); x++)
        {
            for (int y = 0; y < mbut.GetLength(1); y++)
            {
                Color col = map.GetPixel(x, y);
                if (col.R == 0 && col.B == 0 && col.G == 0)
                    mbut[x, y] = true;
                else label9.Text = "Цвет пикселя номер " + x + ":" + y+" "+ Convert.ToString(map.GetPixel(x, y));
            }
        }     
        label10.Text = "Цвет первого пикселя: " + Convert.ToString(map.GetPixel(0, 0));
    }


Метод прорисовки весов

 public void draw(int n)
    {
        using (Bitmap map = new Bitmap(150, 150))
        {
            for (int x = 0; x < weight.GetLength(0); x++)
            {
                for (int y = 0; y < weight.GetLength(1); y++)
                {
                    if (weight[x, y] > 1)
                    {                            
                        map.SetPixel(x, y, Color.Black);
                    }         
                }
            }
            map.Save(String.Format("Pictures/{0}.png",n), System.Drawing.Imaging.ImageFormat.Png);
        }
    }

    


Ответы

Ответ 1



Предполагаю что проблема в работе с каналами цветного изображения в цветовой схеме ARGB. Когда Paint сохраняет изображение, он приводит её к RGB и проблем не возникает. При других редакторах цветовая схема остается ARGB. Вот какая складывается ситуация: Вы берете цветовой схемы, в первом случае это RGB, и по каналу R определяете черный это или не черный. В итоге инициализация проходит успешно. Во втором случае с схемой ARGB, в которой изображение имеет прозрачность, первым каналом является A - alpha(оно-же прозрачность) вы пытаетесь по прозрачным цветам определить черный и сталкиваетесь с ситуацией когда все пиксели которые прозрачны - получают черный цвет а те которые не прозрачны остаются белыми. В этом и кроется секрет вашей хитроумной инверсии :)

Ответ 2



if (col.R == 0 && col.B == 0 && col.G == 0) Не хватает проверки && col.A != 0. Видимо, paint сохранил прозрачный фон всеми ноликами.

пятница, 14 февраля 2020 г.

Удалить ненужные фотографии

#windows #изображения #любой_язык


Суть вопроса: есть 5000 фотографий, есть список в excel, точных названий нужных фотографий
(их 1000)

Как можно удалить все кроме этих 1000 фотографий? Не перерывая в ручную
    


Ответы

Ответ 1



Простейший путь - выделяем в Экселе нужный список файлов, Ctrl-C :), вставляем в обычном текстовом редакторе в файл, скажем, list.txt - чтоб по одному в строке. Дальше - одна команда for /F %f in (list.txt) do del /Q %f Примерно так... И никакого программирования не нужно :) Если имена файлов с пробелами - можно, например, воспользоваться ключом delims и кавычками - словом, смотрите, что напишет for /?... Но рекомендовал бы сначала убедиться, что все верно - for /F %f in (list.txt) do echo del /Q %f а то мало ли... Удаление - оно такое, не самое безопасное :) P.S. Простите за лирическое отступление - но, похоже, зря теперь не учат работать в командной строке, как когда-то во времена DOS с этого начинали... И даже Far или там FileCommander далеко не на каждой машине найдешь. А ведь просто в командной строке можно много что сделать...

четверг, 13 февраля 2020 г.

C# отрисовываются только два PictureBox

#c_sharp #изображения #picturebox


Есть несколько PictureBox, которые перерисовываются 25 раз в секунду. Проблема в
том, что изображение отображается только на первых двух, для которых было запущено
обновление 25 раз в секунду. Как можно решить эту проблему? Проверял и в WinForms,
и в WPF - результат одинаков.

Вот кусочек кода:

redrawTimer = new System.Threading.Timer(TimerTick, null, 1000, 40);
...
private void TimerTick(object stateInfo)
{
    using (Graphics g = Graphics.FromImage(pictureBox.Image))
        g.DrawImage(System.Drawing.Image.FromFile(fileName), 0, 0,
            pictureBox.Image.Width, pictureBox.Image.Height);
}


Отрисовывались изображения по размеру меньше или равные размеру bitmap, на который
они отрисовывались. Кстати, может кто-то знает быстрый метод сжатия картинки? Стандартный
очень долгий.

Если быть конкретней - есть 4 picturebox, на 3 из которых отрисовываются различные
изображения, а четвёртый клонирует на свой bitmap изображение из одного из этих трёх.
Было выявлено, что при не отрисовке  изображения на preview-picturebox, основной picturebox
успешно клонирует и выводит с них изображение. Во всех четырёх picturebox в image были
bitmap одинакового размера, загнанные в режиме zoom, так как превосходили размерами
сами picturebox.
    


Ответы

Ответ 1



Прежде всего, попробуйте в конце функции-таймера добавить вызов pictureBox.Invalidate() или pictureBox.Refresh(), чтобы заставить картинку перерисоваться. Если не поможет, то читайте далее. Точно не знаю, чего именно не хватает вашей программе, поэтому предлагаю несколько вариантов. Вариант 1. Если вы "уперлись" в пропускную способность ввода-вывода. Image.FromFile(fileName) возвращает Bitmap, который также требуется закрывать. Добавьте второй using в код. Операция чтения файла с диска - довольно "тяжелая", а выполняете вы ее в потоке UI. Отсюда - "подвисания" этого потока 100 раз в секунду. Лучше бы делать это в фоновом потоке. Получается код вроде такого: private async void TimerTick(object unused) { using (var image = await Task.Run(() => System.Drawing.Image.FromFile(fileName))) using (var g = Graphics.FromImage(pictureBox.Image)) g.DrawImage(image, 0, 0, pictureBox.Image.Width, pictureBox.Image.Height); } Вариант 2. Если вы "уперлись" в способность процессора перегонять туда-сюда байты. Обратите внимание, как происходит отображение картинки на экране монитора. Сначала вы загружаете ее из файла. Потом - копируете ее в другую картинку. Потом PictureBox внутри себя еще раз выполняет копирование. Если дело действительно в скорости работы процессора/системной шины/памяти, то от одного копирования можно избавиться. Дело в том, что если загружать картинку не по имени файла, а из потока - то, при условии что картинка в файле находится в допустимом формате, картинка будет всегда оставаться "синхронизированной" с файлом. Какие форматы допустимы, я уже не помню, но 32-битный BMP в таком режиме точно поддерживается. var stream = System.IO.File.OpenRead(filename); pictureBox.Image = System.Drawing.Image.FromStream(stream); // а в таймере - только Invalidate() Вариант 3. Если ничего не помогает Можно использовать не 4 таймера, а 1, который будет обновлять картинки по-очереди, если вы еще не сделали этого. В таком случае картинки будут обновляться равномерно, даже ценой "просадки" производительности. Если вы используете асинхронный таймер (наподобие того, который в варианте 1), имеет смысл сделать ему защиту от повторного срабатывания, чтобы одна и та же картинка не загружалась несколько раз одновременно. Это не поможет удержаться на уровне 25 кадров в секунду - зато поможет снижать частоту кадров без тормозов и подвисаний. Кстати о тормозах и лагах. Имеет смысл плавно снижать частоту таймера вместо простого выкидывания кадров - для повышения плавности движения. Измеряете время, затраченное на загрузку кадра при помощи System.Diagnostics.Stopwatch, берете максимальное время за последние 5 кадров - и выставляете его в качестве периода таймера. Варианты 1 и 2 можно попытаться объединить - надо создать картинку на основе MemoryStream, а в него уже перечитывать данные из файла в фоновом потоке (не в таймере!). Точнее, лучше перечитывать в его внутренний буфер, не трогая сам поток. (Опять-таки, это будет работать только для 32х-битного BMP) Как-то так: var buffer = File.ReadAllBytes(filename); pictureBox.Image = FromStream(new MemoryStream(buffer)); ... using (new stream = File.OpenRead(filename)) stream.Read(buffer, 0, buffer.Length); pictureBox.Invalidate(); Еще вопрос: а сами файлы точно успевают обновляться 25 раз в секунду? Если нет, то имеет смысл наблюдать за файлами с помощью FileSystemWatcher, и обновлять картинки только после изменений в файлах. Ну и вопрос напоследок: откуда вообще берутся на диске файлы, которые обновляются 25 раз в секунду? Нельзя ли их получить минуя диск? Кстати, нельзя ли их положить на диск в памяти (т.н. ramdrive)?

Ответ 2



Задачка для видеонаблюдения если не ошибаюсь? Клейте 4 кадра в один picturebox. Давно не работал с WinForms, надо бы поэкспериментировать, но моё субъективное мнение подсказывает что склеить 4 кадра в один и вывести в один контрол будет быстрее чем выводить 4 кадра в 4 контрола. Поправьте меня если я ошибаюсь

среда, 12 февраля 2020 г.

Загрузка изображения в буфер

#java #изображения


Помогите найти ошибку

package com.example.test;

import java.awt.Color;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;


public class LoadImage {

          /**  подгружаем картику    */

     public static BufferedImage loadImage() throws IOException{

         return ImageIO.read(new File ("1.bmp"));


    }
      /**  Переводим в матрицу   */
    public static void  convertToMatrix(BufferedImage image){

        int w = image.getWidth();
        int h = image.getHeight();

        System.out.println(w);
        System.out.println(h);

    }

}




package com.example.test;
public static void main(String[] args) {
 try {
        LoadImage.convertToMatrix(LoadImage.loadImage());
    } catch (Throwable e) {
        e.printStackTrace();
    }


}


Вот код ошибки:

javax.imageio.IIOException: Can't read input file!
    at javax.imageio.ImageIO.read(ImageIO.java:1301)
    at com.example.test.LoadImage.loadImage(LoadImage.java:16)
    at com.example.test.Test.main(Test.java:10)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at com.intellij.rt.execution.application.AppMain.main(AppMain.java:147)

Process finished with exit code 0


Я так понимаю, оно не видит картинку?
    


Ответы

Ответ 1



Вам же всё написал компилятор. IOException - проверяемое исключение. Вы обязаны либо обернуть его в try/catch либо дописать в функцию throws Exception. В данном примере 2 вариант не походит, поэтому пишите как-то так: public static void main(String[] args) { try { LoadImage.convertToMatrix(LoadImage.loadImage()); } catch (Throwable e){ e.printStackTrace(); } }

Ответ 2



В дополнение к предыдущему ответу. IDE - это штука, не только помогающая писать код. Она ещё и обучает, и в режиме реального времени отвечает на вопросы уровня того, что был задан в первой редакции. Например, так: Вы можете самостоятельно попробовать оба варианта исправления, посмотреть как они делаются (код будет сгенерирован автоматически) и к чему приведут. javax.imageio.IIOException: Can't read input file! Я так понимаю, оно не видит картинку? Сложно как-то по-другому интерпретировать это сообщение...

суббота, 8 февраля 2020 г.

Как с помощью стилей добиться треугольных скосов в блоках?

#javascript #html #css #css3 #изображения


Приветствую! Подскажите плиз, как с помощью стилей добиться таких скосов в блоках
как на картинках 1 и 2, причем, чтобы текст мог быть разной высоты - это вообще возможно
или с помощью скриптов только?





.tech,
.new {
  background: yellow;
  width: 200px;
  margin: 10px 0;
}
техника
новинки


Ответы

Ответ 1



Вот еще один вариант реализации этой задачи с использованием transform: skew (у тестовых примеров, фигуры подсвечены красным для ясности): .item { position: relative; display: inline-block; background: #000; color: #fff; padding: 5px 25px; margin: 0 10px 10px 0; } .has_right_arr:after { position: absolute; display: block; content: ''; top: 0; right: -7px; width: 20px; height: 50%; background: #000; -ms-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg); } .has_right_arr:before { position: absolute; display: block; content: ''; bottom: 0; right: -7px; width: 20px; height: 50%; background: #000; -ms-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); } .has_right_skew:after { position: absolute; display: block; content: ''; bottom: 0; right: -7px; width: 20px; height: 100%; background: #000; -ms-transform: skew(-25deg); -webkit-transform: skew(-25deg); transform: skew(-25deg); } .debug:after { background: rgba(255, 0, 0, 0.5); } .debug:before { background: rgba(255, 0, 0, 0.5); } Hello world! Debug
Hello everyone! Debug
Hello world!
Hello everyone! Фиддл: http://jsfiddle.net/IonDen/ey4zek1e/

Ответ 2



Вариант для современных браузеров ( уже задавали подобные вопросы, но там были другие фигуры, поэтому повторюсь) Используйте css свойство clip-path. Поддерживает и треугольники, круги, квадраты, ромбы и другие многоульники Тут можно поиграться Из плюсов Очень хорошая кастомизация Без доп элементов Не так много кода ( с генератором вообще на раз два делается ) UPD Для кроссбраузерности, лучше не парится и нарисовать нужные бэкграунды. В старых браузерах по другому треугольники не сделать

Ответ 3



Доброго дня! Треугольник в левом верхнем углу (как фигура для "Техника спецназначения"): #triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }
Фигура для "Новинки": #triangle-right { width: 0; height: 0; border-top: 40px solid transparent; border-left: 50px solid red; border-bottom: 40px solid transparent; }
Если немного напрячь разум, можно применить эти трюки к псевдоэлементам и вообще избавиться от дополнительных блоков в HTML. Добавлю еще: углы регулируются шириной border-ов. Здесь взят ответ на Ваш вопрос, там же есть много других полезных фигур на CSS. P.S.: Все работает при любом размере блоков .tech, .new { background: yellow; width: 200px; margin: 10px 0; height: 30px; line-height: 30px; padding: 0 15px; position: relative; } .tech::after { content: ' '; width: 0; height: 0; border-top: 30px solid yellow; /* равен высоте блока */ border-right: 15px solid transparent; /* регулирует угол скоса */ position: absolute; top: 0; left: 100%; } .new::after { content: ' '; width: 0; height: 0; border-top: 15px solid transparent; /* половина высоты блока */ border-left: 15px solid yellow; /* половина высоты блока */ border-bottom: 15px solid transparent; /* регулирует угол скоса */ position: absolute; top: 0; left: 100%; }
техника
новинки


Ответ 4



.skos { height:20px; width:120px; padding-left:40px; background:red; line-height:20px; position:relative; } .skos:after{ content:''; border-bottom:30px solid transparent; border-right: 10px solid #fff; position:absolute; right:0; top:0; } /********************/ .right{ width:120px; height:20px; margin:50px 0; background:red; position:relative; text-align:center; } .right:after{ content:''; border:10px solid transparent; border-left:10px solid red; position:absolute; right:-20px; }
menu
menu
да вроде не сложно это ! так надо ?

Ответ 5



Общими усилиями решение найдено! Спасибо за помощь! a { color: #fefefe; font-family: Arial, sans-serif; } .arrow { display: inline-block; background: #666; position: relative; font-size: 15px; line-height: 30px; padding: 0 25px; overflow: hidden; &: after, &: before { content: ''; position: absolute; right: 0; width: 0; height: 0; border: 50px solid transparent; } } .arrow:after { top: 50%; border-bottom: 0; border-right: 25px solid #fff; } .arrow:before { content: ''; bottom: 50%; border-top: 0; border-right: 25px solid #fff; }