HTML海报怎么居中,前端生成海报 使用 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 就没问题了