使用 Fabric js 使背景图像适合画布大小 [英] 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');//默认var 画布 = canvas1;//使用图像改变背景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 = 函数 (f) {var data = f.target.result;fabric.Image.fromURL(数据，函数(img){img.set({宽度:canvas.getWidth(),高度:canvas.getHeight(),originX: '左',originY: '顶部'});canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));/*canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {宽度:canvas.getWidth(),高度:canvas.getHeight(),originX: '左',originY: '顶',crossOrigin: '匿名'});*/});};reader.readAsDataURL(文件)；});});它似乎不适用于最新的测试版，但是它适用于 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 属性图片.此外，设置这些图像属性的更好(和正确)方法是将它们作为选项 (argument) 传递给 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');//默认var 画布 = canvas1;canvas.backgroundColor = '#34AD39';canvas.renderAll();//使用图像改变背景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 = 函数(f){var data = f.target.result;fabric.Image.fromURL(数据，功能(img){canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {scaleX: canvas.width/img.width,scaleY:canvas.height/img.height});});};reader.readAsDataURL(文件)；});});<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">添加背景图片</label><input type="file" id="bg_image"/><canvas id="canvas1" width="600" height="400" style="border:1px solid #000"></canvas>
I am trying to stretch the background image so it can fit the canvas size. But its not working.
I have followed this question and based on comment i have implemented the stretching code.
Strech the background image to canvas size with Fabric.js
http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage
Code
$(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);
});
});
It seems that it is not working with latest beta version, however its working with 1.7.19 version but not with 2.0.0-beta.7
JSFiddle: version 2.0.0-beta.7: http://jsfiddle.net/dhavalsisodiya/8vLo882n/3
varsion 1.7.19: http://jsfiddle.net/dhavalsisodiya/8vLo882n/4/
The solution given by @spankajd is almost there but still not 100% accurate (as you'll see the background image doesn't completely fit to the canvas).
The proper solution to this problem is indeed to use the scaleX and scaleY property (which takes a number as scaling factor), as mentioned by @asturur on your submitted issue.
However, in that case you won't need to set the width and height property of the image. Also, a better (and correct) way of setting those image properties is to pass them as options (argument) to the setBackgroundImage() method (this may resolve some performance issues), as such :
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
... instead of setting them for the image object separately.
that being said, here is a complete working example :
$(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>
这篇关于使用 Fabric js 使背景图像适合画布大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
