如何将Instagram页面Canvas中的二维码从PNG转换为SVG？

步骤1：从Canvas提取PNG文件 #

1. 打开浏览器开发者工具（按下F12或Ctrl+Shift+I），切换到「控制台」标签。
2. 执行以下代码获取Canvas的PNG数据：

   // 选中目标canvas元素
   const canvas = document.querySelector('.x1xux3cy.xc6p2dh');
   // 生成PNG格式的Data URL
   const pngUrl = canvas.toDataURL('image/png');
   // 在新标签页打开图片以便保存
   window.open(pngUrl);
   

3. 在新打开的标签页中，右键点击图片选择「保存图片」，将PNG文件保存到本地。

步骤2：解析二维码内容并生成SVG #

直接将PNG转SVG会导致矢量图出现锯齿，最优方案是先识别二维码的内容，再重新生成纯矢量的SVG二维码，具体方法如下：

方法一：使用Python脚本处理

先安装所需依赖库：

pip install pyzbar pillow qrcode

然后运行以下脚本：

from pyzbar.pyzbar import decode
from PIL import Image
import qrcode
from qrcode.image.svg import SvgImage

# 1. 读取保存的PNG二维码并解析内容
qr_img = Image.open("你保存的二维码文件名.png")
decoded_result = decode(qr_img)
qr_content = decoded_result[0].data.decode("utf-8")

# 2. 生成SVG格式的二维码
qr_generator = qrcode.QRCode(
    version=1,
    error_correction=qrcode.constants.ERROR_CORRECT_L,
    box_size=10,
    border=4,
)
qr_generator.add_data(qr_content)
qr_generator.make(fit=True)

svg_img = qr_generator.make_image(image_factory=SvgImage)
svg_img.save("instagram_qr.svg")

方法二：浏览器端直接处理（无需本地脚本）

1. 在开发者工具的「控制台」中，先引入jsQR二维码解析库（可直接复制jsQR的核心源码到控制台执行），再运行以下代码：

   // 获取Canvas图像数据
   const canvas = document.querySelector('.x1xux3cy.xc6p2dh');
   const ctx = canvas.getContext('2d');
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   // 解析二维码内容
   const code = jsQR(imageData.data, imageData.width, imageData.height);
   const qrContent = code.data;
   
   // 手动构建SVG二维码
   const svgSize = 256;
   const boxSize = svgSize / code.modules.size;
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("width", svgSize);
   svg.setAttribute("height", svgSize);
   svg.setAttribute("viewBox", `0 0 ${svgSize} ${svgSize}`);
   
   for (let y = 0; y < code.modules.size; y++) {
       for (let x = 0; x < code.modules.size; x++) {
           if (code.modules.get(x, y)) {
               const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
               rect.setAttribute("x", x * boxSize);
               rect.setAttribute("y", y * boxSize);
               rect.setAttribute("width", boxSize);
               rect.setAttribute("height", boxSize);
               rect.setAttribute("fill", "#000");
               svg.appendChild(rect);
           }
       }
   }
   
   // 导出SVG文件
   const svgData = new XMLSerializer().serializeToString(svg);
   const blob = new Blob([svgData], {type: "image/svg+xml"});
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
   a.href = url;
   a.download = "instagram_qr.svg";
   a.click();
   

内容的提问来源于stack exchange，提问作者Carl Edwards