用tkinter開視窗選擇要顯示的圖片及檔名

標題： 用tkinter開視窗選擇要顯示的圖片及檔名。

意思就是，可以在tkinter中開選擇視窗選擇要開啟的圖片，然後顯示圖片和檔名出來。

===分隔線===

今天要來使用tkinter顯示圖片和圖片，直接進入正題吧！

首先，載入以下套件：

import cv2

import numpy as np

import tkinter as tk

from PIL import Image, ImageTk

from tkinter import StringVar, IntVar

from tkinter.filedialog import askopenfilename

然後設定一個tkinter視窗，標題為圖片顯示，大小為450*700。

window = tk.Tk()

window.title('圖片顯示')

window.geometry('450x700')

接著定義一個函數：

def OpenFile():

    #這是圖片檔的路徑

    filename = askopenfilename()

    #用cv2載入圖片，我們不用imread，因為它不支援中文。

    img = cv2.imdecode(np.fromfile(filename,dtype=np.uint8), cv2.IMREAD_COLOR)

    #將cv2的BGR轉成RGB

    img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)

    #重新調整圖片大小

    img=cv2.resize(img,(450,280))

    #將img載入為PIL的格式。

    im = Image.fromarray(img)

    #將img載入到ImageTK中

    photo = ImageTk.PhotoImage(im)

    #設定labelimg為圖片作顯示(下方會提到)

    labelimg.configure(image=photo)

    labelimg.image = photo

    #設定text1為檔名作顯示(下方會提到)

    #filename.split("/")[-1]的意思是，將路徑的/前方砍掉，只留下檔名。

    text1.set(filename.split("/")[-1])

接著於函數下方(函數外面)設定tkinter的Button：

b2 = tk.Button(window, text='open', font=('Arial', 12), width=10, height=1, command=OpenFile)

b2.pack()

注意藍色處，意思就是按下去後執行剛剛的OpenFile函數。

設定剛才OpenFile函數中的text1，為顯示檔名的label。

text1 = StringVar()

label1 = tk.Label(window,textvariable=text1, text='1799', font=('Arial', 12), width=100, height=8)

label1.pack()

設定剛才OpenFile函數中的labelimg，它是顯示圖片用的。 

labelimg = tk.Label(window, image="")

labelimg.pack()

設定視窗為無限循環(一直保持開啟的狀態直到使用者關閉視窗)

window.mainloop()

由上整理出完整的程式碼如下：

import cv2

import numpy as np

import tkinter as tk

from PIL import Image, ImageTk

from tkinter import StringVar, IntVar

from tkinter.filedialog import askopenfilename

window = tk.Tk()

window.title('圖片顯示')

window.geometry('450x700')

def OpenFile():

    #這是圖片檔的路徑

    filename = askopenfilename()

    #用cv2載入圖片，我們不用imread，因為它不支援中文。

    img = cv2.imdecode(np.fromfile(filename,dtype=np.uint8), cv2.IMREAD_COLOR)

    #將cv2的BGR轉成RGB

    img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)

    #重新調整圖片大小

    img=cv2.resize(img,(450,280))

    #將img載入為PIL的格式。

    im = Image.fromarray(img)

    #將img載入到ImageTK中

    photo = ImageTk.PhotoImage(im)

    #設定labelimg為圖片作顯示

    labelimg.configure(image=photo)

    labelimg.image = photo

    #設定text1為檔名作顯示

    #filename.split("/")[-1]的意思是，將路徑的/前方砍掉，只留下檔名。

    text1.set(filename.split("/")[-1])

b2 = tk.Button(window, text='open', font=('Arial', 12), width=10, height=1, command=OpenFile)

b2.pack()

text1 = StringVar()

label1 = tk.Label(window,textvariable=text1, text='1799', font=('Arial', 12), width=100, height=8)

label1.pack()

labelimg = tk.Label(window, image="")

labelimg.pack()

window.mainloop()

現在來執行一次程式看看吧！

按下執行，可以看到一個視窗，有個按鈕。

按下open按鈕之後，有個對話視窗可以顯示欲選擇的圖片。

我們選擇的當然是頁面上唯一的一張立華奏彈鋼琴圖啦～

