python生成web安全色圖片html

html安全色是指不考慮操作系統和一些機型,對比度可以明顯區分的顏色。

第一次用opencv庫,花了幾小時邊學邊練,生成1920*1080分辨率的桌面背景圖片,圖片有點醜,但是可以通過改python的部分值,得到不同分辨率的桌面背景。對於做前端而言能夠有所幫助。當然網上有專門的網站,還可以在潘通上查找對應顏色,但是對於網絡不順暢或者經常選色的專業來說,還是有一定用處。

先上圖

代碼如下,帶了一堆註釋便於調試:

#生成html安全色圖片
#2020.4.12:demo
import cv2
import numpy as np
##cv2顏色順序爲BGR

##圖像大小
img_w=1920
img_h=1080
##cv2字體設置
font = cv2.FONT_HERSHEY_TRIPLEX
##字體在圖中的相對移動位置
wx=5
wy=40
# 創建一個寬1920高1080的黑色畫布,RGB(0,0,0)即黑色
np.set_printoptions(threshold=1000)
img=np.zeros((img_h,img_w,3),np.uint8)
##一共216個安全色,每個框大小爲128*72像素,可以用公式計算不同,這裏簡化
for py in range(15):
    for px in range(15):
        cnt=py*15+px  ##安全色計數
        if cnt<216:
            r_x=px*128  ##矩形框x位置
            r_y=py*72   ##矩形框y位置
            w_x=r_x+wx      ##字體x位置
            w_y=r_y+wy      ##字體y位置

            ##從左上到右下RGB按0x33從藍色增加走,共216色
            cr=int(cnt/36)*0x33 ##按傳統RGB順序放置顏色,紅色R
            cg=int(cnt/6%6)*0x33    ##綠色G
            cb=int(cnt%6)*0x33  ##藍色B
            ##字體顏色爲反色,以識別
            wr=0xff-cr
            wg=0xff-cg
            wb=0xff-cb
            ##組成字符顯示
            wf = "#0x" + (("%02x" % cr).upper()) + (("%02x" % cg).upper()) + (("%02x" % cb).upper())
            ##繪製矩形
            # print(cnt)
            print(r_x,"  ",r_y,"  ",w_x,"  ",w_y)
            # print(cr,"  ",cg,"  ",cb)
            # # print(wr,"  ",wg,"  ",wb)
            # print(wf)
            cv2.rectangle(img, (r_x, r_y), (r_x+128, r_y+72), (cb, cg, cr), -1, 4)
            ##增加字體
            # cv2.putText(img, wf, (w_x, w_y), font, 0.6, (wr, wb, wg), 1, 8)
            if cr>0x66 or cg>0x66 or cb>0x66 and cr!=0x00 and cg!=0x00 and cb!=0x00:
                cv2.putText(img, wf, (w_x, w_y), font, 0.6, (0, 0, 0), 1, 8)
            else:
                if cr < 0x66 or cg < 0x66 or cb < 0x66:
                    cv2.putText(img, wf, (w_x, w_y), font, 0.6, (255, 255, 255), 1, 8)
                else:
                    cv2.putText(img, wf, (w_x, w_y), font, 0.6, (0, 0, 0), 1, 8)
        else:
            None
##打logo
logo="Powered by c.x 2020.4"
cv2.rectangle(img, (768, 1008), (1920, 1080), (255, 255, 255), -1, 4)
cv2.putText(img, logo, (1664, 1060), font, 0.6, (0, 0, 0), 1, 8)

cv2.imshow("img", img)
cv2.waitKey(3000) #時間爲毫秒
cv2.imwrite("final.jpg",img)

安全色是指RGB每0X33一跳,每個顏色通道有6種顏色,總共216種顏色組合。

利用cv2,新建畫布,按照計算後每行每列的數量畫矩形,然後將色值的字符貼上去即可,原理非常簡單。

本來計劃用詳細的公式,但是需要調試佔用時間,所以以1080p作爲demo,有興趣可以試試。

自己用的顯示器是4K屏,試了下4K,因爲被縮放填充,所以效果和1080的圖片類似,而且4K不能整除,會有一條邊。


框架雖然不到一小時邊學邊練弄好了,結果發現真正的難題是字符和色塊的對比色纔是困難的。

一來用反色

結果發現是糊的,對比度不是簡單的255減去色框顏色。

然後嘗試了前128分塊

效果好點了,但是3行綠色那完全看不清。

再試了RB的對調

結果慘不忍睹。

中間試了種種,最後回到較簡單的方法,用兩個if嵌套,效果就是第一張那樣。

這個現在還是不明就裏,雖然學色度的時候還認真聽了的。如果有專業的,還請指導。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章