資訊專欄INFORMATION COLUMN
摘要：有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。現在我們來通過的或者方法對象對象來通過上傳圖片。
有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。
比如，用video模擬一個攝像頭，通過webrtc調用攝像頭的方式拍一張照，然后通過canvas通過getContext("2d")獲取的繪圖對象CanvasRenderingContext2D的drawImage(video, x, y, width, heigth)方法將video圖像通過canvas直接畫到html頁面上，用來呈現拍照后的結果。
通常的做法是用
的方式上傳圖片的。但這種方式是要求圖片具體存在的，本地或者url路徑上的。
現在我們來通過canvas的toDataURL或者toBlob方法、File對象、FormData對象來通過ajax上傳圖片。
第二種方式，通過base64轉碼，這里只看js代碼
這是canvas調用toDataURL方法將圖片base64編碼
let base64 = canvas.toDataURL(); // 同樣通過canvas的toDataURL方法將canvas圖片Base64編碼
let bstr = atob(base64.split(",")[1]); // atob是將base64編碼解碼，去掉data:image/png;base64,部分
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// 寫法同上
let file2 = new File([u8arr], "a.jpg", {type: "image/jpg"})
let formData = new FormData()
formData.append("file", file2)
console.log(formData)
$.ajax({
url: "/a",
type: "POST",
processData: false,
contentType: false,
cache: false,
data: formData,
success(res) {
console.log("上傳完成!")
}
})
其上兩種寫法皆可
下面是后臺代碼，這里用的是java
@Controller
public class IndexCtronller {
@RequestMapping(value = "/a", method = RequestMethod.POST)
public ResponseEntity index(MultipartFile file) { // 通過MultipartFile對象接收文件
String contextPath = "C:UsersdaggerDesktop"; // 上傳文件路徑
File file1 = new File(contextPath, "a.jpg");
try {
file.transferTo(file1); // 將文件保存到服務器桌面
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106638.html
摘要：有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。現在我們來通過的或者方法對象對象來通過上傳圖片。 有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。比如，用video模擬一個攝像頭，通過webrtc調用攝像頭的方式拍一張照，然后通過canva...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗，可以對圖片進行一下壓縮和本地預覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進行提交，看似簡單，但是也有其最大的缺點，那就是提交...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗，可以對圖片進行一下壓縮和本地預覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進行提交，看似簡單，但是也有其最大的缺點，那就是提交...
公司最近有需要壓縮上傳圖片功能，查找了些資料并實現了一把。 主要用到的原生組件：FileReader、Canvas、Blob、FormData 邏輯步驟： FileReader.readAsDataURL將上傳的圖片文件轉為Base64格式 將img繪制到canvas上，canvas.toDataURL壓縮圖片 new Blob將壓縮后的Base64轉為Blob格式 FormData.appen...
閱讀 1524·2021-11-25 09:43
閱讀 4066·2021-11-15 11:37
閱讀 3199·2021-08-17 10:13
閱讀 3507·2019-08-30 14:16
閱讀 3538·2019-08-26 18:37
閱讀 2495·2019-08-26 11:56
閱讀 1135·2019-08-26 10:42
閱讀 613·2019-08-26 10:39
