Видимость влияет на выполнение управления DOM?

1118 Это интересная проблема. Чтобы ответить на ваш вопрос, это технически возможно. Да, это возможно. QR-код в вашем вопросе кодирует "5176941.12".

Вот предустановленное изображение, чтобы было проще установить пиксели вручную.

enter image description here

После этого шага я использую Excel, чтобы установить каждый пиксель один за другим. После этого просто наведите свой телефон на экран компьютера. Вот как это выглядит. Если вам нужен лист Excel, вы можете получить его здесь ( https://docs.google.com/spreadsheets/d/18tEhboAULaSJlTjnhdZa0hOrqkUz6WmPOZSpzpSpcUE/edit?usp=sharing ).

enter image description here

Теперь, когда вопрос возможности не существует, как его автоматизировать? Не зная дополнительных дополнительных образцов, сложно сказать наверняка. Однако, основываясь только на этом примере, самый простой подход - просто выровнять сетку 21x21 по вашему обрезанному QR-изображению и заполнить значения, используя порог. А затем передайте это изображение вашему QR-декодеру. QR-код имеет определенный уровень избыточности, поэтому, даже если некоторые пиксели отсутствуют, вы, скорее всего, сможете восстановить исходные данные.


Редактировать

Вот некоторый код на python, который может служить руководством к тому, как вы можете автоматизировать это. Несколько вещей, на которые стоит обратить внимание:

  • Я пропускаю этап обнаружения 3-х ящиков и вручную очень плотно обрезаю его. Если во время захвата есть повороты, вам нужно это исправить.
  • Порог 0,6 необходимо настроить для разных изображений. Прямо сейчас, это «к счастью» работает, хотя есть несколько ошибок. Может случиться так, что у вас никогда не будет действительного qr-кода, если ошибки слишком велики.

Код:

import cv2
import numpy as np

def fill3box(qr):
    qr[0:7,0:7] = 1
    qr[14:21,14:21] = 1
    qr[14:21,0:7] = 1
    qr[0,0:6]=0
    qr[0:6,0]=0
    qr[0:6,6]=0
    qr[6,0:7]=0
    qr[2:5,2:5]=0
    qr[14:21,14:21] = qr[0:7,0:7]
    qr[14:21,0:7] = qr[0:7,0:7]
    return qr

im = cv2.imread('to_process.png')
im = cv2.cvtColor(im,cv2.COLOR_BGR2GRAY)
im = cv2.resize(im,(210,210))

im = 1-((im - im.min())/(im.max()-im.min())) #normalize and adjust contrast
avg=np.average(im)
qr = np.ones((21,21))
w,h = im.shape[:2]
im_orig = im.copy()

im[imavg]=1
for y in range(21):
    for x in range(21):
        x1,y1 = (round(x*w/21),round(y*h/21))
        x2,y2 = (round(x1+10),round(y1+10))

        im_box = im[y1:y2,x1:x2]
        if np.average(im_box)<0.6 and qr[y,x]!=0:#0.6 need tweaking
            qr[y,x]=0

qr = fill3box(qr) #clean up 3 box areas as they need to be fixed
# debug visualization
for x in range(21):
    p1 = (round(x*w/21),0)
    p2 = (round(x*w/21),h)
    cv2.line(im_orig,p1,p2,(255),1)

for y in range(21):
    p1 = (0,round(y*h/21))
    p2 = (w,round(y*h/21))
    cv2.line(im_orig,p1,p2,(255),1)

qr = cv2.resize(qr,(210,210),interpolation=cv2.INTER_NEAREST)

im = (im*255).astype(np.uint8)
qr= (qr*255).astype(np.uint8)
im_orig= (im_orig*255).astype(np.uint8)

cv2.imwrite('im.png',im)
cv2.imwrite('qr.png',qr)
cv2.imwrite('im_orig.png',im_orig)

Обрезанное изображение to_process.png в коде.

enter image description here

Сетка наложена, чтобы показать, как работает этот метод

Пороговое изображение.

enter image description here

Регенерированный QR, обратите внимание, что он все еще работает, даже несмотря на наличие нескольких ошибок.

enter image description here

10
задан Chetan Sastry 9 May 2010 в 05:24
поделиться

2 ответа

Протест: Я конкретно не протестировал это с IE7, но я довольно уверен на основе того, что я знаю о его модели управления DOM.

Свойства Changing CSS (ли display: none или visibility: hidden или what-have-you), не будет влиять на выполнение управления DOM ни в какой версии никакого браузера, с которым я работал. Основной способ улучшить скорость управления DOM состоит в том, чтобы удалить узел (узлы), с которым Вы будете работать от дерева документов, выполнение Ваших манипуляций и добавление их въезжают задним ходом. Это включает отслеживание их последующих одноуровневых узлов, если любой (для использования с insertBefore), который может стать сложным, если Вы работаете с узлами, которые рассеиваются вокруг документа.

Одна техника, которую я видел при выполнении большого количества манипуляций DOM внезапно, должна получить список body дети элемента, удалите их, выполните свои манипуляции (везде, где они падают в дереве документов), и затем повторно добавьте дочерние узлы тела. В зависимости от того, сколько времени Ваши манипуляции DOM берут (который самостоятельно частично зависит от скорости компьютера Вашего посетителя!), это может произвести значимое мерцание. Поэтому сайты, управляющие содержанием через Ajax, будут обычно заменять любое временно удаленное содержание "счетчиком" или загружающий экран.

11
ответ дан 3 December 2019 в 23:52
поделиться

Я не уверен, но удаление его от DOM активного документа, затем управляющего им, действительно улучшает производительность. После того, как все управление сделано, присоедините его назад к DOM документа. Думайте о нем вид о подобном видео буферном свопинге.

2
ответ дан 3 December 2019 в 23:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: