图片下载之 svg 转 png

前言

今天在下载某个网站的图片的时候遇到一个很有意思的下载机制,就是他没有发送任何网络请求,也没有什么页面跳转就完成了 png 图片的下载,这让没见识的我非常好奇,于是决定一探究竟,看看他是怎么实现的。

实现方式

这里通过我本地已经复现的 demo 来演示。 页面很简单,只有一张 svg 图片和一个下载 png 的按钮: 同时也可以很清楚的看到页面并没有任何关于 png 图片的内容,那么我们怎么实现下载呢? 上文我们提到这个下载并没有使用网络请求,那我们能依靠的就只有这个 svg 了,也就是说我们要实现的其实是把 svg 转成 png 然后下载到本地。 坦白说我前端水平一般,只会增删改查,所以实现逻辑只能交给 AI 来写了🐶,我就负责改吧改吧: 其实驯服 AI 的过程并不顺利,尝试了多次才勉强给我想要的答案,当然还有一个重要原因是我 prompt 写的太烂:

这个过程总结起来就是:

  1. 获取 svg 数据
  2. 创建临时路径
  3. 通过 cavans 画出来
  4. 通过 a 标签下载

需要源码的话,可以关注微信公众号co松柏回复png获取。

相关推荐
breeze jiang20 小时前
CSS 三栏布局怎么写:Flex、Grid 完整方案与 BFC 区别
前端·css
SendTomo20 小时前
SendTomo稳定传输三大核心策略
javascript·网络协议·webrtc·html5·p2p
郭邯20 小时前
手写一个Cron表达式解析器:从需求分析到AI辅助实现
前端
阿黎梨梨20 小时前
Docker 容器化实战:从零搭建 Web 服务与反向代理
前端·后端·docker
Liora_Yvonne20 小时前
前端项目为什么需要一个配置单一真相源?
前端
禁止摆烂_才浅20 小时前
Vite 面试题
前端·面试·vite
GISer_Jing20 小时前
全栈AI实战:基于 TypeScript + LangChain + MCP 的企业级智能研发助手
前端·后端·ai·langchain·前端框架
禁止摆烂_才浅20 小时前
微信小程序高频面试题
前端·面试·微信小程序
禁止摆烂_才浅20 小时前
Vue2 高频面试题
前端·vue.js·面试
禁止摆烂_才浅20 小时前
前端性能优化面试题
前端·面试·性能优化