這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)里JavaScript+canvas實現(xiàn)在線轉(zhuǎn)換圖片格式的功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

按需定制可以根據(jù)自己的需求進行定制，網(wǎng)站建設、成都網(wǎng)站建設構(gòu)思過程中功能建設理應排到主要部位公司網(wǎng)站建設、成都網(wǎng)站建設的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義

功能需求：
我們在網(wǎng)頁中上傳一張圖片，選擇不同的格式，將該圖片轉(zhuǎn)換為對應的格式。

實現(xiàn)思路：
實現(xiàn)這樣的功能，使用后端語言【php,java等】可以很容易的完成。但是如果只在前端如何完成呢？

1、通過input上傳圖片，使用FileReader將文件讀取到內(nèi)存中。

2、將圖片轉(zhuǎn)換為canvas，canvas.toDataURL()方法設置為我們需要的格式，如："image/webp","image/jpeg","image/png"。

3、最后將canvas轉(zhuǎn)換為圖片，顯示在網(wǎng)頁中。點擊右鍵保存，就得到了不同格式的圖片了。

toDataURL說明：
方法返回一個包含圖片展示的 data URI ?？梢允褂?type 參數(shù)其類型，默認為 PNG 格式。圖片的分辨率為96dpi。

語法：

canvas.toDataURL(type, encoderOptions);

type【可選】 圖片格式，默認為 image/png，可選格式："image/webp","image/jpeg","image/png"。

encoderOptions【可選】在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會使用默認值 0.92。其他參數(shù)會被忽略。

注意點：

1、如果畫布的高度或?qū)挾仁?，那么會返回字符串“data:,”。

2、其中webkit內(nèi)核瀏覽器支持“image/webp”類型 。 建議使用Chrome瀏覽器。

代碼例子：

html:

	webp格式
  jpeg格式
  png格式 

開始轉(zhuǎn)換
預覽：

文章標題：里JavaScript+canvas實現(xiàn)在線轉(zhuǎn)換圖片格式的功能-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://weahome.cn/article/ispic.html