在做一些活動(dòng)頁的時(shí)候，經(jīng)常會(huì)有一些需要上傳圖片的需求，并且還需要將圖片以及生成的文字以及貼圖生成一張卡可以供用戶可以長按保存。這個(gè)需求之前完成過一次，最近又遇上了，使用的都是canvas來實(shí)現(xiàn)的。干脆整理出一篇博客出來。如果有更好的實(shí)現(xiàn)方法，歡迎提出一起探討。
使用canvas壓縮圖片
在html中使用寫入input標(biāo)簽，type為file時(shí)候，可以調(diào)出手機(jī)的相冊(cè)可供選擇照片，也可以支持?jǐn)z像頭進(jìn)行拍照功能。在這個(gè)場景下，就可能出現(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] | 將文件讀取為文本 |
FileReader處理事件簡介
| 事件 | 描述 |
|---|---|
| onabort | 中斷時(shí)觸發(fā) |
| onerror | onabort |
| onload | 文件讀取成功完成時(shí)觸發(fā) |
| onloadend | 讀取完成觸發(fā)，無論成功或失敗 |
| onloadstart | 讀取開始時(shí)觸發(fā) |
| onprogress | 讀取中 |
繼續(xù)上面的操作，在拿到圖片之后，需要將文件進(jìn)行處理轉(zhuǎn)化，此時(shí)
var reader = new FileReader(); //將文件以Data URL形式讀入頁面 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形式讀入頁面 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進(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) } }很簡單，這樣就可以得到壓縮后的圖片了，從以上的代碼可得知，原理在于canvas中的toDataURL方法可指定圖片壓縮后的格式及壓縮質(zhì)量，把canvas信息壓縮并轉(zhuǎn)為base64編碼來實(shí)現(xiàn)壓縮。
使用canvas制作卡片
場景：把剛剛壓縮之后的圖片與另一張圖片相結(jié)合，可長按進(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í)后將其畫到畫布上，也可以配上文字等等，最后也是把canvas的信息轉(zhuǎn)為base64編碼來進(jìn)行實(shí)現(xiàn) 。可以通過代碼來進(jìn)行實(shí)例的實(shí)踐
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
