用JavaScript修改Canvas圖片的解析度(DPI)

應用場景:

倉庫每次發貨需要打印標籤, Canvas根據從數據庫讀取的產品信息可以生成標籤JPG, 但是這個JPG圖片的默認分辨率(DPI)是72

 這個DPI太低, 導致列印出來的圖片會很模糊.

 修改DPI的常規做法是把圖片上傳到伺服器用C#修改DPI後再下載到服務端

 但是心裡覺得很憋屈, 分明已經在客戶端生成了圖片, 僅為了修改一個很小的標記(DPI資訊只是JPEG格式的一個頭部META)要上傳一張很大的圖片到服務端折騰一遭.

 

後來使用了下面的方法

 用JavaScript直接修改了DPI

這裡不貼源碼, 僅提供解決思路, 希望需要的朋友自己親手試一試

 

既然知道DPI只是JPEG格式的頭部信息, 並且是很小的一部分, 而base64屬於流編碼,那麼canvas.toDataURL()以後的base64字符串中, 這個DPI信息所處的位置應該也是固定的

 

用圖片處理程序(我用的是Fireworks)生成兩張內容一樣的JPG圖片, 僅修改其DPI, A圖片的DPI是72, B圖片的DPI是300

這裡為了確認起見, 使用UE對比一下兩個文件, 確實只有頭部幾個字節不一樣

用C#讀取A/B圖片, 分別編碼成BASE64, 生成A.txt和B.txt

用UE或其他文本編輯器對比兩個文本文件, 找出不一樣的部分, 你會發現只有靠近頭部的不到10個字符不一樣

重複以上實驗, 用不同的圖片, 會發現最後總是那固定的幾個字符不一樣, 並且只要DPI一樣, 那固定位置的幾個字符也是一樣的

在瀏覽器端用canvas .toDataURL產生jpg圖片的base64字元, 然後修改字元中剛才固定位置的字元為測試時DPI為300的特徵字元

OK, 現在你已經獲得了一個DPI為300的JPG圖片了.

有興趣的朋友可以去研究一下BASE64編碼, 然後做成一個函數來計算不同DPI所對應的特徵字符

 至於二進制狀態的那幾個自己, 用計算器按一下就會發現那就是直接存儲的DPI數值

MORE:

在公司的專案中, 操作人員每次不同批次的圖片會習慣於保存在一個固定的資料夾裡, canvas產生的圖片另存為的時候預設檔名總是canvas.jpg

 

這裡如果使用它們所習慣的批次號.jpg作為保存的預設檔名體驗會好很多

 

這裡有兩種方案,

的downloadify的Flash元件, 可以保證點擊"下載"按鈕的時候跳出一個選擇保存位置的對話框, 並且預設的檔名可以用js指定

使用HTML5的download屬性加在A標籤裡, 這個方案更簡單,不過Firefox/Chrome會直接儲存到預設下載位置, 不會讓使用者選擇, 而右鍵另存為又會失去預設檔名的作用

兩種方案各有利弊吧, 具體看操作人員的使用習慣