利用canvas下载图片，透明区默认变为黑色

<canvas id="canvas"></canvas>
<div style="display:none;">
<img id="source" src="img/rhino.jpg"
width="300" height="227">
</div>

line-numbers language-js" style="color:rgb(51,51,51);border-width:0px 0px 0px 5px;border-left-style:solid;border-left-color:rgb(63,135,166);margin-top:0px;margin-bottom:20px;padding:1em 0px 1em 3.8em;font-size:14px;line-height:24px;overflow:auto;font-family:consolas, monaco, 'Andale Mono', monospace]
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');

ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

生成的图片

png:

jpg:

解决方案有两种：

1.给canvas填充背景色为白色

[code]

line-numbers language-js" style="margin-top:0px;margin-bottom:20px;color:rgb(51,51,51);border-width:0px 0px 0px 5px;border-left-style:solid;border-left-color:rgb(63,135,166);padding:1em 0px 1em 3.8em;font-size:14px;line-height:24px;overflow:auto;font-family:consolas, monaco, 'Andale Mono', monospace]
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
line-numbers language-js" style="margin-top:0px;margin-bottom:20px;color:rgb(51,51,51);border-width:0px 0px 0px 5px;border-left-style:solid;border-left-color:rgb(63,135,166);padding:1em 0px 1em 3.8em;font-size:14px;line-height:24px;overflow:auto;font-family:consolas, monaco, 'Andale Mono', monospace][code]cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,300,300); 
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);


方法二：利用获取每个像素点值进行转换

[code] // 将canvas的透明背景设置成白色
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
for(var i = 0; i < imageData.data.length; i += 4) {
// 当该像素是透明的，则设置成白色
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);