標簽（空格分隔）： 前端 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)
}
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 也不能保存
另外，微信內只能長按保存圖片，不能用 <a></a> 標簽來實現點擊下載
html2canvas 報錯 'maximum call stack size exceeded'
我的情況是，用戶上傳的圖片，經過調轉旋轉、正方形裁剪后，生成了一個 dataURL 賦值到目標 img 元素上用于 html2canvas 生成海報，結果就報這個錯了，我將那個 dataURL 改成 ObjectURL 就沒問題了
