前端生成海報使用 html2canvas 及其注意事項

標簽（空格分隔）：前端 html2canvas

[toc]

前言

最近用有個需求需要上傳圖片然后生成海報保存碗短，使用了 html2canvas 來實現(xiàn)秸脱，這里記錄一下實現(xiàn)過程與遇到的問題

生成海報過程

1.用戶上傳圖片碉熄，拿到 File 對象或者 ObjectURL

2.ios 需要修復上傳圖片的旋轉角度腹忽，需要使用配合 exif.js 與 canvas 來解決，可參考以下代碼泉褐。參看《移動端圖片上傳旋轉届宠、壓縮的解決方案》

// 主過程
img.onload = function() {
    EXIF.getData(this, () => {
        // 獲取當前旋轉角度
        const orientation = EXIF.getTag(this, "Orientation")
        // 修復旋轉
        fixOrientation(this, orientation, (blob) => {
            const img2 = new Image()
            img2.onload = function() {
                // zheng正方形
                clipSquare(this, (blob2) => {
                    const result = URL.createObjectURL(blob2)
                    // ...
                })
            }
            img2.src = URL.createObjectURL(blob)
        })
    })
}
img.src = source

// 修復旋轉
fixOrientation(img, orientation, cb) {
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext('2d');
    const w = img.width
    const h = img.height
    canvas.width = w;
    canvas.height = h;
    switch (orientation) {
        case 6: // 旋轉90度
            canvas.width = h;
            canvas.height = w;
            ctx.rotate(Math.PI / 2);
            // (0,-imgHeight) 從旋轉原理圖那里獲得的起始點
            ctx.drawImage(img, 0, -h, w, h);
            break;
        case 3: // 旋轉180度
            ctx.rotate(Math.PI);
            ctx.drawImage(img, -w, -h, w, h);
            break;
        case 8: // 旋轉-90度
            canvas.width = h;
            canvas.height = w;
            ctx.rotate(3 * Math.PI / 2);
            ctx.drawImage(img, -w, 0, w, h);
            break;
        default:
            ctx.drawImage(img, 0, 0, w, h);
            break
    }
    canvas.toBlob(cb)
}

// 裁剪正方形烁落，取圖片中間的最大正方形
clipSquare(img, cb) {
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext('2d');
    const w = img.width
    const h = img.height
    const diff = Math.abs(w-h)
    if (w >= h) {
        canvas.width = h
        canvas.height = h
        // 這個函數(shù)就是實現(xiàn)裁剪，參看下圖與 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
        ctx.drawImage(img, diff/2, 0, h, h, 0, 0, h, h)
    } else {
        canvas.width = w
        canvas.height = w
        ctx.drawImage(img, 0, diff/2, w, w, 0, 0, w, w)
    }
    canvas.toBlob(cb)
}

image

3.目標元素上布局豌注，然后用 html2canvas 生成

htlm2canvas(targetDom, option)
    .then((canvas) => {
        const context = canvas.getContext('2d')
        canvas.toBlob((blob) => {
            const img = new Image()
            img.src = canvas.toDataURL('image/jpeg', 0.9)
            document.body.appendChild(img)
        }, "image/jpeg", 0.9)
    })

其他注意事項

圖片跨域問題

開啟 html2canvas 的兩個選項

const option = {
    allowTaint: true,
    useCORS: true,
}

生成海報清晰度問題

將目標元素及其子元素的 css 尺寸放大多倍伤塌，然后用 transform: scale() 來縮放到需要顯示的位置。當然轧铁，也可以不顯示該目標元素每聪，直接顯示生成后的 canvas 或者 img

另外可以給 canvas 關閉抗鋸齒效果，不過感覺沒用。

// 關閉抗鋸齒药薯，感覺沒用
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

圖片不能保存

最終海報是由 canvas 通過 toDataURL() 或者 toBlob()
如果圖片是用 toDataURL() 導出绑洛，那么 ios 可能保存不了，網(wǎng)上說的原因圖片過大童本，可以降低 html2canvas 的選項 scale 來減少真屯。

如果圖片使用 toBlob(), 然后用 URL.createObjectURL(blob) 來導出，android 可能保存不了穷娱，提示 保存到手機相冊失敗绑蔫，我就是遇到這種情況，那么可以將其導出改為 toDataURL 或者直接轉泵额，可參考這篇文章《Blob/DataURL/canvas/image的相互轉換》

好像 toDataURL(type) 或者 toBlob(type) type 是 png 的話配深，android 也不能保存

另外，微信內只能長按保存圖片嫁盲，不能用 <a></a> 標簽來實現(xiàn)點擊下載

html2canvas 報錯 'maximum call stack size exceeded'

我的情況是篓叶，用戶上傳的圖片，經(jīng)過調轉旋轉亡资、正方形裁剪后澜共，生成了一個 dataURL 賦值到目標 img 元素上用于 html2canvas 生成海報，結果就報這個錯了锥腻，我將那個 dataURL 改成 ObjectURL 就沒問題了

最后編輯于：2019.10.24 20:27:18

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

前端生成海報 使用 html2canvas 及其注意事項

前言