在做一些活動頁的時候，經常會有一些需要上傳圖片的需求，并且還需要將圖片以及生成的文字以及貼圖生成一張卡可以供用戶可以長按保存。這個需求之前完成過一次，最近又遇上了，使用的都是canvas來實現的。干脆整理出一篇博客出來。如果有更好的實現方法，歡迎提出一起探討。
使用canvas壓縮圖片
在html中使用寫入input標簽，type為file時候，可以調出手機的相冊可供選擇照片，也可以支持攝像頭進行拍照功能。在這個場景下，就可能出現圖片的體積會更大，可能會超出后端所支持的最大范圍，從而導致上傳失敗。
<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.這個時候就取到了圖片文件，就不得不了解一下js中FileReader對象的使用了
FileReader對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容
方法：
| 方法名 | 參數 | 描述 |
|---|---|---|
| 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編碼來進行實現 。可以通過代碼來進行實例的實踐
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
