建站
咨詢
售后
建站咨詢
新聞中心
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)里JavaScript+canvas實現(xiàn)在線轉(zhuǎn)換圖片格式的功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
功能需求：
我們在網(wǎng)頁中上傳一張圖片，選擇不同的格式，將該圖片轉(zhuǎn)換為對應(yīng)的格式。
實現(xiàn)思路：
實現(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)頁中。點擊右鍵保存，就得到了不同格式的圖片了。
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ù)會被忽略。
注意點：
1、如果畫布的高度或?qū)挾仁?，那么會返回字符串“data:,”。
2、其中webkit內(nèi)核瀏覽器支持“image/webp”類型 。 建議使用Chrome瀏覽器。
代碼例子：
html:
預(yù)覽：
網(wǎng)頁題目：里JavaScript+canvas實現(xiàn)在線轉(zhuǎn)換圖片格式的功能-創(chuàng)新互聯(lián)
路徑分享：http://fisionsoft.com.cn/article/ispic.html
