當前上傳的圖像沒有設置在html5中將圖像轉換爲圖像後的確切位置

Question

我想從畫布轉換後的圖像。我將多張圖片上傳到畫布上，並將Fabric.js，上傳多張圖片轉換後的畫布轉換爲圖片，但上一張圖片沒有固定在期望的位置。

上傳的圖片：

點擊後我：

代碼：

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); 
 
     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="750" height="550"></canvas> 
 
<input type="file" id="file"> 
 
<a href="" id="txt">Click Me!!</a>

請檢查的jsfiddle： https://jsfiddle.net/varunPes/8gt6d7op/5/

請給我一些想法。

Answer 1

如果我明白這個問題正確..

問題

您設置href屬性一旦當upload input變化。如果在此之後您更改了任何屬性href的值不會更改。

解決方案

從畫布獲取dataURI當你點擊鏈接，然後產生的dataURI和顯示正確的圖像。

完整的代碼

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); 
 
     var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 }); 
 

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

 
document.querySelector('#txt').onclick = function(e) { 
 
    e.preventDefault(); 
 
    canvas.deactivateAll().renderAll(); 
 
    document.querySelector('#preview').src = canvas.toDataURL(); 
 
}

canvas{ 
 
    border: 1px solid black; 
 
}

<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"> 
 
<a href="#" id="txt">Click Me!!</a> 
 
<br /> 
 
<img id="preview" />

注：後點擊 「點擊我！」我在頁面底部顯示圖像，而不是將用戶重定向到圖像「頁面」。通過這種方式，您可以輕鬆查看更改，並且無需每次都重新加載頁面。

更新：

現在你導出圖像之前的片段，該功能使canvas停用內的所有元素，以便它們的邊界將刪除。感謝：How to remove borders and corners from Canvas object? [Fabric.js]