Fabricjs：显示横幅的预览

Question

I am using fabricjs 1.5 and I am stuck on 1 thing. I want to show the preview of the canvas to the user on click of button and I can not come up with a proper solution. Some things that crossed my mind are:

• Save the current canvas state and then render it on the other canvas

• Create a temporary image save function and then show this image

But I want to know if there is any specific function in the fabricjs that can help me achieve this. I did some R&D and could not find anything and hence I have not tried anything.

Answer 1

Use canvas.toDataURL() to get the image of canvas, and set it to image source.

DEMO

var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Circle({radius:100,fill:'red'}))
function setPreview(){
 document.getElementById('img').src = canvas.toDataURL();
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="setPreview()">Preview</button><br>
<canvas id="c" width="200" height="200" style="border:1px solid #ccc"></canvas>
<br>
<img id='img'/>

</div>