图片下载之 svg 转 png

前言

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

实现方式

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

这个过程总结起来就是:

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

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

相关推荐
亿元程序员1 分钟前
“我要验牌”很火吗?我特意写了个Shader去验...
前端
@yanyu6664 分钟前
04vue3基础
前端·javascript·vue.js
IT_陈寒12 分钟前
JavaScript 闭包陷阱:90%开发者踩过的5个坑,你中招了吗?
前端·人工智能·后端
SuperEugene18 分钟前
Vue3 Props 传参实战规范:必传校验 + 默认值 + 类型标注,避开 undefined / 类型混用坑|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
吴声子夜歌19 分钟前
JavaScript——数组
java·javascript·算法
weixin_4629019721 分钟前
ESP32电压显示
开发语言·javascript·css·python
im_AMBER21 分钟前
万字长文:编辑器集成Vercel AI SDK
前端·人工智能·react.js·前端框架·编辑器
Y君23 分钟前
面了3个人后我发现:AI用得最溜的,未必是我最想要的工程师
前端·人工智能·面试
一拳不是超人24 分钟前
2026年最值得关注的JavaScript新特性:Signals,响应式编程的下一个十年
前端·javascript·响应式编程
skiy25 分钟前
Webpack、Vite区别知多少?
前端·webpack·node.js