應用場景:
倉庫每次發貨需要打印標簽, 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作為保存的默認文件名體驗會好很多
這里有兩種方案,
- 去Google找一個叫做downloadify的Flash組件, 可以保證點擊"下載"按鈕的時候跳出一個選擇保存位置的對話框, 並且默認的文件名可以用js指定
- 使用HTML5的download屬性加在A標簽里, 這個方案更簡單, 不過Firefox/Chrome會直接保存到默認下載位置, 不會讓用戶選擇, 而右鍵另存為又會失去默認文件名的作用
兩種方案各有利弊吧, 具體看操作人員的使用習慣