Javascript 使用Fabric js使背景图像适合画布大小

我试图拉伸背景图像，使其适合画布大小。但它不起作用

我遵循了这个问题，并根据评论实现了扩展代码

代码 它似乎不适用于最新的beta版本，但是它适用于1.7.19版本，而不适用于2.0.0-beta.7

JSFiddle： 版本2.0.0-beta.7：

---

版本1.7.19:

您好，请更新以下代码

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'
 });

---

您好，请更新以下代码

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'
 });

给出的几乎在那里，但仍然不是100%准确（正如您将看到的那样，背景图像并不完全适合画布）

这个问题的正确解决方案确实是使用and属性（以数字作为缩放因子），正如您提交的上所述

但是，在这种情况下，您不需要设置图像的宽度和高度属性。另外，设置这些图像属性的更好（也是正确的）方法是将它们作为选项（参数）传递给方法（这可能会解决一些性能问题），例如：

canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
   scaleX: canvas.width / img.width,
   scaleY: canvas.height / img.height
});

。。。而不是分别为图像对象设置它们

尽管如此，以下是一个完整的工作示例：

$（函数（）{
var canvas1=newfabric.Canvas（'canvas1'）；
//违约
var canvas=canvas1；
canvas.backgroundColor='#34AD39'；
canvas.renderAll（）；
//使用图像更改背景
document.getElementById（'bg_image'）。addEventListener（'change'，function（e）{
canvas.setBackgroundColor（“”，canvas.renderal.bind（canvas））；
setBackgroundImage（0，canvas.renderal.bind（canvas））；
var file=e.target.files[0]；
var reader=new FileReader（）；
reader.onload=函数（f）{
var数据=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（文件）；
});
});

添加背景图像
给出的几乎在那里，但仍然不是100%准确（正如您将看到的，背景图像并不完全适合画布）

这个问题的正确解决方案确实是使用and属性（以数字作为缩放因子），正如您提交的上所述

但是，在这种情况下，您不需要设置图像的宽度和高度属性。另外，设置这些图像属性的更好（也是正确的）方法是将它们作为选项（参数）传递给方法（这可能会解决一些性能问题），例如：

canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
   scaleX: canvas.width / img.width,
   scaleY: canvas.height / img.height
});

。。。而不是分别为图像对象设置它们

尽管如此，以下是一个完整的工作示例：


$（函数（）{
var canvas1=newfabric.Canvas（'canvas1'）；
//违约
var canvas=canvas1；
canvas.backgroundColor='#34AD39'；
canvas.renderAll（）；
//使用图像更改背景
document.getElementById（'bg_image'）。addEventListener（'change'，function（e）{
canvas.setBackgroundColor（“”，canvas.renderal.bind（canvas））；
setBackgroundImage（0，canvas.renderal.bind（canvas））；
var file=e.target.files[0]；
var reader=new FileReader（）；
reader.onload=函数（f）{
var数据=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（文件）；
});
});

添加背景图像
我想是2.0测试版的问题，它在以前的版本中起作用version@Durga是的，没错。我正在使用最新版本来使用IText功能。在github上报告了这个问题：我猜是2.0测试版中的问题，它在以前的版本中工作version@Durga是的，没错。我正在使用最新版本来使用IText功能。在github上报告了这个问题：这“拉伸”了图像并且没有保持纵横比。有什么保持比例的建议吗？@Grunt:这实际上不符合图像纵横比。你有解决方案吗？这很好，但在改变背景图像颜色的情况下，它会将图像缩小到一个小尺寸。请检查这里的代码这“拉伸”图像，不保持纵横比。有什么保持比例的建议吗？@Grunt:这实际上不符合图像纵横比。你有解决方案吗？这很好，但在改变背景图像颜色的情况下，它会将图像缩小到一个小尺寸。请检查这里的代码