我试图拉伸背景图像,使其适合画布大小.但它不起作用.
我已经按照这个问题并根据评论我已经实现了拉伸代码.
Strech the background image to canvas size with 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
varsion 1.7.19:http://jsfiddle.net/dhavalsisodiya/8vLo882n/4/
解决方法:
@spankajd给出的solution几乎在那里,但仍然不是100%准确(因为你会看到背景图像不完全适合画布).
这个问题的正确解决方案确实是使用scaleX
和scaleY
属性(以数字作为缩放系数),如@asturur所提及的issue所述.
但是,在这种情况下,您不需要设置图像的宽度和高度属性.此外,更好(和正确)设置这些图像属性的方法是将它们作为选项(参数)传递给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>