关于javascript：将画布中的多个图像上传到一个图像中(HTML5)


Uploaded multple images in canvas convert into one image(Html5)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
   canvas{
   border: 1px solid black;
   }
</style>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js">
<canvas id="canvas" width="750" height="550"></canvas>
<input type="file" id="file">

   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);              
   });

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

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

截屏：
enter image description here

现在我正在获取画布的转换图像，但是第一次上传的图像未显示在画布图像中。请参阅JSFiddle进行澄清。
上传图像后，在控制台中生成图像的一些基本代码，将该基本代码粘贴到地址栏中，然后缺少一个图像。如何获得画布的最终图像。

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

请分享您对这个问题的想法。

根据Fabric.js文档，Canvas.toDataURL方法应返回所组成画布的Base64表示形式。

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

这时，dataURL是可以发送回服务器的字符串。

相关讨论

canvas.toDataURL转换

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

需要在图像加载后完成。它的当前位置不正确，因此您将得到一个图像uri，它将丢失最后添加的图像。
请检查此小提琴

相关讨论