把canvas标签里的图像下载成本地图片文件

简介: 把canvas标签里的图像下载成本地图片文件

有些在线图片网站,进行图像处理比如去除背景后,结果图片是以html5里canvas标签的形式显示出来的,我们没有办法通过右键点击图片然后下载的方式去保存到本地。


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MCDwD0b-1576403460274)(https://user-images.githubusercontent.com/5669954/70596472-f8fbbc80-1c20-11ea-89f8-41877854ea9f.png)]


此时使用Chrome开发者工具,定位到canvas标签,


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmxUcgp9-1576403460276)(https://user-images.githubusercontent.com/5669954/70596466-f6996280-1c20-11ea-8516-1a3ff8d4c3bc.png)]


Chrome开发者工具console里的$0代表当前选中的canvas元素。

执行下面的JavaScript:


var image = new Image();

image.src = $0.toDataURL("image/png");

image.pngimage.pngimage.png

目录
相关文章
|
8月前
|
前端开发 小程序
小程序使用canvas制作beas64图片
小程序使用canvas制作beas64图片
57 0
|
8月前
|
前端开发
canvas生成自定义大小图片
canvas生成自定义大小图片
|
9月前
解决element-ui上传多张图片时闪动问题
解决element-ui上传多张图片时闪动问题
148 0
|
10月前
|
编解码 iOS开发
图片,视频上传&视频内容旋转
图片,视频上传&视频内容旋转
|
编解码 前端开发 搜索推荐
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
在之前的几篇文章中,介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如[Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统](https://v3u.cn/a_id_143),我们可以使用svg来打造精美炫酷的分享小图标(icon),这一次我们使用python来将普通的静态的网站logo图片转换为带路径(path)的svg图片,这样就可以让网站logo能够变成动态的,作为一名不折腾不舒服斯基,一枚炫酷自带动画的网站logo自然能够满足我们的折腾欲,同时亦能击中我们的虚荣心。
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
|
Python
PIL(pillow)简单使用:新建画布、添加文字、画矩形、裁剪、粘贴
PIL(pillow)简单使用:新建画布、添加文字、画矩形、裁剪、粘贴
348 0
PIL(pillow)简单使用:新建画布、添加文字、画矩形、裁剪、粘贴
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
SwiftUI—如何下载并使用图像视图显示网络图片
SwiftUI—如何下载并使用图像视图显示网络图片
1547 0
SwiftUI—如何下载并使用图像视图显示网络图片
|
前端开发 小程序 JavaScript
小程序canvas实现(分享朋友圈生成图片)
小程序canvas实现(分享朋友圈生成图片)
563 0
小程序canvas实现(分享朋友圈生成图片)
|
C# 移动开发
将指定路径下的所有SVG文件导出成PNG等格式的图片(缩略图或原图大小)
原文:将指定路径下的所有SVG文件导出成PNG等格式的图片(缩略图或原图大小) WPF的XAML文档(Main.xaml):                                   CS代码:(Main.
997 0