這期內容當中小編將會給大家帶來有關里JavaScript+canvas實現在線轉換圖片格式的功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

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

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

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

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

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

toDataURL說明：
方法返回一個包含圖片展示的 data URI 。可以使用 type 參數其類型，默認為 PNG 格式。圖片的分辨率為96dpi。

語法：

canvas.toDataURL(type, encoderOptions);

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

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

注意點：

1、如果畫布的高度或寬度是0，那么會返回字符串“data:,”。

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

代碼例子：

html:

<input type="file" id="inputimg">
<select id="myselect">
	<option value="1">webp格式</option>
  <option value="2">jpeg格式</option>
  <option value="3">png格式</option> 
</select>
<button id="start">開始轉換</button>
<p>預覽：</p>
<img id="imgShow" src="" alt="">

文章標題：里JavaScript+canvas實現在線轉換圖片格式的功能-創新互聯
網站路徑：http://vcdvsql.cn/article2/ispic.html

成都網站建設公司_創新互聯，為您提供網站設計、移動網站建設、做網站、商城網站、域名注冊、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