\u539f\u56e0：\u5728iOS\u7684Safari\u6d4f\u89c8\u5668，\u4f7f\u7528\u9875\u9762\u751f\u6210\u56fe\u7247，\u5982dom\u91cc\u9762\u6709\u56fe\u7247，\u5219\u4f1a\u5148\u8fdb\u884c\u52a0\u8f7d\u8d44\u6e90，\u4f46\u662f\u8fd9\u4e2a\u52a0\u8f7d\u901f\u5ea6\u4f1a\u968f\u7740\u56fe\u7247\u5927\u5c0f\u800c\u5ef6\u957f，\u4f46\u662f\u9875\u9762\u751f\u6210\u56fe\u7247\u7684\u65f6\u673a\u603b\u4f1a\u6bd4\u8fd9\u4e2a\u5feb\u3002\u6240\u4ee5\u4f1a\u5bfc\u81f4dom\u91cc\u9762\u7684\u56fe\u7247\u4e0d\u4f1a\u51fa\u6765<\/p>\n
\u89e3\u51b3\u65b9\u6848：\u8fd9\u91cc\u6211\u662f\u7528\u4e86vue3\u3002<\/p>\n
const captureSnapshot = async (targetElement,options,previousDataUrl = "") => {
\n const dataUrl = await htmlToImage.toPng(targetElement,options)<\/p>\n
\/\/ \u8fd9\u662f\u5224\u65ad\u56e0\u4e3a dataUrl \u5bf9\u5feb\u7167\u56fe\u50cf\u8fdb\u884c\u4e86\u7f16\u7801，\u800c Safari \u73b0\u5728\u6e32\u67d3\u7684\u5185\u5bb9\u6bd4\u4e0a\u6b21\u66f4\u591a\u3002dataUrl \u7684\u957f\u5ea6\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5173\u4e8e\u6e32\u67d3\u5185\u5bb9\u7684\u4fe1\u606f\u3002\u76f4\u5230dataUrl.length\u505c\u6b62\u589e\u52a0，\u8868\u660e Safari \u5df2\u5b8c\u6210\u6e32\u67d3\u3002
\n return (dataUrl.length !== previousDataUrl.length)
\n ? captureSnapshot(targetElement,options,dataUrl)
\n : dataUrl
\n}<\/p>\n
\/\/ \u9875\u9762\u4e0a\u4f20\u56fe\u7247
\nconst generateReport = () => {
\n let offscreenContainer = document.getElementById('my-node');<\/p>\n
\/\/ \u8fd9\u4e2aoptions\u65e0\u6240\u8c13，\u4e3b\u8981\u662fcaptureSnapshot\u65b9\u6cd5\u548c\u4e0b\u9762\u7ed9img\u52a0\u4e0adecoding="sync"\u5c5e\u6027
\n let options = {
\n quality: 0.95,
\n backgroundColor: '#ffffff',
\n width: offscreenContainer.scrollWidth,
\n height: offscreenContainer.scrollHeight,
\n pixelRatio: window.devicePixelRatio > 2 ? 2 : window.devicePixelRatio,
\n filter: function (node) {
\n if (node.tagName === 'IMG' && (!node.src || node.src === '')) {
\n return false;
\n }
\n if (node.classList && node.classList.contains('landscape-wrap')) {
\n return false;
\n }
\n if (node.classList && node.classList.contains('link-more')) {
\n return false;
\n }
\n return true;
\n },
\n canvasTimeout: 15000,
\n useCORS: true,
\n skipAutoScale: true,
\n allowTaint: true,
\n \/\/ iOS\u517c\u5bb9\u6027\u8bbe\u7f6e
\n preferredFontFormat: 'woff2',
\n skipFonts: false,
\n style: {
\n transform: 'scale(1)',
\n transformOrigin: 'top left'
\n },
\n };<\/p>\n
try {
\n \/\/ \u786e\u4fdd\u6240\u6709\u56fe\u8868\u90fd\u5df2\u6e32\u67d3\u5b8c\u6210
\n await nextTick();<\/p>\n
\/\/ \u8fd9\u4e2a\u4e5f\u662f\u5173\u952e\u4ee3\u7801\u3002\u7ed9offscreenContainer\u91cc\u9762\u7684img\u6dfb\u52a0decoding="sync"\u5c5e\u6027，\u4e0d\u7136ios\u4e0a\u8fd8\u662f\u4f1a\u663e\u793a\u4e0d\u51fadom\u91cc\u9762\u7684\u56fe\u7247
\n offscreenContainer.querySelectorAll('img').forEach(img => {
\n img.setAttribute('decoding', 'sync');
\n });<\/p>\n
\/\/ \u8f6c\u6362\u4e3apng\u683c\u5f0f
\n imgSrc.value = await captureSnapshot(offscreenContainer,options);<\/p>\n
} catch (error) {
\n console.error('\u751f\u6210\u5931\u8d25:', error);
\n }
\n}<\/p>\n
\n\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb34\u6b21\u3002\u89e3\u51b3html-to-image\u5728 ios \u4e0adom\u91cc\u9762\u7684\u56fe\u7247\u4e0d\u663e\u793a\u51fa\u6765<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[567,6187,1680,458,87],"topic":[],"class_list":["post-58721","post","type-post","status-publish","format-standard","hentry","category-server","tag-html","tag-html-to-image","tag-ios","tag-vue","tag-87"],"yoast_head":"\n