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嵌套,效果就是第一張那樣。
這個現在還是不明就裏,雖然學色度的時候還認真聽了的。如果有專業的,還請指導。