[英]Fit the background image to canvas size with Fabric js
我正在尝试拉伸背景图像,以使其适合画布大小。 但是它不起作用。
我遵循了这个问题,并根据评论,我实施了扩展代码。
使用Fabric.js将背景图像拉伸到画布大小
http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage
$(function () {
var canvas1 = new fabric.Canvas('canvas1');
//Default
var canvas = canvas1;
//Change background using Image
document.getElementById('bg_image').addEventListener('change', function (e) {
canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
canvas.setBackgroundImage(0, canvas.renderAll.bind(canvas));
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) {
img.set({
width: canvas.getWidth(),
height: canvas.getHeight(),
originX: 'left',
originY: 'top'
});
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
/*canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
width: canvas.getWidth(),
height: canvas.getHeight(),
originX: 'left',
originY: 'top',
crossOrigin: 'anonymous'
});*/
});
};
reader.readAsDataURL(file);
});
});
似乎它不能用于最新的beta版本,但是它可以用于1.7.19版本,但不能用于2.0.0-beta.7。
JSFiddle:版本2.0.0-beta.7: http : //jsfiddle.net/dhavalsisodiya/8vLo882n/3
1.7.19版: http : //jsfiddle.net/dhavalsisodiya/8vLo882n/4/
@spankajd给出的解决方案几乎存在,但仍然不是100%准确的(因为您会看到背景图像并不完全适合画布)。
解决此问题的正确方法确实是使用scaleX
和scaleY
属性(将数字作为缩放因子) ,如@asturur在您提交的问题上提到的那样 。
但是,在这种情况下,您无需设置图像的width
和height
属性。 另外,设置这些图像属性的一种更好(正确)的方法是将它们作为选项(参数)传递给setBackgroundImage()
方法(这可以解决一些性能问题) ,例如:
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
...而不是分别为图像对象设置它们。
话虽如此,这是一个完整的工作示例:
$(function() { var canvas1 = new fabric.Canvas('canvas1'); //Default var canvas = canvas1; canvas.backgroundColor = '#34AD39'; canvas.renderAll(); //Change background using Image document.getElementById('bg_image').addEventListener('change', function(e) { canvas.setBackgroundColor('', canvas.renderAll.bind(canvas)); canvas.setBackgroundImage(0, canvas.renderAll.bind(canvas)); 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) { canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), { scaleX: canvas.width / img.width, scaleY: canvas.height / img.height }); }); }; reader.readAsDataURL(file); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-beta.7/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="margin-top:20px;"> <label class="control-label">Add Background Image</label> <input type="file" id="bg_image" /> </div> <canvas id="canvas1" width="600" height="400" style="border:1px solid #000"></canvas>
您好,请更新以下代码。
img.set({
width: canvas.getWidth(),
height: canvas.getHeight(),
originX: 'left',
scaleX : canvas.getWidth()/img.width, //new update
scaleY: canvas.getHeight()/img.height, //new update
originY: 'top'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.