| 方法名 | 參數(shù) | 描述 |
|---|---|---|
| abort | none | 中斷讀取 |
| readAsBinaryString | file | 二進制碼 |
| readAsDataURL | file | 將文件讀取為 DataURL |
| readAsText | file, [encoding] | 將文件讀取為文本 |
FileReader處理事件簡介
| 事件 | 描述 |
|---|---|
| onabort | 中斷時觸發(fā) |
| onerror | onabort |
| onload | 文件讀取成功完成時觸發(fā) |
| onloadend | 讀取完成觸發(fā)，無論成功或失敗 |
| onloadstart | 讀取開始時觸發(fā) |
| onprogress | 讀取中 |
繼續(xù)上面的操作，在拿到圖片之后，需要將文件進行處理轉(zhuǎn)化，此時
var reader = new FileReader();
//將文件以Data URL形式讀入頁面
reader.readAsDataURL(file);
reader.onload=function(e) {
console.log(reader)
}
現(xiàn)在取到了圖片也進行了轉(zhuǎn)化，現(xiàn)在可以進行壓縮了。
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 圖片質(zhì)量 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; // 默認圖片質(zhì)量為0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 創(chuàng)建屬性節(jié)點
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方法可指定圖片壓縮后的格式及壓縮質(zhì)量，把canvas信息壓縮并轉(zhuǎn)為base64編碼來實現(xiàn)壓縮。
使用canvas制作卡片
場景：把剛剛壓縮之后的圖片與另一張圖片相結(jié)合，可長按進行保存。
function drawCanvas (target) {
var canvas = document.querySelector('#myCanvas')
var ctx = canvas.getContext('2d')
// 是設(shè)備上物理像素和設(shè)備獨立像素(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的信息轉(zhuǎn)為base64編碼來進行實現(xiàn) 。可以通過代碼來進行實例的實踐
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
標簽：赤峰 萍鄉(xiāng) 中山 金昌 阿壩 盤錦 綏化 聊城
巨人網(wǎng)絡(luò)通訊聲明：本文標題《canvas壓縮圖片以及卡片制作的方法示例》，本文關(guān)鍵詞 canvas,壓縮,圖片,以及,卡片,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。