這個有很多隱藏的bug, 不太建議在生產環境中使用

推薦使用vdom包裝一層, 用fabric畫到canvas中, 或者用后端去畫, 再或者用無頭瀏覽器去截圖

而且對于mac和windows的chrome表現也不一致....

下面是轉換出來的canvas, 用beta版本還可以接受, 但是依然丟失了文字

用官方的版本轉換出來的有問題

body {

width: 100vw;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.wrap {

width: 300px;

height: 300px;

display: flex;

justify-content: center;

align-items: center;

position: relative;

border: 1px solid blue;

}

.bg-img {

width: 100%;

height: 100%;

background: url("./t.jpg") no-repeat;

background-position-x: center;

background-position-y: center;

background-size: contain;

}

.text-input {

width: 400px;

height: 200px;

border: 1px solid red;

background: gray;

opacity: .5;

position: absolute;

}

show

function showCanvas() {

html2canvas(document.querySelector(".wrap", {

width: 300,

height: 300

})).then(canvas => {

document.body.appendChild(canvas)

});

}

總結

以上是生活随笔為你收集整理的html2canvas input,html2canvas 将html绘制到canvas中 [不建议使用]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。