fabricjs 图像加载-等比缩放图像到画布

fabricjs 加载图像有两种方式

fabric.Image 同步

var canvas = new fabric.Canvas("canvas",{
   width:800,
   height:600,
});
// 引入图片，或者页面上已经渲染的图片
const img1 = document.getElementById('img1')
let imgInstance = new fabric.Image(img1,{
    left:0,
    top:280,
    width:260,
    height:260
})
canvas.add(img)

fabric.Image.fromURL 异步

// 异步加载图片
const asyncLoadImg = (imgURL) => {
    return new Promise((resolve,reject) => {
        // 2.6.0 版本没有对图片加载异常的处理，需要自己处理
        fabric.Image.fromURL(imgURL, img => {
            // 加载出错提示，否则会造成渲染出错
            if(img._originalElement === null){
              reject('图片加载出错啦~~~')  
            }else {
              resolve(img)
            }
        })
        // 4.2.0版本有错误处理 
        // fabric.Image.fromURL(imgURL, (img,isError) => {})
    })
}

async function initImg(){
    // 这里就不对错误处理了
    let img = await asyncLoadImg('../public/img/5.jfif')
    img.set({
        left:0,
        top:0,
        width:100,
        height:100
    })
    
    canvas.add(img)
    canvas.renderAll()
}

image.png

通过上面的代码我们可以得出， fabric.Image或fabric.Image.fromURL 加载的图片是以图片的实际像素绘制在画布上，如果原图大于设置的宽高，就会基于原图的左上角裁剪固定的宽高，如果原图小于设置的宽高，就会放大以铺满设置宽高，这两种都无法按照我们的需求显示

改变图片的样式

1. 首先要解决的一点就是将原图按照一定的比例缩放到固定的宽高,fabricjs 提供了 scaleX，scaleY 再次基础上.修改

// 原图绘制255*328
let imgInstance2 = new fabric.Image(img2, {
    left: 300,
    top: 280
})
// 固定100*100 原图左上角开始裁剪100*100
let imgInstance3 = new fabric.Image(img2, {
    left: 450,
    top: 280,
    width: 100,
    height: 100
})
// 获得x方向的缩放比，scaleX,scaleY都按照此比例缩放，此时不一定是100*100,除非原图宽高都一样
const imgScale = 100/img2.width
let imgInstance4 = new fabric.Image(img2, {
    left: 450,
    top: 280,
    scaleX: imgScale,
    scaleY: imgScale
})
// scaleX,scaleY都按照不同比例缩放，此时图片才会呈现100*100，其他矩形类似处理，这样有一个弊端，就是会造成图片变形，需要按照实际需求调整
const imgHScale = 100/img2.height
let imgInstance5 = new fabric.Image(img2, {
    left: 450,
    top: 280,
    scaleX: imgScale,
    scaleY: imgHScale
})
canvas.add(imgInstance, imgInstance2,imgInstance3,imgInstance4,imgInstance5)

image.png

注意点: 图片如果是异步加载，加载完一点要调用 canvas.renderAll() 否则不会显示