在canvas中上传的多个图像转换为一个图像（Html5）

Question

我想将画布转换为一个图像。现在我使用Html5画布和FebricJs上传多个图像。 代码：

<style>
   canvas{
   border: 1px solid black;
   }
</style>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas" width="750" height="550"></canvas>
<input type="file" id="file">
<script>
   var canvas = new fabric.Canvas('canvas');
   document.getElementById('file').addEventListener("change", function (e) {
       var file = e.target.files[0];
       var reader = new FileReader();
       reader.onload = function (f) {
           var data = f.target.result;
           fabric.Image.fromURL(data, function (img) {
               var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
               canvas.add(oImg).renderAll();
               var a = canvas.setActiveObject(oImg);
           });

       };
        reader.readAsDataURL(file);

   var dataURL = canvas.toDataURL({
       format: 'png',
       opacity: 0.9
   });
     console.log("Canvas Image " + dataURL);              
   });

</script>

我的JSFiddle链接：https://jsfiddle.net/varunPes/8gt6d7op/

但我希望这个画布最终转换成一个图像。因为我想将最终图像发送到服务器。

屏幕截图：

现在我正在获取画布的转换图像，但第一次上传的图像没有显示在画布图像中。有关说明，请参阅JSFiddle。 上传图像后在控制台中生成一些图像的基本代码，此基本代码粘贴在地址栏中，然后缺少一个图像。如何获得画布的最终图像。

Fabric.js库代码链接.. https://github.com/kangax/fabric.js/blob/master/dist/fabric.js

请与您分享您的想法。

Answer 1

根据Fabric.js文档，Canvas.toDataURL方法应该返回组合画布的Base64表示。

var dataURL = canvas.toDataURL({
  format: 'jpeg',
  quality: 0.8
});

此时dataURL是一个字符串，您可以将其发送回服务器。

Answer 2

canvas.toDataURL 转化

var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });

需要在加载图像后完成。它当前的展示位置不正确，因此您将获得一张图片uri，该图片会丢失最后添加的图片。 请查看此fiddle