一、問題:
我的項目使用vue.js + element.js,在引入 canvas 時候,通過標簽的 width 和 height 屬性設置了寬和高,但是顯示長度發生變化,渲染也變形。如圖所示:
這是引入的位置, width 和 height 均被綁定在一個配置對象上,
綁定對象如圖所示:
可見數據已經被設置了,這也是網上大多數博客提供的方法
然而瀏覽器重新加載后,被自動拉伸(高度變為父元素 div 的高度)
左上角顯示canvas的寬和高:800*854,854是父元素 div 的高度
二、解決對策
這是我瞎試出的結果,如果對你無用的話,請輕噴:)
使用一個新的父元素 div 包裹 canvas (增加一個容器)
如圖:
然后重新加載應用,上傳圖片,效果如下:
可見 canvas 寬和高設置正常了。但是剛才加上去的容器的寬和高被設置成了800*854.