您好,登錄后才能下訂單哦!
小編給大家分享一下如何解決canvas轉(zhuǎn)base64/jpeg時透明區(qū)域變成黑色背景的問題,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
在用canvas將png圖片轉(zhuǎn)jpeg時,發(fā)現(xiàn)透明區(qū)域被填充成黑色。
代碼如下:
<p>Canvas:</p> <canvas id="canvas" style="border: 1px solid #ccc;"></canvas> <br> <p>Base64轉(zhuǎn)碼后的圖片:</p> <div id="base64Img"></div> <script type="text/javascript"> var base64Img = document.getElementById("base64Img"), canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); // 創(chuàng)建新圖片 var img = new Image(); img.src = "1.png"; img.addEventListener("load", function() { // 繪制圖片到canvas上 canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0); getBase64(canvas, function(dataUrl) { // 展示base64位的圖片 var newImg = document.createElement("img"); newImg.src = dataUrl; base64Img.appendChild(newImg); }); }, false); // 獲取canvas的base64圖片的dataURL(圖片格式為image/jpeg) function getBase64(canvas, callback) { var dataURL = canvas.toDataURL("image/jpeg"); if(typeof callback !== undefined) { callback(dataURL); } } </script>
效果如下:
為什么canvas會png的透明區(qū)域轉(zhuǎn)成黑色呢?
canvas轉(zhuǎn)換成jpeg之前移除alpha通道,所以透明區(qū)域被填充成了黑色。
但是,我們希望的是,canvas可以將png的透明區(qū)域填充成白色。
那么怎么將canvas中的透明區(qū)域填充成白色呢?
以下是我實踐過的兩種解決方案,希望對你有幫助。
解決方案一:將透明的pixel設(shè)成白色
因為png圖片的背景都是透明的,所以我們可以尋找透明的pixel,然后將其全部設(shè)置成白色,核心代碼如下:
// 將canvas的透明背景設(shè)置成白色 var imageData = context.getImageData(0, 0, canvas.width, canvas.height); for(var i = 0; i < imageData.data.length; i += 4) { // 當該像素是透明的,則設(shè)置成白色 if(imageData.data[i + 3] == 0) { imageData.data[i] = 255; imageData.data[i + 1] = 255; imageData.data[i + 2] = 255; imageData.data[i + 3] = 255; } } context.putImageData(imageData, 0, 0);
完整代碼如下:
<p>Canvas:</p> <canvas id="canvas" style="border: 1px solid #ccc;"></canvas> <br> <p>Base64轉(zhuǎn)碼后的圖片:</p> <div id="base64Img"></div> <script type="text/javascript"> var base64Img = document.getElementById("base64Img"), canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); // 創(chuàng)建新圖片 var img = new Image(); img.src = "1.png"; img.addEventListener("load", function() { // 繪制圖片到canvas上 canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0); // 將canvas的透明背景設(shè)置成白色 var imageData = context.getImageData(0, 0, canvas.width, canvas.height); for(var i = 0; i < imageData.data.length; i += 4) { // 當該像素是透明的,則設(shè)置成白色 if(imageData.data[i + 3] == 0) { imageData.data[i] = 255; imageData.data[i + 1] = 255; imageData.data[i + 2] = 255; imageData.data[i + 3] = 255; } } context.putImageData(imageData, 0, 0); // 展示base64位的圖片 getBase64(canvas, function(dataUrl) { var newImg = document.createElement("img"); newImg.src = dataUrl; base64Img.appendChild(newImg); }); }, false); // 獲取canvas的base64圖片的dataURL(圖片格式為image/jpeg) function getBase64(canvas, callback) { var dataURL = canvas.toDataURL("image/jpeg"); if(typeof callback !== undefined) { callback(dataURL); } } </script>
效果如下:
缺點顯而易見。當png圖片上存在半透明區(qū)域時,會將其填充為黑色。這是我們不希望的。
解決方案二:在canvas繪制前填充白色背景
核心代碼如下:
// 在canvas繪制前填充白色背景 context.fillStyle = "#fff"; context.fillRect(0, 0, canvas.width, canvas.height);
完整代碼如下:
<p>Canvas:</p> <canvas id="canvas" style="border: 1px solid #ccc;"></canvas> <br> <p>Base64轉(zhuǎn)碼后的圖片:</p> <div id="base64Img"></div> <script type="text/javascript"> var base64Img = document.getElementById("base64Img"), canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); // 創(chuàng)建新圖片 var img = new Image(); img.src = "1.png"; img.addEventListener("load", function() { // 繪制圖片到canvas上 canvas.width = img.width; canvas.height = img.height; // 在canvas繪制前填充白色背景 context.fillStyle = "#fff"; context.fillRect(0, 0, canvas.width, canvas.height); context.drawImage(img, 0, 0); // 展示base64位的圖片 getBase64(canvas, function(dataUrl) { var newImg = document.createElement("img"); newImg.src = dataUrl; base64Img.appendChild(newImg); }); }, false); // 獲取canvas的base64圖片的dataURL(圖片格式為image/jpeg) function getBase64(canvas, callback) { var dataURL = canvas.toDataURL("image/jpeg"); if(typeof callback !== undefined) { callback(dataURL); } } </script>
效果如下:
Perfect!
顯然,在canvas繪制前填充白色背景這種方法,不僅簡單,而且對png圖片的半透明區(qū)域填充難看的黑色塊。推薦這種解決方案。
另:canvas.toDataURL()方法不允許處理跨域圖片。否則會報錯。
看完了這篇文章,相信你對“如何解決canvas轉(zhuǎn)base64/jpeg時透明區(qū)域變成黑色背景的問題”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。