| 方法名 | 參數 | 描述 |
|---|---|---|
| abort | none | 中斷讀取 |
| readAsBinaryString | file | 二進制碼 |
| readAsDataURL | file | 將文件讀取為 DataURL |
| readAsText | file, [encoding] | 將文件讀取為文本 |
FileReader處理事件簡介
| 事件 | 描述 |
|---|---|
| onabort | 中斷時觸發 |
| onerror | onabort |
| onload | 文件讀取成功完成時觸發 |
| onloadend | 讀取完成觸發，無論成功或失敗 |
| onloadstart | 讀取開始時觸發 |
| onprogress | 讀取中 |
繼續上面的操作，在拿到圖片之后，需要將文件進行處理轉化，此時
var reader = new FileReader();
//將文件以Data URL形式讀入頁面
reader.readAsDataURL(file);
reader.onload=function(e) {
console.log(reader)
}
現在取到了圖片也進行了轉化，現在可以進行壓縮了。
var eleFile = document.querySelector('#file');
var reader = new FileReader()
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];
// console.log(file)
// 選擇的文件是圖片
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
//將文件以Data URL形式讀入頁面
reader.readAsDataURL(file);
reader.onload=function(e) {
// console.log(this.result)
var pre=document.getElementById("pre");
pre.setAttribute("src", this.result)
canvasDataURL(this.result, 100, 0.5)
}
}
})
/* [canvasDataURL 通過canvas進行壓縮]
* @params path 圖片的base64的格式
* @params targetWidth 壓縮后圖片的寬度
* @params quality 圖片質量 quality值越小，所繪制出的圖像越模糊
*/
function canvasDataURL(path, targetWidth, quality) {
var img = new Image();
img.src = path
img.onload = function () {
// var that = this
// console.log(that)
// 默認按比例壓縮
var w = this.width
var h = this.height
scale = w / h;
w = targetWidth
h = targetWidth / scale
var quality = quality; // 默認圖片質量為0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 創建屬性節點
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(this, 0, 0, w, h);
// quality值越小，所繪制出的圖像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
var result=document.getElementById("result");
result.setAttribute("src", base64)
}
}
很簡單，這樣就可以得到壓縮后的圖片了，從以上的代碼可得知，原理在于canvas中的toDataURL方法可指定圖片壓縮后的格式及壓縮質量，把canvas信息壓縮并轉為base64編碼來實現壓縮。
使用canvas制作卡片
場景：把剛剛壓縮之后的圖片與另一張圖片相結合，可長按進行保存。
function drawCanvas (target) {
var canvas = document.querySelector('#myCanvas')
var ctx = canvas.getContext('2d')
// 是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例
var dp = window.devicePixelRatio || 1
var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
var ratio = this.dp / this.backingStoreRatio
var oldWidth = canvas.width
var oldHeight = canvas.height
canvas.width = oldWidth * ratio
canvas.height = oldHeight * ratio
canvas.style.width = oldWidth + 'px'
canvas.style.height = oldHeight + 'px'
ctx.scale(ratio, ratio)
var headerImg = new Image()
var bgImg = new Image()
headerImg.src = target
bgImg.src = '../bg.png'
headerImg.onload = (e) => {
// 圖片的寬高比
var rate = headerImg.width / headerImg.height
console.log(rate)
bgImg.onload = (e) => {
ctx.drawImage(headerImg, 10, 30, 50, (50 / rate))
// 背景圖片
ctx.drawImage(bgImg, 0, 0, 150, 150)
ctx.fillText('厲害啊', 80, 70)
var resultImg = new Image()
resultImg.src = canvas.toDataURL('image/png', 1)
resultImg.style.width = '100%'
var cardImg=document.getElementById("cardImg");
cardImg.setAttribute("src", resultImg.src)
}
}
取到剛剛得到的圖片，在圖像裝載完畢時后將其畫到畫布上，也可以配上文字等等，最后也是把canvas的信息轉為base64編碼來進行實現 。可以通過代碼來進行實例的實踐
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
