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

有問題的canvas畫布背景

修改后的畫布背景就可以自適應(yīng)了?

?

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

js部分，重寫了設(shè)置背景的方法。

主要是 使用scale在x軸和y軸上進(jìn)行縮放

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

 setBackgroundImg(imgUrl) {// 創(chuàng)建一個(gè)新的 Image 對(duì)象var img = new Image();// img.crossOrigin = 'Anonymous'; // 設(shè)置允許跨域訪問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ù)寬高比計(jì)算新的高度// 設(shè)置 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'});};},