選擇了之後，就會看到我那張超讚的立華奏的圖被畫到tkinter的視窗上去了。

如果覺得立華奏很讚，或這篇文有幫助到你們的話，請留言或幫忙按個廣告吧。

您的支持是我寫文的最大動力。

如果失敗了，也請留言讓我知道，看看哪個環節出了問題，我有看到就會回。

希望這篇文有幫助到各位ξ( ✿＞◡❛)

[教學]使用js引入jQuery

標題：[教學]使用JavaScript引入jQuery

或：[教學]如何從 JavaScript import jQuery?

或：import jQuery frome JavaScript 

本篇文章網址：https://corettainformation.blogspot.com/2021/01/jsjquery.html

最近有個需求，就是要在執行期間導入jQuery，困擾我了一會兒，但還是找到解法了，只要在JavaScript中輸入以下四行就行：

var script = document.createElement('script');

script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';

script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);

當然，在瀏覽器中按F12開啟主控台，並輸入以上四行，也能在任何網站中引入jQuery。

參考資料：

https://stackoverflow.com/questions/1140402/how-to-add-jquery-in-js-file

取消VS code儲存時自動縮排

標題：取消Visual Studio Code儲存時自動縮排

或：取消VS Code儲存時自動縮排

事情是這樣的，我最近在寫JavaScript程式的時候，每當儲存，Visual Studio Code就自動幫我縮排，我的游標還會自動跑到最下方，實在讓我感到不堪其擾。

這是因為有個叫JS-CS-HTML Formatter的套件在作怪。

我們按ctrl+shift+X，叫出圖中這個「延伸模組」，果然看到JS-CS-HTML Formatter這個東西。

當然是立馬把這垃圾模組停用+解除安裝。

停用+解除安裝後，重開Visual Studio Code，儲存時就不會自動縮排了。

===分隔線===

如果覺得這篇文有幫助到你們的話，請留言或幫忙按個廣告吧。

您的支持是我寫文的最大動力。

如果失敗了，也請留言讓我知道，看看哪個環節出了問題，我有看到就會回。

希望這篇文有幫助到各位ξ( ✿＞◡❛)

[範例]如何在QT中顯示OpenCV開啟的影像

標題：[範例]如何在QT中顯示OpenCV開啟的影像

本篇以Visual Studio 2019做範例。

首先，你的Visual Studio 2019要先安裝好QT和OpenCV。

可以參考以下兩篇文章：

• 在Visual Studio 2019上安裝Qt
• 在Visual Studio 2019安裝OpenCV4

確定安裝好之後，建立一份QT專案。

然後按專案/[專案名稱]屬性。 (我懶得重新截圖，所以用舊圖)

• 圖取自：
• 在Visual Studio 2019安裝OpenCV4

找到VC++目錄的地方。

在Include目錄之後加上 ;C:\opencv\build\include

在程式庫目錄之後加上 ;C:\opencv\build\x64\vc15\lib

注意，前後要用「;」區隔。

然後你去C:\opencv\build\x64\vc15\lib。

找到類似opencv_world451.lib的東西，把檔名複製起來。

如果你的專案是debug模式，就要複製檔名後面有個d的，就是opencv_world451d.lib。

如果你的專案是release模式，就要複製opencv_world451.lib。

然後回到剛剛的屬性頁。

按連接器/輸入。

在其他相依性的地方加入剛剛複製的opencv_world451.lib。

因為我現在是debug模式，所以是opencv_world451d.lib。

注意，前後要用「;」區隔。

接下來要打程式碼了，在這個QT專案找到一個繼承QMainWindow的class。

它的位置應該在[專案名稱].h的地方。

我的專案名稱是kaleido_painter，所以是kaleido_painter.h。

然後在裡面的public之類的地方加入這段：

void paintEvent(QPaintEvent*);

範例：(kaleido_painter是我的專案名稱，請更改為自己的)

(新增的程式碼片段為紅色處)

class kaleido_painter : public QMainWindow

{

    Q_OBJECT

public:

    kaleido_painter(QWidget *parent = Q_NULLPTR);

    void paintEvent(QPaintEvent*);

private:

    Ui::kaleido_painterClass ui;

};

然後到main.cpp的地方，引入以下套件及名稱空間：

