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應用程式非同步讀取儲存在使用者電腦上的檔案（或原始資料緩衝區）的內容

方法：

• readAsText：此方法有兩個參數，其中第二個參數是文字的編碼方式，預設值為UTF-8。這個方法非常容易理解，將文件以文字方式讀取，讀取的結果就是這個文字檔案中的內容。
• readAsBinaryString：該方法將檔案讀取為二進位字串，通常我們將它傳送到後端，後端可以透過這段字串儲存檔案。
• readAsDataURL：這是範例程式中用到的方法，該方法將檔案讀取為一段以data: 開頭的字串，這段字串的實質就是Data URL，Data URL是一種將小檔案直接嵌入文檔的方案。這裡的小檔案通常是指圖像與html 等格式的檔案。 （其中base64的方式就是由此來獲得的。。）

繼續上面的操作，拿到圖片之後，需要將文件進行處理轉化，此時

 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編碼來實現壓縮。

場景：把剛剛壓縮之後的圖片與另一張圖片結合，可長按進行儲存。

 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.backingStore.PixelRatio || || oldWidth = canvas.width var oldHeight = canvas.height canvas.width = oldWidth * ratio canvas.height = oldHeight * ratio canvas.style.width = oldWidth + 'px' canvas.style.styleheight = oldwidth = oldWidth + 'px' canvas.style.mct. (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, 70var) 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武林網。