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

时间:2016-04-30 00:56:24

标签: javascript jquery html5 canvas

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

这是第一幅画布的绘图:

enter image description here

这就是我想要的:

enter image description here

但我得到以下内容:

enter image description here

这是我的代码部分:

//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我有一个特定的外观适合网页,所以我使用第二个画布来获得我想要的结果和颜色。 :)

1 个答案:

答案 0 :(得分: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

相关问题