在我們?nèi)粘5纳罹W(wǎng)上購(gòu)物中會(huì)看到很多活動(dòng)頁(yè)面里面擁有很多精美的圖片,那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于:“在html中怎么壓縮圖片和制作卡片?canvas標(biāo)簽相關(guān)案例分享! ”這個(gè)問(wèn)題的相關(guān)內(nèi)容,下面是小編收集整理的相關(guān)內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助!
使用canvas壓縮圖片
在 html 中使用寫(xiě)入?input
?標(biāo)簽,?type
?為?file
?時(shí)候,可以調(diào)出手機(jī)的相冊(cè)可供選擇照片,也可以支持?jǐn)z像頭進(jìn)行拍照功能。在這個(gè)場(chǎng)景下,就可能出現(xiàn)圖片的體積會(huì)更大,可能會(huì)超出后端所支持的最大范圍,從而導(dǎo)致上傳失敗。
<input id="file" type="file">
1.首先要先獲取到圖片文件
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) {
reader.readAsDataURL(file);
}
});
2.這個(gè)時(shí)候就取到了圖片文件,就不得不了解一下js中FileReader對(duì)象的使用了
?FileReader
?對(duì)象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容
方法:
方法名 | 參數(shù) | 描述 |
---|---|---|
abort | none | 中斷讀取 |
readAsBinaryString | file | 二進(jìn)制碼 |
readAsDataURL | file | 將文件讀取為 DataURL |
readAsText | file, [encoding] | 將文件讀取為文本 |
- readAsText:該方法有兩個(gè)參數(shù),其中第二個(gè)參數(shù)是文本的編碼方式,默認(rèn)值為 UTF-8。這個(gè)方法非常容易理解,將文件以文本方式讀取,讀取的結(jié)果即是這個(gè)文本文件中的內(nèi)容。
- readAsBinaryString:該方法將文件讀取為二進(jìn)制字符串,通常我們將它傳送到后端,后端可以通過(guò)這段字符串存儲(chǔ)文件。
- readAsDataURL:這是例子程序中用到的方法,該方法將文件讀取為一段以 data: 開(kāi)頭的字符串,這段字符串的實(shí)質(zhì)就是 Data URL,Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。(其中base64的方式就是由此來(lái)獲得的。。)
FileReader處理事件簡(jiǎn)介
事件 | 描述 |
---|---|
onabort | 中斷時(shí)觸發(fā) |
onerror | onabort |
onload | 文件讀取成功完成時(shí)觸發(fā) |
onloadend | 讀取完成觸發(fā),無(wú)論成功或失敗 |
onloadstart | 讀取開(kāi)始時(shí)觸發(fā) |
onprogress | 讀取中 |
繼續(xù)上面的操作,在拿到圖片之后,需要將文件進(jìn)行處理轉(zhuǎn)化,此時(shí)
var reader = new FileReader();
//將文件以Data URL形式讀入頁(yè)面
reader.readAsDataURL(file);
reader.onload=function(e) {
console.log(reader)
}
現(xiàn)在取到了圖片也進(jìn)行了轉(zhuǎn)化,現(xiàn)在可以進(jì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形式讀入頁(yè)面
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 通過(guò)canvas進(jìn)行壓縮]
* @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)
// 默認(rèn)按比例壓縮
var w = this.width
var h = this.height
scale = w / h;
w = targetWidth
h = targetWidth / scale
var quality = quality; // 默認(rèn)圖片質(zhì)量為0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 創(chuàng)建屬性節(jié)點(diǎn)
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)
}
}
很簡(jiǎn)單,這樣就可以得到壓縮后的圖片了,從以上的代碼可得知,原理在于canvas 中的 toDataURL 方法可指定圖片壓縮后的格式及壓縮質(zhì)量,把 canvas 信息壓縮并轉(zhuǎn)為 base64 編碼來(lái)實(shí)現(xiàn)壓縮。
使用canvas制作卡片
場(chǎng)景:把剛剛壓縮之后的圖片與另一張圖片相結(jié)合,可長(zhǎng)按進(jìn)行保存。
function drawCanvas (target) {
var canvas = document.querySelector('#myCanvas')
var ctx = canvas.getContext('2d')
// 是設(shè)備上物理像素和設(shè)備獨(dú)立像素(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)
}
}
取到剛剛得到的圖片,在圖像裝載完畢時(shí)后將其畫(huà)到畫(huà)布上,也可以配上文字等等,最后也是把canvas的信息轉(zhuǎn)為base64編碼來(lái)進(jìn)行實(shí)現(xiàn) ??梢酝ㄟ^(guò)代碼來(lái)進(jìn)行實(shí)例的實(shí)踐
以上就是有關(guān)于這個(gè):“在html中怎么壓縮圖片和制作卡片?canvas標(biāo)簽相關(guān)案例分享! ”這個(gè)問(wèn)題的相關(guān)內(nèi)容,更多有關(guān)于html這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。希望小編分享的內(nèi)容對(duì)你有所幫助。