canvas to svg
unknown
plain_text
4 years ago
6.1 kB
9
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Card Preview</title>
</head>
<body>
<div id="svg" class="svg" style="border-radius: 15px;">
</div>
<input type="hidden" name="json" value='{"version":"4.3.1","objects":[{"type":"image","version":"4.3.1","originX":"left","originY":"top","left":0,"top":0,"width":327,"height":191,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":2.2,"scaleY":2.2,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"http://dev.livelync.com/backend/img/dummy/card/card_bg_3.svg","crossOrigin":null,"filters":[],"name":"background","custom_attr":{"show_hide":false}},{"type":"image","version":"4.3.1","originX":"left","originY":"top","left":35,"top":35,"width":166,"height":167,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.6,"scaleY":0.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"http://dev.livelync.com/backend/img/dummy/card/logo-3.png","crossOrigin":null,"filters":[],"name":"company_logo","custom_attr":{"show_hide":false,"scaleX":100,"scaleY":100}},{"type":"text","version":"4.3.1","originX":"left","originY":"top","left":35,"top":250,"width":182.18,"height":39.55,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Your Name","fontSize":35,"fontWeight":"bold","fontFamily":"Arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{},"name":"full_name","custom_attr":{"show_hide":false}},{"type":"text","version":"4.3.1","originX":"left","originY":"top","left":35,"top":300,"width":93.55,"height":28.25,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Job Title","fontSize":25,"fontWeight":"normal","fontFamily":"Arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{},"name":"job_title","custom_attr":{"show_hide":false}},{"type":"text","version":"4.3.1","originX":"left","originY":"top","left":150,"top":40,"width":211.13,"height":33.9,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Your Company","fontSize":30,"fontWeight":"bold","fontFamily":"Arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{},"name":"company_name","custom_attr":{"show_hide":false}},{"type":"text","version":"4.3.1","originX":"left","originY":"top","left":155,"top":80,"width":118.15,"height":22.6,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Your Tagline","fontSize":20,"fontWeight":"bold","fontFamily":"Arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{},"name":"tagline","custom_attr":{"show_hide":false}}],"background":"#FFA10A"}'>
<input type="hidden" name="width" value="700">
<input type="hidden" name="height" value="400">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<script>
$(document).ready(function(){
var canvas = new fabric.Canvas();
var json = $("input[name='json']").val();
var width = $("input[name='width']").val();
var height = $("input[name='height']").val();
canvas.setWidth(width);
canvas.setHeight(height);
canvas.loadFromJSON(json, function() {
canvas.renderAll();
var svg = canvas.toSVG();
$("#svg").append(svg);
});
})
</script>
</body>
</html>
Editor is loading...