中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在HTML5中實現一個圖片上傳預處理功能

發布時間:2021-04-16 17:58:04 來源:億速云 閱讀:146 作者:Leah 欄目:web開發

這篇文章將為大家詳細講解有關怎么在HTML5中實現一個圖片上傳預處理功能,文章內容質量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。

獲取圖片

通過 File API 獲取圖片。

var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function() {
  var file = this.files[0];
});
input.click();

預覽圖片

使用 createObjectURL() 或者 FileReader 預覽圖片

var img = document.createElement('img');
img.src = window.URL.createObjectURL(file);
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result;
}
reader.readAsDataURL(file);

使用 canvas 做縮略圖

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);

上傳縮略圖

canvas.toBlob(function(blob) {
  var form = new FormData();
  form.append('file', blob);
  fetch('/api/upload', {method: 'POST', body: form});
});

關于怎么在HTML5中實現一個圖片上傳預處理功能就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

临沂市| 阜城县| 宕昌县| 茶陵县| 鹤岗市| 台湾省| 平乐县| 江西省| 融水| 辰溪县| 同江市| 子洲县| 云阳县| 肇源县| 马尔康县| 北宁市| 湘潭市| 图木舒克市| 江都市| 千阳县| 大庆市| 建昌县| 洪泽县| 雷州市| 鱼台县| 阿拉善右旗| 德安县| 固镇县| 泊头市| 嘉定区| 北川| 舟曲县| 昌平区| 辽阳市| 海南省| 广丰县| 鹤壁市| 南靖县| 六盘水市| 武隆县| 乳山市|