我已经使用fabric.Image.fromURL在画布中加载图像,并使用默认图像宽度和高度正常工作。 现在我想尽量减少图像的宽度和高度。 如何做到这一点?如何在fabric.js中设置图片的高度和宽度?
在此先感谢。
我已经使用fabric.Image.fromURL在画布中加载图像,并使用默认图像宽度和高度正常工作。 现在我想尽量减少图像的宽度和高度。 如何做到这一点?如何在fabric.js中设置图片的高度和宽度?
在此先感谢。
使用图像缩放属性而不是图像大小。这对我有效。当我设置图像的宽度和高度而不是比例时,当我应用滤镜时,它会重置为原始宽度和高度,因为比例为1.0。希望这可以帮助。
我们可以使用scalex/scaley来设置高度/宽度如下。
fabric.util.loadImage(imgsrc, function (img) {
var legimg = new fabric.Image(img, {
left: 30,
top: marker.top,
scaleX: 20/img.width,
scaleY: 20/img.height
});
canvas.add(legimg);
canvas.renderAll();
});
感谢
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
canvas{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
我们可以设置宽度和高度。
入住此的jsfiddle:https://jsfiddle.net/varunPes/8gt6d7op/5/
希望这将有助于
var src; //Image source here
fabric.Image.fromURL(src, function(oImg) {
oImg.scaleToWidth(50);
oImg.scaleToHeight(50);
});
是不是有一种方法来使用set方法来设置一个对象的属性(Image incase of here) 对我来说@解决方案@ user2148228工作设置任何其他属性如角度,宽度,高度鳞片等 –
什么是你的画布变量? – IsmailS
明白了。它基本上是面料画布'新fabric.Canvas('idOfCanvasElement');' – IsmailS