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

Question

我正在使用 javascript 将多个图像合并为一个图像。但是使用 javascript 创建的 canvas 显示为黑色。我知道 canvas 的默认 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);
});

写了fiddle同样

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

Answer 1

问题是 image/jpg 不接受字母值（透明度），您应该将数据呈现为接受的任何格式，例如 image/png.

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

查看此更正 fiddle

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

Merge images into one using canvas not working properly

javascript

canvas

html5-canvas