resizeFilter multi touch lag
by SooChangLee
HTML
<div id="div_canvas">
<canvas id="html_canvas" width="500" height="500"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
CSS
#div_canvas {
width: 500px;
height: 500px;
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAB1JREFUGBljZGBgkARiogBRCpmIMgqoaFQh3pACAFoHAEQoNnJ9AAAAAElFTkSuQmCC
) repeat;
}
JavaScript
$(document).ready(function(){
var canvas_option = {
selection: true,
};
var canvas = new fabric.Canvas('html_canvas', canvas_option);
var img_url = "https://s3.ap-northeast-2.amazonaws.com/soochang/self_.JPG";
fabric.Image.fromURL(img_url, function(img) {
img.setOptions({
scaleX: 0.25,
scaleY: 0.25
});
img.resizeFilters.push(new fabric.Image.filters.Resize({
resizeType: 'hermite',
}));
canvas.add(img);
canvas.centerObject(img);
img.setCoords();
}, {
crossOrigin: 'Anonymous'
}
);
});