Javascript 当背景图像处于'；它放大了吗？

我正在使用。我的画布是

800x800

像素，画布背景图像是

1920x1080

像素

放大后，我只能平移照片的一部分，其他部分不可见

注意：我使用Shift键进行平移

将背景照片适合画布的方法是什么，如下所示：

我希望避免从传入图像进一步缩小。它变得太小了，这是不必要的

注意：我正在使用这个

下面是我当前的代码和堆栈片段

var canvas=newfabric.canvas（'c'）；
var json=“{”version:“3.1.0”，“objects:“{”type:“group”，“version:“3.1.0”，“originX:“left”，“originY:“top”，“left:”1656.26，“top:”355.65，“width:”76.48，“height:”76，“fill:”rgb（0,0,0）”，“stroke:”null，“strokeWidth:”0，“strokeDashArray:”null，“strokeLineCap:“butt”，“strokeDashOffset:”0，“strokeLineJoin:”0，“strokeLineJoin:“miter”，“stroker”，“strokeIterLimit:”4，“scaleX:”1，“sca，“angle”：0，“flipX”：false，“flipY”：false，“opacity”：1，“shadow”：null，“visible”：true，“clipTo”：null，“backgroundColor”：“fillRule”：“nonzero”，“paintFirst”：“fill”，“globalCompositeOperation”：“source over”，“transformMatrix”：null，“skewX”：0，“skewY”：0，“id”：“1298”，“Object”：[{“type”：“rect”，“version”：“3.1.0”，“originX”：“left”：“left”，“originY”：“top”，“left”：-20”，“top”：-13，”宽度：35，“高度”：50，“填充”：“#0000ff”，“笔划”：空，“笔划宽度”：1，“笔划DashArray”：空，“笔划线帽”：“butt”，“笔划DashOffset”：0，“笔划线连接”：“miter”，“strokeMiterLimit”：4，“scaleX”：1，“scaleY”：1，“angle”：0，“flipX”：false，“不透明度”：1，“阴影”：空，“可见”：真，“clipTo”：空，“backgroundColor”：“fillRule”：“非零”paintFirst:“fill”，“globalCompositeOperation:“source over”，“transformMatrix:”null，“skewX:”0，“skewY:”0，“rx:”0，“ry:”0，“id:”1298“，“{”type:”text“，”version:”3.1.0“，”originX:”center“，”originY:”top“，”top:”38，“width:”32.99，“height:”20.34，“fill:“red”，“stroke:”null，“strokedaweWidth:”1，“strokeDashArray:”null，“strokeDashWidth:”1，“strokeArray:strokeDashOffset:0，“strokeLineJoin”：“斜接”、“StrokeMiterLit”：4，“scaleX”：1，“scaleX”：1，“角度”：0，“flipX”：false，“flipY”：false，“不透明度”：1，“阴影”：null，“可见”：true，“clipTo”：null，“backgroundColor”：“白色”、“fillRule”：“非零”，“paintFirst”：“填充”、“globalCompositeOperation”：“源代码覆盖”、“transformMatrix”：null，“skewX”：0，“skewY”：0，“skewY”：0，“文本”：“Rect”fontSize“：18，“fontWeight”：“normal”，“fontFamily”：“Quicksand”，“fontStyle”：“normal”，“lineHeight”：1.16，“underline”：false，“overline”：false，“linethrough”：false，“textAlign”：“left”，“textBackgroundColor”：“charSpacing”：0，“styles”：{}}}]}]，“backgroundImage”：{“type”：“image”，“version”：“3.1.0”，“originX”：“left”，“originY”，“originY”：“top”，“left”，“left”：0”，“top”：宽度：1920”高度：1080，“填充”：“rgb（0,0,0）”，“笔划”：空，“笔划宽度”：0，“笔划DashArray”：空，“笔划线帽”：“butt”，“笔划DashOffset”：0，“笔划线连接”：“miter”，“strokeMiterLimit”：4，“scaleX”：1，“scaleY”：1，“angle”：0，“flipX”：false，“不透明度”：1，“阴影”：空，“可见”：真，“clipTo”：空，“backgroundColor”：“fillRule”：“非零”，“paintFirst”：”：”fill、“globalCompositeOperation”：“source over”、“transformMatrix”：null、“skewX”：0、“skewY”：0、“crossOrigin”：“cropX”：0、“cropY”：0、“src”：https://i.hizliresim.com/0pIPiv.jpg“，”过滤器“：[]}”
loadFromJSON（json，（）=>canvas.renderal（），（o，object）=>{
object.on（'选定'，（）=>{
console.log（object.id）；
});
canvas.selection=false；
}
);
//canvas.setBackgroundImage（'https://i.hizliresim.com/iBHC0t.jpg，canvas.renderAll.bind（canvas））；
//https://i1.wp.com/onideal.com/wp-content/uploads/2020/03/Schlafzimmer-Grundriss-ideale-Position-Bett-Moebel-Kleiderschrank-dreieckchen-4-780x646.jpg
//杜尼亚https://hizliresim.com/0pIPiv.jpg
//var uniqid=“0”；
var-uniqids=0；
$（“#门”）。在（“点击”上，功能（e）{
rect=新结构。rect({
id:uniqid，
左:40,，
前40名，
宽度：35，
身高：50，
填充：“蓝色”，
笔划：“蓝色”，
冲程宽度：5，
笔划制服：错，
哈斯：是的，
});  
var uniqid=uniqids.toString（）；
var text=new fabric.text（uniqid{
尺寸：30，
原文：“中心”，
原创：“对”
});
var group=new fabric.group（[rect，text]{
左:0,，
前100名，
});
canvas.add（组）；
uniqids++；
canvas.on（'selection:cleared'，c=>{
控制台日志（“空”）；
});
canvas.selection=false；
});
//*****************************
canvas.on（'mouse:wheel'，函数（opt）{
var delta=选择e deltaY；
var zoom=canvas.getZoom（）；
缩放*=0.999**delta；
如果（缩放>20）缩放=20；
如果（缩放<0.01）缩放=0.01；
canvas.setZoom（缩放）；
opt.e.preventDefault（）；
选择e.停止播放（）；
})
$（'#getid'）。单击（函数（）{
var activeObject=canvas.getActiveObjects（）；
警报（canvas.getActiveObject（）.id）；
});
//***************************************
$（#保存”）。在（“单击”上，函数（e）{
$（“.save”）.html（canvas.toSVG（））；
});
$（“#删除”）。单击（函数（）{
var activeObject=canvas.getActiveObjects（）；
canvas.discardActiveObject（）；
canvas.remove（…activeObject）；
});
$（“#btnResetZoom”）。打开（“单击”，函数（e）{
setViewportTransform（[1,0,0,1,0,0]）；
});
canvas.on（'mouse:wheel'，函数（opt）{
var delta=选择e deltaY；
var zoom=canvas.getZoom（）；
缩放*=0.999**delta；
如果（缩放>20）缩放=20；
如果（缩放<0.01）缩放=0.01；
zoomToPoint（{x:opt.e.offsetX，y:opt.e.offsetY}，zoom）；
opt.e.preventDefault（）；
选择e.停止播放（）；
});
var shiftKeyDown
new fabric.Image.fromURL('https://i.hizliresim.com/0pIPiv.jpg', (img) => {
  img.set({
    left: 0,
    top: 0
  });
  canvas.add(img);
});

img.scaleToHeight(800);
img.scaleToWidth(800);