溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關里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="">
js:
/*事件*/
document.getElementById('start').addEventListener('click', function(){
getImg(function(image){
var can=imgToCanvas(image),
imgshow=document.getElementById("imgShow");
imgshow.setAttribute('src',canvasToImg(can));
});
});
// 把image 轉換為 canvas對象
function imgToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
//canvas轉換為image
function canvasToImg(canvas) {
var array=["image/webp","image/jpeg","image/png"],
type=document.getElementById('myselect').value-1;
var src = canvas.toDataURL(array[type]);
return src;
}
//獲取圖片信息
function getImg(fn){
var imgFile = new FileReader();
try{
imgFile.onload = function(e) {
var image = new Image();
image.src= e.target.result; //base64數據
image.onload=function(){
fn(image);
}
}
imgFile.readAsDataURL(document.getElementById('inputimg').files[0]);
}catch(e){
console.log("請上傳圖片！"+e);
}
}上述就是小編為大家分享的里JavaScript+canvas實現在線轉換圖片格式的功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
