上传 canvas 中的多张图片转换为一张图片(Html5)

Question

我想将 canvas 转换成一张图片。现在我正在使用 Html5 canvas 和 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 link:https://jsfiddle.net/varunPes/8gt6d7op/

但我最终想把这个 canvas 转换成一张图片。因为我想将最终图像发送到服务器。

屏幕截图：

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

Fabric.js 图书馆代码 link..https://github.com/kangax/fabric.js/blob/master/dist/fabric.js

请分享您对此问题的想法。

Answer 1

根据 Fabric.js 文档，Canvas.toDataURL 方法应该 return 组合 canvas.

的 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

上传 canvas 中的多张图片转换为一张图片(Html5)

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

javascript

css

jquery

canvas

html5-canvas