Canvas toDataUrl 在最新的 safari 中沒有返回正確的圖像
[英]Canvas toDataUrl not returning proper image on latest safari
問題描述
我在瀏覽器中從Convert SVG to image (JPEG, PNG, etc.)使用了這個片段
它在 chrome 中運行良好，但在最新的 safari 更新 15 之后，生成的圖像不正確。
這是 chrome 圖像https://pastebin.com/hcLAS51W
這是 safari 生成的圖片https://pastebin.com/S7tEWQsQ
const base64Image = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjkyLjk3NzUyODA4OTg4NzY0IDEyOSAzNzQuMDQ0OTQzODIwMjI0NyAxMTAiIGNsYXNzPSJQU1BERktpdC04czFzYmM1MTN0MzRxMzg4OTViNGJoM2p2biIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS10ZXN0aWQ9Imluay1zdmciIHN0eWxlPSJsZWZ0OiAwcHg7IHRvcDogMHB4OyB3aWR0aDogMTAwJTsgaGVpZ2h0OiAxMDAlOyBvcGFjaXR5OiAxOyBvdmVyZmxvdzogaGlkZGVuOyI+PHJlY3QgeD0iOTcuOTc3NTI4MDg5ODg3NjQiIHk9IjEzNCIgd2lkdGg9IjM2NC4wNDQ5NDM4MjAyMjQ3IiBoZWlnaHQ9IjEwMCIgY2xhc3M9IlBTUERGS2l0LTc4NzFyZmh5eGI3cGRta3MxbjN4N2F2dnRhIiBzdHlsZT0iZmlsbDogdHJhbnNwYXJlbnQ7Ii8+PGcgc3R5bGU9ImZpbGw6IHRyYW5zcGFyZW50OyI+PGc+++PC9zdmc+'; const svg = window.atob(base64Image); svgToPng(svg,(imgData)=>{ const pngImage = document.createElement('img'); document.body.appendChild(pngImage); pngImage.src=imgData; }); function svgToPng(svg, callback) { const url = getSvgUrl(svg); svgUrlToPng(url, (imgData) => { callback(imgData); URL.revokeObjectURL(url); }); } function getSvgUrl(svg) { return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' })); } function svgUrlToPng(svgUrl, callback) { const svgImage = document.createElement('img'); // imgPreview.style.position = 'absolute'; // imgPreview.style.top = '-9999px'; document.body.appendChild(svgImage); svgImage.onload = function () { const canvas = document.createElement('canvas'); canvas.width = svgImage.clientWidth; canvas.height = svgImage.clientHeight; const canvasCtx = canvas.getContext('2d'); canvasCtx.drawImage(svgImage, 0, 0); const imgData = canvas.toDataURL('image/png'); console.log(imgData, 'imgData') // This logged here gives different image in chrome and safari callback(imgData); // document.body.removeChild(imgPreview); }; svgImage.src = svgUrl; }
1 個解決方案
解決方案1
0 2021-10-26 03:58:57
drawImage()與沒有固有寬度或高度的 SVG 圖像是互操作的噩夢。
目前，規范文本確實遵循 Chrome 的行為，但鑒於它們是唯一實現它的人，很難稱其為“標准”。
這里的問題之一是您根據<img>元素的clientWidth和clientHeight屬性設置畫布大小。
這個<img>元素嵌入了一個沒有自己固有寬度和高度的 SVG 圖像。 因此，默認width被解釋為100% 。
因此，您的<img>元素將占用容器 ( <body> ) 的任何大小，並且您將畫布大小設置為該主體的大小。
然而，這個尺寸應該只影響<img>元素，當它的圖像被繪制在畫布上時，這個<img>元素應該（大部分）無關緊要。
盡管在沒有固有寬度或高度的圖像的這種特殊情況下，重要的是輸出畫布的大小。 在這種情況下， 當前的規范文本要求使用CSS 默認大小算法來確定圖像的大小，這基本上是說如果定義了固有寬度和高度，或者圖像是否具有定義的固有縱橫比（例如 viewBox） ，將可用值乘以該比率，如果兩者都不存在，則使用默認大小。
而這個默認大小是由輸出畫布大小決定的。
在這里， <svg>既沒有width也沒有height ，但它有一個內在比率（110/374.0449438202247），所以width將設置為畫布寬度，高度將設置為此寬度 x比例。
因此，正確計算的drawImage使用的圖像大小應該取決於畫布大小，從而取決於用戶的屏幕大小，我個人覺得這非常令人不安。 這就是 Chrome 所做的。
另一方面，Safari 使用viewBox的值來表示width和height 。 這種是有道理的，但在各種實踐中都有問題（例如，使用0 0 1 1的 viewBox 在 SVG 中更容易進行絕對定位是很常見的）。
在這種情況下，Firefox 根本不會繪制您的圖像。
您可以通過不附加<img> 、根據<img> .naturalWidth和.naturalHeight設置畫布寬度和高度以及將根<svg>元素的width和height為絕對值來避免這種差異（即不是% ）。
這將為您提供最跨瀏覽器的體驗，也是最可預測的體驗（由於 Chrome 的行為，您的所有用戶都將擁有不同大小的圖像）。
const svg = `<svg width="374" height="110" ${/* We force width absolute width and height */""} xmlns="http://www.w3.org/2000/svg" viewBox="92.97752808988764 129 374.0449438202247 110" class="PSPDFKit-8s1sbc513t34q38895b4bh3jvn" focusable="false" data-testid="ink-svg" style="left: 0px; top: 0px; width: 100%; height: 100%; opacity: 1; overflow: hidden;"> <rect x="97.97752808988764" y="134" width="364.0449438202247" height="100" class="PSPDFKit-7871rfhyxb7pdmks1n3x7avvta" style="fill: transparent;"/> <g style="fill: transparent;"> <g> <path class="PSPDFKit-47r5zxptykhjqpzqdue9acphtz PSPDFKit-448ncr5muhrpc8p8yvady51emc PSPDFKit-Smooth-Lines" d="M 212.7638508020482,166.04059441826746 C 183.6,160.7 154.5,155.4 135.6,152.3 C 116.7,149.1 107.9,148.2 104.0,149.9 C 100.2,151.5 101.1,155.9 103.3,160.7 C 105.5,165.6 108.9,170.9 116.4,176.2 C 123.9,181.5 135.6,186.8 142.9,187.1 C 150.2,187.3 153.1,182.5 155.5,177.6 C 157.9,172.8 159.9,168.0 161.1,165.3 C 162.3,162.7 162.8,162.2 165.7,165.8 C 168.6,169.4 173.9,177.2 180.7,185.4 C 187.5,193.6 195.8,202.3 202.1,207.6 C 208.4,212.9 212.8,214.9 218.3,215.6 C 223.9,216.3 230.7,215.8 235.6,212.9 C 240.4,210.0 243.3,204.7 246.3,197.2 C 249.2,189.7 252.1,180.1 253.5,175.0 C 255.0,169.9 255.0,169.4 255.2,169.2 C 255.5,168.9 256.0,168.9 256.9,169.4 C 257.9,169.9 259.4,170.9 261.5,171.8 C 263.7,172.8 266.6,173.8 269.8,174.3 C 272.9,174.7 276.3,174.7 279.3,174.0 C 282.2,173.3 284.6,171.8 286.5,169.9 C 288.5,168.0 289.9,165.6 290.9,161.2 C 291.9,156.9 292.4,150.6 290.2,146.0 C 288.0,141.4 283.1,138.5 277.8,137.0 C 272.5,135.6 266.6,135.6 263.5,135.6 C 260.3,135.6 259.8,135.6 259.4,136.1 C 258.9,136.6 258.4,137.5 261.3,140.9 C 264.2,144.3 270.5,150.1 283.9,156.1 C 297.2,162.2 317.6,168.5 329.5,171.6 C 341.4,174.7 344.8,174.7 350.8,174.3 C 356.9,173.8 365.7,172.8 370.3,172.1 C 374.9,171.4 375.4,170.9 375.6,172.3 C 375.8,173.8 375.8,177.2 375.8,182.7 C 375.8,188.3 375.8,196.0 375.6,203.5 C 375.4,211.0 374.9,218.2 374.9,223.1 C 374.9,227.9 375.4,230.3 379.7,231.5 C 384.1,232.7 392.3,232.7 400.6,232.2 C 408.8,231.8 417.1,230.8 425.6,229.6 C 434.1,228.4 442.8,226.9 448.6,226.0 C 454.5,225.0 457.4,224.5 460.3,224.0" data-testid="ink-path" style="stroke: rgb(0, 0, 0); stroke-width: 4px; pointer-events: none;"/> <path class="PSPDFKit-47r5zxptykhjqpzqdue9acphtz PSPDFKit-448ncr5muhrpc8p8yvady51emc PSPDFKit-Smooth-Lines" stroke="transparent" d="M 212.7638508020482,166.04059441826746 C 183.6,160.7 154.5,155.4 135.6,152.3 C 116.7,149.1 107.9,148.2 104.0,149.9 C 100.2,151.5 101.1,155.9 103.3,160.7 C 105.5,165.6 108.9,170.9 116.4,176.2 C 123.9,181.5 135.6,186.8 142.9,187.1 C 150.2,187.3 153.1,182.5 155.5,177.6 C 157.9,172.8 159.9,168.0 161.1,165.3 C 162.3,162.7 162.8,162.2 165.7,165.8 C 168.6,169.4 173.9,177.2 180.7,185.4 C 187.5,193.6 195.8,202.3 202.1,207.6 C 208.4,212.9 212.8,214.9 218.3,215.6 C 223.9,216.3 230.7,215.8 235.6,212.9 C 240.4,210.0 243.3,204.7 246.3,197.2 C 249.2,189.7 252.1,180.1 253.5,175.0 C 255.0,169.9 255.0,169.4 255.2,169.2 C 255.5,168.9 256.0,168.9 256.9,169.4 C 257.9,169.9 259.4,170.9 261.5,171.8 C 263.7,172.8 266.6,173.8 269.8,174.3 C 272.9,174.7 276.3,174.7 279.3,174.0 C 282.2,173.3 284.6,171.8 286.5,169.9 C 288.5,168.0 289.9,165.6 290.9,161.2 C 291.9,156.9 292.4,150.6 290.2,146.0 C 288.0,141.4 283.1,138.5 277.8,137.0 C 272.5,135.6 266.6,135.6 263.5,135.6 C 260.3,135.6 259.8,135.6 259.4,136.1 C 258.9,136.6 258.4,137.5 261.3,140.9 C 264.2,144.3 270.5,150.1 283.9,156.1 C 297.2,162.2 317.6,168.5 329.5,171.6 C 341.4,174.7 344.8,174.7 350.8,174.3 C 356.9,173.8 365.7,172.8 370.3,172.1 C 374.9,171.4 375.4,170.9 375.6,172.3 C 375.8,173.8 375.8,177.2 375.8,182.7 C 375.8,188.3 375.8,196.0 375.6,203.5 C 375.4,211.0 374.9,218.2 374.9,223.1 C 374.9,227.9 375.4,230.3 379.7,231.5 C 384.1,232.7 392.3,232.7 400.6,232.2 C 408.8,231.8 417.1,230.8 425.6,229.6 C 434.1,228.4 442.8,226.9 448.6,226.0 C 454.5,225.0 457.4,224.5 460.3,224.0" data-testid="clickable-path" style="stroke-width: 5px;"/> </g> </g> </svg>`; svgToPng(svg, (imgData) => { const pngImage = document.createElement('img'); pngImage.src = imgData; }); function svgToPng(svg, callback) { const url = getSvgUrl(svg); svgUrlToPng(url, (imgData) => { callback(imgData); URL.revokeObjectURL(url); }); } function getSvgUrl(svg) { return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' })); } function svgUrlToPng(svgUrl, callback) { const svgImage = document.createElement('img'); // do not append the <img> svgImage.onload = function() { const canvas = document.createElement('canvas'); canvas.width = svgImage.naturalWidth; canvas.height = svgImage.naturalHeight; const canvasCtx = canvas.getContext('2d'); canvasCtx.drawImage(svgImage, 0, 0); // show the <canvas> to debug document.body.append(canvas); const imgData = canvas.toDataURL('image/png'); callback(imgData); }; svgImage.src = svgUrl; }
canvas { background: chocolate; }
Firefox：image.onload中的canvas.toDataURL，但返回透明圖像
[英]Firefox : canvas.toDataURL in image.onload but returning transparent image
webgl canvas的toDataURL（）僅在iOS中返回透明圖像
[英]toDataURL() of webgl canvas returning transparent image in iOS only
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
canvas toDataURL沒有返回完整的圖像
Javascript canvas.toDataURL（）返回空白圖像
Firefox：image.onload中的canvas.toDataURL，但返回透明圖像
webgl canvas的toDataURL（）僅在iOS中返回透明圖像
使用toDataURL在畫布上繪制圖像
畫布toDataURL（）提供空白圖片
Canvas toDataURL() 返回空白圖像
將Canvas下載為沒有.toDataUrl（）的圖像
動態添加的圖像/畫布上的toDataURL
Canvas.toDataURL無法在移動Safari iOS上運行？
相關標簽