Mousewheel on an object
by Simon060694
HTML
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
<input type="file" id="loadImage" />
<button id="printCanvas">
Print
</button>
CSS
canvas {
border: 1px solid #999;
}
JavaScript
var canvas = window._canvas = new fabric.Canvas('c');
function addImage(link) {
return new Promise((resolve)=>{
fabric.Image.fromURL(link, function(img) {
img.set({ left: 0, top: 0, angle: 0 }).scale(canvas.getWidth() / img.width);
canvas.add(img).renderAll();
resolve(img);
});
})
}
/* addImage('https://wallpapershome.com/images/wallpapers/switzerland-3840x2160-4k-5k-wallpaper-alps-mountains-stars-night-5713.jpg').then((img)=>img.set({ selectable: false } ));//add background */
document.getElementById('loadImage').addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
addImage(f.target.result);
};
reader.readAsDataURL(file);
});
printCanvas.addEventListener('click', function printCanvas() {
var activeObj = canvas._objects[0];
var scaleRatio = Math.round(activeObj.width / canvas.getWidth());
var _width = canvas.getWidth();
var _height = canvas.getHeight();
canvas.setDimensions({ width: _width * scaleRatio, height: _height * scaleRatio });
canvas.setZoom(scaleRatio).renderAll();
var a = document.createElement('a');
a.href = window.URL.createObjectURL(dataURItoBlob(canvas.toDataURL()));
a.download = 'image.png';
document.body.appendChild(a);
a.setAttribute('target', '_blank');
a.click();
canvas.setDimensions({ width: _width, height: _height });
canvas.setZoom(1).renderAll();
});
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
// create a view into the buffer
var ia = new Uint8Array(ab);
// set the bytes of the buffer to the correct...