#include <QtWidgets/QApplication>

#include <QWidget>

#include <QPainter>

#include <QPen>

#include <QBuffer>

#include<opencv2/opencv.hpp>

using namespace cv;

並在main函數的上方填入以下程式碼：

範例：(kaleido_painter是我的專案名稱，請更改為自己的)

記得紅色的檔名處要改成你的圖片路徑。

void kaleido_painter::paintEvent(QPaintEvent* event)

{

Q_UNUSED(event);

QPainter painter(this);

Mat img = imread("C:/ckey/0.jpg", -1);

QImage* myImage = new QImage;

*myImage = QImage((unsigned char*)img.data, img.cols, img.rows, img.step, QImage::Format_RGB888);

painter.drawImage(QRect(30, 50, 500, 300), *myImage);

}

輸入完後按下執行。

會看到我那超讚的立華奏彈鋼琴圖被畫到QT上去了，但顏色怪怪的。

那是因為OpenCV讀取到的影像的顏色順序是BGR，而QT的QImage讀取顏色的順序則是RGB，怎麼處理呢，有兩個方法。

方法一：

使用 cv::cvtColor(img, img, cv::COLOR_BGR2RGB);

使用OpenCV的cvtColor語法將BGR轉成RGB。

更改後的語法如下(深紅色處)：

void kaleido_painter::paintEvent(QPaintEvent* event)

{

Q_UNUSED(event);

QPainter painter(this);

Mat img = imread("C:/ckey/0.jpg", -1);

cv::cvtColor(img, img, cv::COLOR_BGR2RGB);

QImage* myImage = new QImage;

*myImage = QImage((unsigned char*)img.data, img.cols, img.rows, img.step, QImage::Format_RGB888);

painter.drawImage(QRect(30, 50, 500, 300), *myImage);

}

第二個方法則是改變QImage的格式，將Format_RGB888改成Format_BGR888。

更改後的語法如下(深紅色處)：

void kaleido_painter::paintEvent(QPaintEvent* event)

{

Q_UNUSED(event);

QPainter painter(this);

Mat img = imread("C:/ckey/0.jpg", -1);

QImage* myImage = new QImage;

*myImage = QImage((unsigned char*)img.data, img.cols, img.rows, img.step, QImage::Format_BGR888);

painter.drawImage(QRect(30, 50, 500, 300), *myImage);

}

使用這兩種方法的任一一種更改完後，我那張超讚的立華奏的圖就被以正常的色彩畫到QT的視窗上去了。

=====分隔線=====

如果覺得立華奏很讚，或這篇文有幫助到你們的話，請留言或幫忙按個廣告吧。

您的支持是我寫文的最大動力。

如果失敗了，也請留言讓我知道，看看哪個環節出了問題，我有看到就會回。

希望這篇文有幫助到各位ξ( ✿＞◡❛)

[範例]如何在QT中顯示圖片

 標題：[範例]如何在QT中顯示圖片

本篇以Visual Studio 2019做範例。

首先建立一份QT專案後，找到一個繼承QMainWindow的class。

它的位置應該在[專案名稱].h的地方。

我的專案名稱是kaleido_painter，所以是kaleido_painter.h。

然後在裡面的public之類的地方加入這段：

void paintEvent(QPaintEvent*);

範例：(kaleido_painter是我的專案名稱，請更改為自己的)

(增加的程式碼片段為紅色處)

class kaleido_painter : public QMainWindow

{

    Q_OBJECT

public:

    kaleido_painter(QWidget *parent = Q_NULLPTR);

    void paintEvent(QPaintEvent*);

private:

    Ui::kaleido_painterClass ui;

};

然後到main.cpp的地方，引入一個套件：

#include <QPainter>

並在main函數的上方填入以下程式碼：

範例：(kaleido_painter是我的專案名稱，請更改為自己的)

記得紅色的檔名處要改成你的圖片路徑。

void kaleido_painter::paintEvent(QPaintEvent* event)

{

Q_UNUSED(event);

QPainter painter(this);

QImage myImage;

myImage.load("C:/ckey/0.jpg");

painter.drawImage(QRect(30, 50, 500, 300), myImage);

}

輸入完後按下執行。

