大佬教程收集整理的这篇文章主要介绍了svg 斑点图像在编码后被破坏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我尝试将图像解析为 blob 并在 svg 的 image 标记中引用它：
`<image xlink:href="${imgRef}" height="${h}" wIDth="${w}" @R_502_5283@="red" x="50%" y="50%" transform="translate(${-(w / 2)},${-(h / 2) - 4})"/>`
并将其嵌入到 svg 中：
const w = 100; // wIDth
const h = 65; // height
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" wIDth="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">` +
`<image xlink:href="${imgRef}" height="${h}" wIDth="${w}" @R_502_5283@="red" x="50%" y="50%" transform="translate(${-(w / 2)},${-(h / 2) - 4})"/>` +
`</svg>`;
然后我尝试通过 'data:image/svg+xml;,' + encodeURIComponent(svgString) 对其进行编码，结果显示损坏的图像。在通过 document.body.INNERHTML = svgString 对其进行编码之前，我测试了上面的 svg 字符串，并且 svg 图像显示良好。所以我怀疑编码部分，但根据许多参考资料似乎没有错。
我错过了什么？任何见解将不胜感激。
演示链接：https://codepen.io/Dongbin/pen/poRmbmg?editors=0010
外部图像（即 <img> 或 CSS BACkground-image）必须是自包含的。它们不能引用图像本身之外的资源。基本上，这意味着如果您需要引用任何文件（位图图像、字体等）作为 SVG 图像的一部分，它们必须是数据 URL。
解决方法是不使用 canvas.toBlob()。改用 canvas.toDataURL()。
const imgRef = canvas.toDataURL();
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" ` +
`xmlns:xlink="http://www.w3.org/1999/xlink">` +
`<image xlink:href="${imgRef}" height="125" width="200"/>` +
`</svg>`;
更新
如果您对 SVG 进行 URI 编码，它应该可以工作。
见：https://jsfiddle.net/dxkeqfnr/
const img = new Image();
img.src = 'https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg';
img.crossOrigin="anonymous"
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 125;
canvas.getContext('2d').drawImage(img,200,125);
canvas.toBlob((blob) => {
const imgRef = URl.createObjectURL(blob);
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="125" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="${imgRef}" height="125" width="200"/></svg>`;
//div.innerHTML = svgString;
const newImg = new Image();
newImg.src = `data:image/svg+xml,${encodeURIComponent(svgString)}`;
document.body.appendChild(newImg);
});
};
它适用于 Firefox，但不适用于 Chrome。这似乎是一个错误。 I have reported the bug to Chrome
以上是大佬教程为你收集整理的svg 斑点图像在编码后被破坏全部内容，希望文章能够帮你解决svg 斑点图像在编码后被破坏所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。