在画布中绘制图像删除Fll背景

Question

在从画布导出图像之前，我创建了一个新画布，我在那里进行一些操作（裁剪等）。在这个新画布中，我将背景填充为蓝色，这样当我导出图像时，背景为蓝色。但是，当我从第一个画布中放入绘图时，它会使背景的一部分透明。我该如何解决这个问题？

这是第一幅画布的绘图：

这就是我想要的：

但我得到以下内容：

这是我的代码部分：

//Create Copy of Canvas
var copyOfContext = document.createElement('canvas').getContext('2d');
copyOfContext.canvas.width = c.width;
copyOfContext.canvas.height = c.height;
copyOfContext.fillStyle = "yellow";
copyOfContext.fillRect(0, 0, c.width, c.height);
copyOfContext.putImageData(trimmedRect, 0, 0);

croppedImageURL = copyOfContext.canvas.toDataURL("image/png");

编辑：我在第一个画布中没有这样做的原因是bc我有一个特定的外观适合网页，所以我使用第二个画布来获得我想要的结果和颜色。 ：）

Answer 1

要从画布复制到画布，只需使用<script type="text/javascript" var counter = 0;></script> Then come my important code : <div class= "col-md-4" ng-repeat="coffeedata in coffecataloge"> <img id="product-images" style="margin-top:20px;margin-left:30px;width:50px;height:50px"/> <script type="text/javascript" > counter += 1; </script> </div> 。

该演示展示了它是如何完成的。

drawImage