就會看到我那張超讚的立華奏的圖被畫到QT的視窗上去了。

如果覺得立華奏很讚，或這篇文有幫助到你們的話，請留言或幫忙按個廣告吧。

您的支持是我寫文的最大動力。

如果失敗了，也請留言讓我知道，看看哪個環節出了問題，我有看到就會回。

希望這篇文有幫助到各位ξ( ✿＞◡❛)

[範例]如何在QT中使用QPainter

標題：[範例]如何在QT中使用QPainter。

本篇以Visual Studio 2019做範例。

首先建立一份QT專案後，找到一個繼承QMainWindow的class。

它的位置應該在[專案名稱].h的地方。

我的專案名稱是kaleido_painter，所以是kaleido_painter.h。

然後在裡面的public之類的地方加入這段：

void paintEvent(QPaintEvent*);

範例：(kaleido_painter是我的專案名稱，請更改為自己的)

class kaleido_painter : public QMainWindow

{

    Q_OBJECT

public:

    kaleido_painter(QWidget *parent = Q_NULLPTR);

    void paintEvent(QPaintEvent*);

private:

    Ui::kaleido_painterClass ui;

};

然後到main.cpp的地方，引入兩個套件：

#include <QPainter>

#include <QPen>

並在main函數的上方填入以下程式碼：

範例：(kaleido_painter是我的專案名稱，請更改為自己的)

void kaleido_painter::paintEvent(QPaintEvent* event)

{

    Q_UNUSED(event);

    QPainter painter(this);

    painter.setRenderHint(QPainter::Antialiasing, true);

    painter.setPen(QColor(0, 140, 250));

    painter.drawLine(QPointF(0,0), QPointF(100, 150));

}

QColor是RGB的值。

兩個QPointF分別為起始點和終點的座標。

然後按下執行：

就會看到一條線被畫上去了。

在Visual Studio 2019安裝OpenCV4

 標題：在Visual Studio 2019安裝OpenCV4

今天，我們要在Visual Studio 2019安裝OpenCV4，直接進入正題吧。

首先，去這個OpenCV官方網址安裝OpenCV：

https://opencv.org/releases/

看到我的文章標題就曉得，我們要選的版本當然是最新的4.5版本。

點選完紅色框框處後會載一個執行擋下來，我們點開它。

然後選擇安裝路徑。

建議請選擇C碟而不是D或E之類的磁碟，避免之後發生程式路徑上的麻煩。

如果說，C碟快滿了，不想塞進C碟，怎麼辦呢？

它才1.25GB而已，如果你的電腦連1.25GB的資料都塞不進C碟，建議重灌電腦，或換大一點的磁碟。

