把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");

var binary = pageData.replace("image/jpeg", "image/octet-stream");
var save_link = document. createElementNS ('http://www.w3.org/1999/xhtml,, 'a');
save_link.href = binary;
save_link.download = "1.jpg";
var event = document.create("MouseEvents");
event.initMouseEvent('click', true, false, window, o, o, o, e, o, false, false, false, false, o, null);
save_link.dispatchEvent(event); //触发事件

图片下载成功：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

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

[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法将画布(canvas)图像保存成本地图片的方法使用HT ...
把python tkinter canvas中的图形图像保存为通用格式文件的5种方法
在计算机上画图未完成,需要保存未完成图形以便以后继续,或者完成画图,要保存为通用格式文件,方便浏览.如使用python tkinter Canvas画图,其好像没有将图像保存通用格式文件的方法,但可以 ...
python画的图怎么保存_python通过PyGame绘制图像并保存为图片文件的代码
把开发过程中常用的一些内容片段记录起来,下边内容是关于python通过PyGame绘制图像并保存为图片文件的内容,希望对大伙有较大好处. ''' pg_draw_circle_save101.py d ...
解决H5的a标签的download属性下载service上的文件/图片出现跨域问题
1.通过点击下载多媒体文件(图片/视频/文件等) 最简单的方式: <a href='url' download="filename.ext">下载文件</a> ...
Android 如何将Canvas上绘制的内容保存成本地图片
效果如下图所示保存在sd卡上的文件为手机上显示效果为: 1>>在Manifest文件中增加相应权限 <uses-p ...
python 下载图片损坏_爬虫爬取出的图片下载出错，图片文件直接损坏
import requests import os, sys, stat from lxml import etree import time class HuangMan(): def __init ...
最新最全IE8及以下低版本浏览器支持canvas标签及常见的一些问题
最近项目中对于前台登录要加个验证码功能,用canvas画了一个验证码,但是在IE8及以下浏览器上不兼容,原因就是ie8不支持H5标签,自己百度了一下,也踩了许多坑,最终解决了ie8及以下的兼容问题,趁 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签标签是 HTML 5 中的新标签. 定义和用法标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例通过 canvas 元素 ...

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

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

最新文章

热门文章