前端生成海报使用 html2canvas 及其注意事项

标签（空格分隔）：前端 html2canvas

[toc]

前言

最近用有个需求需要上传图片然后生成海报保存，使用了 html2canvas 来实现，这里记录一下实现过程与遇到的问题

生成海报过程

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
        // 这个函数就是实现裁剪，参看下图与 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 可能保存不了，网上说的原因图片过大，可以降低 html2canvas 的选项 scale 来减少。

如果图片使用 toBlob(), 然后用 URL.createObjectURL(blob) 来导出，android 可能保存不了，提示 保存到手机相册失败，我就是遇到这种情况，那么可以将其导出改为 toDataURL 或者直接转，可参考这篇文章《Blob/DataURL/canvas/image的相互转换》

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

另外，微信内只能长按保存图片，不能用标签来实现点击下载

html2canvas 报错 'maximum call stack size exceeded'

我的情况是，用户上传的图片，经过调转旋转、正方形裁剪后，生成了一个 dataURL 赋值到目标 img 元素上用于 html2canvas 生成海报，结果就报这个错了，我将那个 dataURL 改成 ObjectURL 就没问题了

前端生成海报 使用 html2canvas 及其注意事项

前言