如何編輯使用編輯器保存的圖像

Question

我正在使用畫布和布料js開發圖像編輯器。

我的問題是如何編輯一個圖像，這是通過使用編輯器保存。保存圖像時我必須更改擴展名或什麼？

所以請如果有人知道這個問題請幫助我。提前Thanx。

Answer 1

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, width:100, height:100, top: 100, angle: 00}).scale(0.5); 
 
         canvas.add(oImg).renderAll(); 
 
         var a = canvas.setActiveObject(oImg); 
 
        var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 }); 
 

 
    console.log("Canvas Image " + dataURL); 
 
       document.getElementById('txt').href=dataURL; 
 
}); 
 
       }; 
 
       reader.readAsDataURL(file); 
 
       
 
       
 
      });

canvas{ 
 
       border: 1px solid black; 
 
      }

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
     <canvas id="canvas" width="300" height="300"></canvas> 
 
     <input type="file" id="file"> 
 
     <a href='' id='txt'>Click Me!!</a>