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

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

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

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

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

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

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

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

語法：

canvas.toDataURL(type, encoderOptions);

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

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

注意點(diǎn)：

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

2、其中webkit內(nèi)核瀏覽器支持“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">開始轉(zhuǎn)換</button>
<p>預(yù)覽：</p>
<img id="imgShow" src="" alt="">

文章標(biāo)題：里JavaScript+canvas實(shí)現(xiàn)在線轉(zhuǎn)換圖片格式的功能-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://aaarwkj.com/article2/ispic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、移動網(wǎng)站建設(shè)、做網(wǎng)站、商城網(wǎng)站、域名注冊、網(wǎng)站內(nèi)鏈

廣告

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