之前的文章寫過vue2使用fabric實現(xiàn)簡單畫圖demo，完成批閱功能；但是功能不完善，對于很大的圖片就只能顯示一部分出來，不符合我們的需求。這就需要改進，對我們設置的背景圖進行自適應。

有問題的canvas畫布背景

修改后的畫布背景就可以自適應了?

?

創(chuàng)建的具體代碼請看之前的文章，這里只提供解決辦法

js部分，重寫了設置背景的方法。

主要是 使用scale在x軸和y軸上進行縮放

scaleX: _this.fabricObj.width / img.width,
scaleY: _this.fabricObj.height / img.height,

 setBackgroundImg(imgUrl) {// 創(chuàng)建一個新的 Image 對象var img = new Image();// img.crossOrigin = 'Anonymous'; // 設置允許跨域訪問img.src = imgUrl;// 保存外部環(huán)境的引用var _this = this;// 在圖片加載完成后執(zhí)行操作img.onload = function () {var aspectRatio = img.width / img.height;var newWidth = 750; // 新的寬度為 750var newHeight = newWidth / aspectRatio; // 根據(jù)寬高比計算新的高度// 設置 Canvas 的寬度和高度_this.fabricObj.setWidth(newWidth);_this.fabricObj.setHeight(newHeight);// 將背景圖片添加到Canvas中_this.fabricObj.setBackgroundImage(img.src,function () {_this.fabricObj.renderAll();},{scaleX: _this.fabricObj.width / img.width,scaleY: _this.fabricObj.height / img.height,crossOrigin: 'anonymous'});};},