react開發——html2canvas與scale圖片縮放


一、了解html2canvas和scale

  html2canvas是react中用於把網頁頁面轉化為canvas畫布的函數(我理解的就是拿相機拍張照),舉個例子

  

css中有兩個scale,一個可以直接用,一個是transform中的屬性,直接用的話參數有三種情況,這里就不說了

   

 

 

需要注意的是transform 中的scale和其他屬性不能分開寫,否則會失效

 

 

二、html2canvas在圖片縮放中的坑

  起因是我在寫一個圖像編輯框,平時縮放直接用scale : 1.3; 結果不旋轉沒事,一旋轉之后圖片在水平方向發生了偏移(以下是上面代碼的結果)

  

 

 

  我開始以為是旋轉的鍋,后來發現其實是scale的問題,直接用scale : 1.3;就會導致這個問題,用scale : 1.3,1.3;或者transform: scale(1.3,1.3);就沒事了,我查了下單參數和雙參數的區別,然並卵,看不出區別,希望哪位看明白了給我說一下

  (補充,如果在react中動態更改scale,建議使用transform, docum.getElementById('...').style.scale = `1.3,1.3`    這種寫法似乎會報錯)

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM