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 加载的图片是以图片的实际像素绘制在画布上，如果原图大于设置的宽高，就会基于原图的左上角裁剪固定的宽高，如果原图小于设置的宽高，就会放大以铺满设置宽高，这两种都无法按照我们的需求显示
改变图片的样式
- 首先要解决的一点就是将原图按照一定的比例缩放到固定的宽高,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
