首页 > 其他分享 >手动下载canvas、地图的当前画面(下载为图片)

手动下载canvas、地图的当前画面(下载为图片)

时间:2023-04-18 14:59:12浏览次数:31  
标签:canvas 跨域 手动 link document 下载 图片

functionDownloadImg() {//使用前需要npm下载html2canvas并引入组件中才能使用
html2canvas(document.querySelector("#map"), {//参数为容器的dom
// 转换为图片
backgroundColor: "#ffffff", //设置截图的背景色
useCORS: true, // 解决资源跨域问题
allowTaint: false, //允许跨域(图片跨域相关)
taintTest: true,
}).then((canvas) => {
let link = document.createElement("a");
link.href = canvas.toDataURL(); //下载链接(base64格式)
link.setAttribute("download", "地图下载.png");
link.style.display = "none"; //a标签隐藏
document.body.appendChild(link);
link.click();
link.remove();
});
},

标签:canvas,跨域,手动,link,document,下载,图片
From: https://www.cnblogs.com/kaoo-kiee/p/17329484.html

相关文章

  • Renderman 无法下载的解决方法
    先试试看这个地址能不能下载:Pixar'sRenderMan|Install。如果能行就不用看后面了。如果你在renderman.pixar.com/register这个网址卡在提交表单页面,如下图,submit无法点击:可以尝试按F12,如图点击“在页面中选择一个元素以进行检查”,点击submit按钮定位到对应代码,然后把disable......
  • canvas绘制多边形
    1、获取ctx,id为canvasId的canvas标签document.getElementById("canvasId")。getXO你text("2d");2、确定尺寸3、添加点击画布的监听ctx.addEventListener("click",(e)=>that.addLis(e),false);//单击添加多边形顶点addEventListener("dblclick",(e)=>that.......
  • js将后端返回的文件流导出,并自定义下载文件名(pdf导出)
    这里调接口时记得加上responseType:'blob'/***@description:下载文件*@param{string}data文件流*@param{string}filename文件名*@return{*}*/exportfunctiondownloadFile(data:string,filename:string){constblob=newBlob([data])const......
  • canvas和svg区别
    Canvas描述:通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变,会重新进行绘制。SVG描述:一种使用XML描述的2D图形的语言SVG基于XML意味着,SVGDOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器。在SVG中,每个被绘制的图形均被视为对象。如果SVG......
  • html2canvas插件使用小结
    简介html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanv......
  • Webpack中手动实现Loader与Plugin
    Loaderloader是一个转换器,用于对源代码进行转换。工作流程webpack.config.js里配置了一个模块的Loader;2.遇到相应模块文件时,触发了该模块的loader;3.loader接受了一个表示该模块文件内容的source;4.loader使用webapck提供的一系列api对source进行转换,得到一......
  • Mapboxgl Chrome75版本下发现问题:中文标签无法加载,由Canvas的measureText()方法导致
    很刁钻的问题,排查了好久。我自己开发测试用的浏览器(版本为112)运行正常,在老版本(75)谷歌浏览器报错如下:mapbox-gl.js:32UncaughtTypeError:Failedtoexecute'getImageData'on'CanvasRenderingContext2D':Valueisnotoftype'long'.atMp.TinySDF.draw(mapbox-gl.j......
  • mysql入坑之路(12)windows 部署MySQL,tar方式手动添加服务进行程序管理
    1.“CTRL+R”打开运行窗口,输入regedit点击确定打开注册表编辑器2.找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services3.新建项MYSQL服务4.添加项内参数和值名称类型数据DisplayName编辑字符串值mysql-5.6ErrorControl编辑DWORD(32位)值1Imag......
  • 网络安全与网站安全及计算机安全:如何下载到各版本Kali Linux计算机操作系统
    1、KaliLinux2021.2下载http://old.kali.org/kali-images/kali-2021.2/kali-linux-2021.2-installer-amd64.iso2、KaliLinux2021.1下载http://old.kali.org/kali-images/kali-2021.1/kali-linux-2021.1-installer-amd64.iso3、KaliLinux2020.4下载http://old.kali.org/kali-imag......
  • 网络安全与网站安全及计算机安全:如何下载到Windows各版本的Nmap网络扫描神器
    1、Nmap-7.91下载https://nmap.org/dist/nmap-7.91-setup.exe2、Nmap-7.90下载https://nmap.org/dist/nmap-7.90-setup.exe3、Nmap-7.80下载https://nmap.org/dist/nmap-7.80-setup.exe4、Nmap-7.70下载https://nmap.org/dist/nmap-7.70-setup.exe5、Nmap-7.60下载https://nmap.org......