toDataURL and Canvas zoom level in Fabric.js
https://groups.google.com/forum/?fromgroups#!topic/fabricjs/WQ0jegaIFCY
HTML
<script src="http://fabricjs.com/lib/fabric.js"></script>
<script src="http://www.99lime.com/site/templates/js/kickstart.js"></script>
<link rel="stylesheet" href="http://www.99lime.com/site/templates/css/kickstart.css">
<link rel="stylesheet" href="http://www.99lime.com/site/templates/style.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/css/pygments.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<button id="btnZoomIn" class="large"><i class="icon-zoom-in"></i>
</button>
<button id="btnZoomOut" class="large"><i class="icon-zoom-out"></i>
</button>
<button id="btnResetZoom" class="large"><i class="icon-search"></i> Reset</button>
<button id="btnDataGenerator" class="large"><i class="icon-picture"></i> toDataURL</button>
<br/>
<canvas id="c" width="600" height="600"></canvas>
CSS
canvas {
border-width: 1pz;
border-style: solid;
border-color: #fff;
}
JavaScript
// button Zoom In
$("#btnZoomIn").click(function () {
zoomIn();
});
// button Zoom Out
$("#btnZoomOut").click(function () {
zoomOut();
});
// button Reset Zoom
$("#btnResetZoom").click(function () {
resetZoom();
});
// button Reset Zoom
$("#btnResetZoom").click(function () {
resetZoom();
});
// button data generator
$("#btnDataGenerator").click(function () {
generateDataURL();
});
var src = "https://dl.dropboxusercontent.com/u/491510/robot.png";
var copiedObject;
var copiedObjects = new Array();
var canvasScale = 1;
var SCALE_FACTOR = 1.2;
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#FFFFFF";
console.log(canvas);
// Loading the image in such a way that the canvas is not tainted (as the image is not hosted on this web server)
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function () {
theImage = new fabric.Image(img);
theImage.set({
left: 185,
top: 260
});
theImage.hasRotatingPoint = true;
canvas.add(theImage);
canvas.setActiveObject(theImage);
canvas.renderAll();
}
img.src = src;
// Zoom In
function zoomIn() {
var canvasCenter = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
canvas.zoomToPoint(canvasCenter, canvas.getZoom() * 1.1);
canvas.renderAll();
}
// Zoom Out
function zoomOut() {
var canvasCenter = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
canvas.zoomToPoint(canvasCenter, canvas.getZoom() / 1.1);
canvas.renderAll();
}
// Reset Zoom
function resetZoom() {
var canvasCenter = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
canvas.zoomToPoint(canvasCenter, 1);
canvas.renderAll();
}
function generateDataURL() {
var selectedObject = canvas.getActiveObject();
var dataUrl = selectedObject.toDataURL();
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function () {
theImage = new fabric.Image(img);
...