fabricjs 加載圖像有兩種方式
fabric.Image 同步
var canvas = new fabric.Canvas("canvas",{
width:800,
height:600,
});
// 引入圖片忆绰，或者頁面上已經(jīng)渲染的圖片
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 版本沒有對(duì)圖片加載異常的處理售担，需要自己處理
fabric.Image.fromURL(imgURL, img => {
// 加載出錯(cuò)提示停做，否則會(huì)造成渲染出錯(cuò)
if(img._originalElement === null){
reject('圖片加載出錯(cuò)啦~~~')
}else {
resolve(img)
}
})
// 4.2.0版本有錯(cuò)誤處理
// fabric.Image.fromURL(imgURL, (img,isError) => {})
})
}
async function initImg(){
// 這里就不對(duì)錯(cuò)誤處理了
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 加載的圖片是以圖片的實(shí)際像素繪制在畫布上兆览，如果原圖大于設(shè)置的寬高苔埋，就會(huì)基于原圖的左上角裁剪固定的寬高，如果原圖小于設(shè)置的寬高亡呵，就會(huì)放大以鋪滿設(shè)置寬高抽活，這兩種都無法按照我們的需求顯示
改變圖片的樣式
- 首先要解決的一點(diǎn)就是將原圖按照一定的比例縮放到固定的寬高,fabricjs 提供了 scaleX，scaleY 再次基礎(chǔ)上.修改
// 原圖繪制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都按照此比例縮放下硕，此時(shí)不一定是100*100,除非原圖寬高都一樣
const imgScale = 100/img2.width
let imgInstance4 = new fabric.Image(img2, {
left: 450,
top: 280,
scaleX: imgScale,
scaleY: imgScale
})
// scaleX,scaleY都按照不同比例縮放，此時(shí)圖片才會(huì)呈現(xiàn)100*100汁胆，其他矩形類似處理梭姓，這樣有一個(gè)弊端，就是會(huì)造成圖片變形嫩码，需要按照實(shí)際需求調(diào)整
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
