|
问题：利用canvas下载图片，透明区默认变为黑色
HTML
<canvas id="canvas"></canvas>
<div style="display:none;">
<img id="source" src="img/rhino.jpg"
width="300" height="227">
</div>
JS
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填充背景色为白色
JS var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,300,300);
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
方法二：利用获取每个像素点值进行转换
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);
个人不推荐第二种方法，觉得太繁琐啦
如果觉得太难理解，有篇文章写的更详细，可以点进去了解一下
http://blog.csdn.net/sinat_17775997/article/details/58708042
| 
转播
