解決canvas轉(zhuǎn)base64jpeg時透明區(qū)域變成黑色背景的方法
在用canvas將png圖片轉(zhuǎn)jpeg時，發(fā)現(xiàn)透明區(qū)域被添補成黑色。
代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<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>
結(jié)果如下：
為什么canvas會png的透明區(qū)域轉(zhuǎn)成黑色呢？
canvas轉(zhuǎn)換成jpeg之前移除alpha通道，所以透明區(qū)域被添補成了黑色。
但是，我們盼望的是，canvas可以將png的透明區(qū)域添補成白色。
那么怎么將canvas中的透明區(qū)域添補成白色呢？
以下是我實踐過的兩種解決方案，盼望對你有幫助。
解決方案一：將透明的pixel設(shè)成白色
由于png圖片的背景都是透明的，所以我們可以探求透明的pixel，然后將其悉數(shù)設(shè)置成白色，核心代碼如下：
javascript Code復(fù)制內(nèi)容到剪貼板
// 將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);
完備代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<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>
結(jié)果如下：
瑕玷顯而易見。當png圖片上存在半透明區(qū)域時，會將其添補為黑色。這是我們不盼望的。
解決方案二：在canvas繪制前添補白色背景
核心代碼如下：
javascript Code復(fù)制內(nèi)容到剪貼板
// 在canvas繪制前添補白色背景
context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);
完備代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<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>
結(jié)果如下：
Perfect！
顯然，在canvas繪制前添補白色背景這種方法，不僅簡單，而且對png圖片的半透明區(qū)域添補難看的黑色塊。保舉這種解決方案。
另：canvas.toDataURL()方法不許可處理跨域圖片。否則會報錯。
總結(jié)
以上就是這篇文章的悉數(shù)內(nèi)容了，盼望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來肯定的幫助，假如有疑問大家可以留言交流。
本文地址：http://m.likemindfilms.com/tutorial/wd3329.html
