通過Canvas及File API縮放并上傳圖片完整示例

2024-09-05 07:20:28

字體：大中小

來源：轉載

供稿：網友

示例地址：Canvas Resize Demo
原文作者：Dr. Tom Trenka
原文日期： 2013年8月6日
翻譯日期： 2013年8月8日

Tom Trenka 能為"我"的博客寫一篇文章,對我來說是一個巨大的榮譽。Tom是Dojo框架的最初貢獻者之一，也是我在SitePen公司的良師益友.我見證了他最頂級的天才能力，并且他總是第一個以前瞻性的解決方案預見了很多棘手的問題。他總是站在局外思考，打破常規但卻又堅實可靠地解決邊緣問題。本文就是一個完美的例證。
最近我總是被問道要創造一個用戶接口API，允許用戶上傳圖片到服務器上(伴隨其他的事情),并能在我們公司提供支持的大量網站的客戶端上使用。通常來說這都是很容易的事情——創建一個form表單，添加一個file類型的input輸入框，讓用戶從電腦里選擇圖片，并在form標簽上設置enctype="multipart/form-data"表單屬性，然后上傳即可。非常簡單，不是嗎？事實上，這里有一個足夠簡單的例子；點擊進入
但是如果你想要通過某些方式預先處理一下圖片再上傳，那該怎么辦？比如說，你必須先壓縮圖片尺寸，或者需要圖片只能是某些種類的格式，如 png 或者jpg,你怎么辦？
用canvas來解決!

Canvas簡介
canvas 是一個HTML5新增的DOM元素，允許用戶在頁面上直接地繪制圖形，通常是使用JavaScript.而不同的格式標準也是不同的，比如SVG是光柵API(raster API) 而VML卻是向量API(vector API).可以考慮使用Adobe Illustrator(矢量圖)作圖與使用 Adobe Photoshop (光柵圖)作圖的區別。

在canvas(畫布)上能做的事情就是讀取和渲染圖像,并且允許你通過JavaScript操縱圖像數據。已經有很多現存的文章來為你演示基本的圖像處理——主要關注與各種不同的圖像過濾技術( image filtering techniques)——但我們需要的僅僅是縮放圖片并轉換到特定的文件格式，而canvas完全可以做到這些事情。

我們假定的需求，比如圖像高度不超過100像素，不管原始圖像有多高。基本的代碼如下所示:

復制代碼

上一篇：HTML5新增的Css選擇器、偽類介紹

下一篇：Canvas與Image互相轉換示例代碼