Question

我正在使用javascript将多个图像合并为一个。但是使用javascript创建的画布显示为黑色。我知道画布的默认bg颜色是透明的，但在我的情况下发生了错误。

HTML：

<div class="sampleImages">
    <img src="xyz.png" />
    <img src="abc.png" />
</div>
<br>
<button type="button">Convert to single img</button>
<br>
<img id="result" />

JS：

$("button").on("click",function(){
    var c=document.createElement("canvas");
    c.width=250;
    c.height=250;
    var ctx=c.getContext("2d");
    $(".sampleImages>img").each(function(index){
        ctx.drawImage(this,0,0);
    });
    var dataURL = c.toDataURL("image/jpeg");
    $("#result").attr("src",dataURL);
});

同样的小提琴

http://jsfiddle.net/reoo21kq/2/

Answer 1

问题在于image/jpg不接受alpha值（trasparency），您应该将数据渲染为任何格式，例如image/png。

var dataURL = c.toDataURL("image/png");

查看此更正fiddle

使用画布无法正常工作将图像合并为一个

1 个答案: