資訊專欄INFORMATION COLUMN
摘要：上代碼，看注釋就完了這里選擇圖片畫布注意這個是數組下面這三行就可以實現文件選擇了圖片以后，預覽的功能，但是有些圖片可能太大了影響頁面觀感，得統一縮小下。
前言
好像沒啥好說的~
大概做法先由filereader獲取圖片的base64，控制圖片生成，但不顯示。
然后將圖片按比例設置好壓縮后的寬高繪制在canvas畫布上。
之后利用canvas的自帶方法再次轉換成base64，再對base64進行解碼存儲到數組緩存區，生成blob，然后創建下載鏈接就完了。
上代碼，看注釋就完了//html //這里選擇圖片 //canvas畫布
//js
document.getElementById("file").onchange = function () {
console.log(this.files[0]);
//注意這個files是數組
reader.readAsDataURL(this.files[0]);
var reader = new FileReader();
reader.onload = function (e) {
//下面這三行就可以實現文件選擇了圖片以后，預覽的功能，但是有些圖片可能太大了影響頁面觀感，得統一縮小下。
//var img = new Image();
// img.src = e.target.result;
// document.body.appendChild(img);
render(e.target.result) //這個方法實現圖片的壓縮下載
}
}
var MAX_H = 100;
function render(src){
// 創建一個 Image 對象
var image = new Image();
// 設置src屬性，加載圖片內容，此時還未壓縮
image.src = src;
// 綁定 load 事件處理器，加載完成后執行
image.onload = function(){
// 獲取 canvas DOM 對象
var canvas = document.getElementById("canvas");
// 如果高度超標
if(image.height > MAX_H) {
// 寬度等比例縮放 *=
image.width *= MAX_H / image.height;
image.height = MAX_H;
}
// 獲取 canvas的 2d 環境對象, 有些上古瀏覽器不支持canvas
var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 把canvas寬高設置為圖片寬高
canvas.width = image.width;
canvas.height = image.height;
// 將圖像繪制到canvas上
//drawImage(img,startX,startY,endX,endY)
ctx.drawImage(image, 0, 0, image.width, image.height);
//將繪制好的canvas圖像轉為DataURL
//toDataURL(圖片類型,圖片質量)，這個圖片質量越高就越清晰（相同寬高）
//canvas.toDataURL 返回的默認格式就是 image/png
var data = canvas.toDataURL("image/jpeg",0.5);
//獲取圖片的dataUrl轉成blob
//這下面轉blob的代碼我也沒搞懂，無百度了DataURL轉blob就是這些代碼了
data = data.split(",")[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
var blob = new Blob([ia], {
type: "image/jpeg"
});
//生成blob文件的下載鏈接，把鏈接附在a便簽上，把a便簽加入dom中，點擊就可以下載啦
var url3 = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url3;
a.text = "測試圖片";
a.download = "mytest.jpg";
document.body.appendChild(a);
};
};
效果預覽
后語
壓縮后上傳的操作，這里就不寫了，百度下blob如何生成file上傳即可。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101692.html
摘要：本篇文章就來分享一下兩款開箱即用上手容易的圖床相冊程序和在線文件管理器目錄列表程序，由好友開發并維護，非常適合個人站長用作圖床相冊和文件下載分享。雖然說現在照片還有文件存儲等都可以上傳到網盤中，但是國內的網盤與國外的網盤存儲還有點不一樣。以百度網盤與Dropbox對比為例，百度網盤頂多算是一個個人用來存放私人照片和文件的網絡硬盤，如果用來分享的話很容易被百度限制或者取消下載。很多的個人站長為...
摘要：在資源很多時，例如圖片的復制，這個會加快任務的執行速度，特別是需要實時預覽時，減少延遲。但是作為個入門短時間內還是不能夠被取代得了的。 gulp常用功能集合（開發和生產分離、靜態資源壓縮優化、代碼優化、實時預覽、hash） tags: gulp 前端自動化開發 npm倉庫下載地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基礎上的...
摘要：簡介本文結合實際項目場景，記錄圖片上傳時的一種本地壓縮預覽解決方案。考慮到這些問題，決定采用本地圖片進行預覽。解決過程接下來說明將待上傳的本地圖片展示到界面中。這樣就在前端實現了簡單的圖片壓縮處理。 簡介 本文結合實際項目場景，記錄圖片上傳時的一種本地壓縮預覽解決方案。這里的本地預覽是指，頁面上的圖片是讀取的本機資源進行展示，而沒有通過網絡請求加載。 實際的項目場景 在這陣子的項目開發...
摘要：文件預覽項目選型文件在線預覽有多種方式，目前使用較多的有種。中文支持較好，沒有亂碼問題。在線示例中文文檔可以將轉換成，并且可以在中精確顯示原生文本包括在中的字體顏色位置，可以選擇搜索復制等，可選單文件輸出。缺點文件過大可能會出現瀏覽器卡死。 PDF文件預覽項目選型 PDF文件在線預覽有多種方式，目前使用較多的有3種：pdf2swf、pdf2image、pdf2html。這3種方式各有優...
閱讀 3235·2021-11-23 09:51
閱讀 2480·2021-09-27 13:34
閱讀 2464·2021-09-08 09:45
閱讀 662·2019-08-30 15:44
閱讀 3493·2019-08-29 12:17
閱讀 2759·2019-08-26 12:18
閱讀 2622·2019-08-26 10:10
閱讀 3078·2019-08-23 18:02
