使用Fabric js 将背景图拉伸为画布大小

工作上遇到需求,需要能上传1.5倍图,但仍然按1倍图显示,因此需要进行拉伸。

let width = 750
let height = 300

let imageUrl = ""

let options = {
    scaleX: width / originWidth, //计算出图片要拉伸的宽度比例
    scaleY: height / originHeight, //计算出图片要拉伸的高度比例
}
var canvas = new fabric.Canvas("canvas-id", {
    width: width,
    height: height,
})
canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), options)

使用fabric.Image.fromURL加载img也是同理,核心是scaleX和scaleY。

你可能感兴趣的:(前端,javascript,html)