用好一點的設備，對你未來在OpenCV的開發上會比較好d(`･∀･)b

接著按Extract開始安裝。

它安裝很快，連我那台無料星筆電都能十秒內裝完。

裝完後你應該會在C碟找到一個opencv的資料夾。

從裡面複製一份類似 C:\opencv\build\x64\vc15\bin 的路徑。

注意：不是 C:\opencv\build\bin

然後開啟本機，按右鍵/內容。

選擇進階系統設定/進階/環境變數。 (如下圖)

然後找到一個叫Path的變數，選擇後按編輯/新增。

然後輸入剛剛複製的C:\opencv\build\x64\vc15\bin。

然後按確定，剩餘的視窗也是按確定。

然後我們從Visual Studio 2019新增一份C++的專案。(這部分應該不用多加贅述)

然後按專案/[專案名稱]屬性。 (我的範例專案名稱為cvtest)

找到VC++目錄的地方。

在Include目錄之後加上 ;C:\opencv\build\include

在程式庫目錄之後加上 ;C:\opencv\build\x64\vc15\lib

注意，前後要用「;」區隔。

然後你去C:\opencv\build\x64\vc15\lib。

找到類似opencv_world451.lib的東西，把檔名複製起來。

如果你的專案是debug模式，就要複製檔名後面有個d的，就是opencv_world451d.lib。

如果你的專案是release模式，就要複製opencv_world451.lib。

然後回到剛剛的屬性頁。

按連接器/輸入。

在其他相依性的地方加入剛剛複製的opencv_world451.lib。

因為我現在是debug模式，所以是opencv_world451d.lib。

注意，前後要用「;」區隔。

然後我們輸入以下程式碼做測試：

我很貼心的幫你們打好了，直接複製就行。

記得紅色的檔名處要改成你的圖片路徑。

#include<opencv2/opencv.hpp>

#include <iostream>

using namespace cv;

int main()

{

Mat img = imread("C:/ckey/0.jpg", -1);

namedWindow("test", WINDOW_AUTOSIZE);

imshow("test", img);

waitKey(0);

destroyWindow("test");

return 0;

}

輸入完後按下執行。

就會看到我那張超讚的立華奏的圖被OpenCV開啟了。

如果覺得立華奏很讚，或這篇文有幫助到你們的話，請留言或幫忙按個廣告吧。

您的支持是我寫文的最大動力。

如果失敗了，也請留言讓我知道，看看哪個環節出了問題，我有看到就會回。

希望這篇文有幫助到各位ξ( ✿＞◡❛)

[懶人包]解決blogger無法投放廣告的問題

標題：[懶人包]解決blogger無法投放廣告的問題

遇到的問題包括：你在 AdSense 中輸入的網誌詳細資料有問題，請前往 AdSense 確認你的網誌網域名稱 (xxx.blogspot.com) 是列示為網站。

以及：我們正在為你完成設定，這項程序通常會在幾天內完成，但有時最久可能需要 2 週。我們會在一切準備就緒時通知您，接下來您就可以開始刊登廣告來賺取收益。

然後等了20週它都不會告訴你準備好了。

因為你沒有加script在blogger的header裡。

解決方法懶人包：

首先進去AdSense，把你的發布商ID複製起來。

然後回你的Blogger，按主題/自訂/編輯HTML。

然後編輯HTML。

找到一個<head>標籤，在它後面輸入

<script async='async' data-ad-client='ca-pub-xxxxxxxxxxxxxx' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>

紅字的pub-xxxxxxxxxxxxxx是你剛剛複製的發佈商ID。記得前面要加ca。

例如：

<script async='async' data-ad-client='ca-pub-123456789' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>

輸入在head之後的任何一個位置就行，前提是要放在</head>之前。

也就是說，這段程式碼要放在<head>與</head>之間。

放完之後，按下儲存。

接著回到blogger介面。斷開AdSense與blogger的連結，然後再加入AdSense(這步驟可能不用做)。

做完之後，它依然會告訴你「我們正在為你完成設定，這項程序通常會在幾天內完成，但有時最久可能需要 2 週。我們會在一切準備就緒時通知您，接下來您就可以開始刊登廣告來賺取收益。」

我以為又失敗了。

但這次不會等20週都等不到了，我當時過了兩天，它就寄信給我說申請通過了。

我也能放廣告了。

超感動，一定要PO到blogger造福那些跟我一樣等超過20週，還沒等到結果的人。

如果這篇真的有幫助到你們，並成功了，請留言或按個廣告吧，我會很感謝您的。

如果等了兩週後依然失敗了，也請留言讓我知道，我再檢討看看此文是否有寫錯。

希望這篇文有幫助到你們

[解決]執行QT 出現 「內嵌變數至少需要 '/std:c++17'」的錯誤

標題:解決Visual Studio 執行QT 出現 「內嵌變數至少需要 '/std:c++17'」的錯誤。

副標題：解決Visual Studio 執行QT 出現 「無法由initializer list轉換為qbytearrayview」的錯誤。

前些日子在安裝好QT後，在Visual Studio上執行它，結果出現以下錯誤：

「內嵌變數至少需要 '/std:c++17'」

或者是「無法由initializer list轉換為qbytearrayview」

如何解決呢，首先，按 「專案 」 / 「屬性」 / 「C/C+」 / 「語言」。

將「C++語言標準」從「ISO C++ 14標準」更改為「ISO C++ 17標準」。

更改完之後，重新執行一次QT程式，就會發現程式已經可以執行了。

如果覺得這篇文有幫助到你們的話，請留言或幫忙按個廣告吧。

您的支持是我寫文的最大動力。

如果依然失敗了，也請留言讓我知道，看看哪個環節出了問題，我有看到就會回。

希望這篇文有幫助到各位ξ( ✿＞◡❛)