toDataURL and Canvas zoom level in Fabric.js
https://groups.google.com/forum/?fromgroups#!topic/fabricjs/WQ0jegaIFCY
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<button id="btnImgNormal" class="large"><i class="icon-picture"></i> Normal image</button>
<button id="btnImgResSlice" class="large"><i class="icon-picture"></i> Slice by 2 Hack</button>
<button id="btnImgResStep" class="large"><i class="icon-picture"></i> steps Hack</button>
<button id="btnImgResHermite" class="large"><i class="icon-picture"></i> Fast Hermite</button>
<br/>
<canvas id="c" width="600" height="600"></canvas>
CSS
canvas {
border-width: 1pz;
border-style: solid;
border-color: #000;
}
JavaScript
// button Zoom In
$("#btnImgNormal").click(function () {
imag.src = '';
imag.onload = function () {
var theImage = new fabric.Image(imag, {top:5, left:5});
theImage.scaleX = 1/6;
theImage.scaleY = 1/6;
canvas.add(theImage);
canvas.renderAll();
}
imag.src = src;
});
// button Zoom Out
$("#btnImgResSlice").click(function () {
imag.src = '';
imag.onload = function () {
var theImage = new fabric.Image(imag, {top:5, left:225});
theImage.resizeFilter = new fabric.Image.filters.Resize({resizeType: 'sliceHack'});
theImage.scaleX = 1/6;
theImage.scaleY = 1/6;
canvas.add(theImage);
theImage.applyResizeFilter(null, function() {canvas.renderAll();});
}
imag.src = src;
});
// button Reset Zoom
$("#btnImgResStep").click(function () {
imag.src = '';
imag.onload = function () {
var theImage = new fabric.Image(imag, {top:155, left:5});
theImage.resizeFilter = new fabric.Image.filters.Resize({resizeType: 'stepHack'});
theImage.scaleX = 1/6;
theImage.scaleY = 1/6;
canvas.add(theImage);
theImage.applyResizeFilter(null, function() {canvas.renderAll();});
}
imag.src = src;
});
$("#btnImgResHermite").click(function () {
imag.src = '';
imag.onload = function () {
var theImage = new fabric.Image(imag, {top:155, left:225});
theImage.resizeFilter = new fabric.Image.filters.Resize({resizeType: 'hermite'});
theImage.scaleX = 1/6;
theImage.scaleY = 1/6;
canvas.add(theImage);
theImage.applyResizeFilter(null, function() {canvas.renderAll();});
}
imag.src = src;
});
var src = "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Equus_quagga_%28Namutoni%2C_2012%29.jpg/1280px-Equus_quagga_%28Namutoni%2C_2012%29.jpg";
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#FFFFFF";
var imag = new Image();
imag.crossOrigin = "anonymous";