nodejs圖檔處理工具gm（工具下載下傳，子產品添加，添加水印，中文亂碼）

nodejs圖檔處理工具gm

• 工具下載下傳
• • GraphicsMagick和ImageMagick
  • 下載下傳位址（windows版本）
  • ImageMagick安裝選項
  • 檢視ImageMagick版本号
• 子產品添加
• 添加水印
• • 載入gm子產品
  • 指定圖檔添加文字
  • 添加中文字型
  • 添加日期水印
• 中文亂碼
• • 自身體驗
  • 解決方案
• 最後

工具下載下傳

GraphicsMagick和ImageMagick

• 部落客一開始安裝gm的時候，也是被其他攻略誤導過，大部分文章都會讓你安裝GraphicsMagick和ImageMagick，但是不清楚到底是安裝哪一個還是兩個都安裝。
• 在這裡部落客推薦直接安裝ImageMagick就行了，因為GraphicsMagick這裡有個坑，不建議下載下傳，下面會說到這個問題。

下載下傳位址（windows版本）

GraphicsMagick（不建議下載下傳）和ImageMagick

（GraphicsMagick）直接點選紅圈位置的字型便可以下載下傳

（ImageMagick）拉到最下面，部落客下載下傳的是紅圈的這個版本

ImageMagick安裝選項

紅圈位置一定要點上，不然有可能會出現{code: 4, signal: null}的錯誤

檢視ImageMagick版本号

運作指令行win+R 輸入cmd回車

• 執行指令convert -version
• 傳回下圖版本号就是安裝成功

  

  注意事項：有些電腦安裝完成後，執行該指令會傳回無法驅動器規格或者沒有東西回報，請重新開機電腦。

子產品添加

npm install gm

添加水印

使用gm主要還是用來添加水印，因為nodejs本身自帶的image子產品能滿足大部分需求，但是無法添加水印，是以下面就使用gm添加水印的方法。

載入gm子產品

指定圖檔添加文字

gm(./uploads/pic/test.jpg)	//指定添加水印的圖檔
	.stroke("white")		//字型外圍顔色
    .fill("white")			//字型内圍顔色（不設定預設為黑色）
    .drawText(50,50,"China")
    .write(./uploads/pic/watermark.jpg, function (err) {
            console.log(err)
            if (!err) console.log('ok');
            else console.log(err);
        });
           

添加中文字型

需要加入字庫ttf

微軟雅黑.ttf（可上網下載下傳其他字庫）

密碼：ani2

gm(./uploads/pic/test.jpg)	//指定添加水印的圖檔
	.stroke("white")		//字型外圍顔色
    .fill("white")			//字型内圍顔色（不設定預設為黑色）
    .font("./ttf/msyh.ttf",60) //字庫所在檔案夾和字型大小
    .drawText(50,50,"中文China")
    .write(./uploads/pic/watermark.jpg, function (err) {
            console.log(err)
            if (!err) console.log('ok');
            else console.log(err);
        });
           

添加日期水印

下載下傳moment子產品

npm install moment

加載子產品

調用

var datetime = moment().format("YYYY-MM-DD HH:mm:ss");
gm(./uploads/pic/test.jpg)	//指定添加水印的圖檔
	.stroke("white")		//字型外圍顔色
    .fill("white")			//字型内圍顔色（不設定預設為黑色）
    .font("./ttf/msyh.ttf",60) //字庫所在檔案夾和字型大小
    .drawText(50,50,datetime)
    .write(./uploads/pic/watermark.jpg, function (err) {
            console.log(err)
            if (!err) console.log('ok');
            else console.log(err);
        });
           

中文亂碼

自身體驗

重點來了，部落客也是被這個地方坑了很久，卡了一整天的時間。雖然網上有一些解決方案但是沒有寫到重點上，導緻我在解決這個問題上卡了很久，一直出現中文亂碼。

解決方案

這個問題很好解決，先說說部落客是怎麼遇到的

• 部落客也是根據網上教程一步步安裝gm，問題也是在這裡正如前面所說，有些教程沒有區分GraphicsMagick和ImageMagick，導緻部落客安裝過程中兩個一起安裝。
• 那麼一起安裝會出現什麼問題，我自己的電腦出現的問題就是，在調用gm過程中，ImageMagick的調用完全被GraphicsMagick占據了，導緻nodejs調用gm子產品過程，無論你如何調用都是GraphicsMagick的方式。
• 而實際測試中可以發現GraphicsMagick并不具備中文水印的功能，是以中文顯示都是亂碼的情況，那是因為GraphicsMagick是從ImageMagick分割獨立出來的一小部分，可能并不具備中文功能。

• 代碼上能解決的方案就是去指定gm的路徑，将gm的調用指定到ImageMagick，而不是GraphicsMagick，網上有些大神貌似已經有用過這個操作。

  最直接的解決方案

• 從根本上解決問題，就是下載下傳工具過程中，隻下載下傳ImageMagick
• 如果出現這種情況的小夥伴建議解除安裝GraphicsMagick和ImageMagick，再重新安裝ImageMagick并重新開機電腦

最後

參考的文章我會貼在下面

很感謝其他部落客的文章讓我能順利使用gm工具

[vcxiaohan2]node圖檔處理工具gm的使用：圖檔水印、圖檔驗證碼、圖檔裁剪示例

[peachesTao]解決NodeJs gm子產品報錯{ [Error: Command failed: aaЧaaaa ] code: 4, signal: null }

[無名大盜]nodejs圖檔處理工具gm用法