【利用a 超链接 download 属性,把 canvas图形 下载保存】

最新推荐文章于 2023-11-10 16:18:38 发布
最新推荐文章于 2023-11-10 16:18:38 发布
阅读量485 收藏
点赞数
文章标签： a超链接标签 a标签 canvas标签 canvas保存 canvas下载保存
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VickyTsai/article/details/90573680
版权
  • 使用 a- download 下载 属性,将 <canvas> 画布里的图形 保存为 PNG 格式
<!DOCTYPE html>
<html>
	<body>
	
		<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
		Your browser does not support the canvas element.
		</canvas>
		</br>
		
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			cxt.fillStyle="#009900";//填充颜色
			cxt.fillRect(50,50,100,100);//画一个填充矩形
			function clearCanvas()
			{
				c.height=c.height;
			}
			
			//创建 a 元素
			var link = document.createElement('a');
			link.innerHTML = '点击这里 下载画布的图形';
			
			link.addEventListener('click', function(ev) {
			    link.href = c.toDataURL();
			    link.download = "mycanvaspainting.png";
			}, false);
			
			document.body.appendChild(link);
		</script>
		<br />
		<button onclick="clearCanvas()">清空画布</button>
	</body>
</html>

在这里插入图片描述

Hey_Coder
关注
专栏目录
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
html5使用canvas实现图片下载功能的示例代码
01-19
最近项目中需要实现一个下载图片的功能(如下图) 一开始考虑使用a标签的download属性进行下载： <a> 下载海报 </a> 但是通过测试，发现再safari中，下载的文件不能带上拓展名，所以只好换一个思路，使用canvas进行处理。 1.图片需要添加crossOrigin=’anonymous’设置图像的跨域属性 img.crossOrigin = 'anonymous'; 2.使用toDataURL把图片转换成base64格式 canvas.toDataURL(image/png) 3.使用模拟点击事件，触发下载
a标签实现下载canvas图片
weixin_30924087的博客
07-26 228
令 a 的 href =canvas.toDataURL("image/png"); 转载于:https://www.cnblogs.com/zwrblogs/p/7238314.html
a标签/html2canvas 图片下载的封装
WangYan的博客
05-10 244
// 下载图片（利用a标签） const domA = document.createElement('a') domA.href = item.imageBase64 domA.download = item.actionResult // filename domA.click()
canvas合成二维码后，前端使用a标签download属性保存图片至本地
weixin_30784501的博客
12-22 134
需求描述：需求中为了减少服务器内存，后端返回二维码，由前端添加背景图片，合成一张二维码下载图片。 1、合成图片 <canvas id="codeCanvas" width="350" height="507"></canvas> const canvas = document.getElementById("codeCanvas"); ...
HTML链接标签＜a＞实现(canvas)下载图片
黄彪博客
09-09 1173
HTML链接标签实现下载 文章目录一、参考二、问题描述2. 1 利用canvas下载图片2.2 思考三、 HTML链接标签介绍3.1 概念3.2 案例3.3 属性说明四、 下载4.1 URL.createObjectURL()4.1.1 概念4.1.2 语法 `objectURL = URL.createObjectURL(object);`4.1.3 内存管理4.1.4 案例4.2 URL.revokeObjectURL()4.2.1 概念4.2.1 语法`window.URL.revokeObjectU
js 将canvas生成图片保存,或直接保存一张图片的实现方法
10-18
其中，一个常用的功能就是将Canvas上的内容转换成图片格式，并提供下载保存到用户的本地设备。本文将详细探讨如何使用JavaScript实现这一功能，具体包括两个主要部分：一是将Canvas内容保存为图片文件，二是如何将...
Canvas操作图象像素--ImageDate()--图象反像和变灰
abbie的专栏
07-06 1609
ImageData 接口描述 元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。" style="color:rgb(33,122,192); text-decoration:n
Illustrator CC中的图形导出和格式转换方法
# 章节一：图形导出方法简介 ## 1.1 导出选项概述 在图形设计和处理过程中，导出选项是非常重要的环节。不同的导出选项可以影响图形的清晰度、色彩模式以及最终应用场景的适配情况。因此，对导出选项有一个全面的...
HTML中文API
09-12
8. **链接（Links）**：`<a>`元素创建超链接，`href`属性指定链接地址，`target`属性可设置新窗口或标签页打开链接。 9. **表单（Forms）**：`<form>`元素用于创建表单，`<input>`、`<textarea>`、`<select>`和`...
前端 a链接 如何实现下载功能
最新发布
每天都要努力学习哦~~
11-10 7478
在中后台项目中，前端难免需要处理下载的逻辑，需要下载的内容包括但不限于图片、Excel表格、CSV文件、MP4文件、PDF文件、TXT文件、JSON文件、HTML文件等等。虽然下载的内容各式各样，但是下载的原理大同小异。下面来一起学习一下前端是如何处理下载的。URL.createObjectURL(blob) 可以直接访问，无需“编码/解码”，但需要记得撤销（revoke）；而 Data URL 无需撤销（revoke）任何操作，但对大的 Blob 进行编码时，性能和内存会有损耗。
canvas下载图片方法
Edward_Cullens的博客
02-21 3588
有个需求说要把网站上的图表可以保存到本地，查看了一下表单的元素，是canvas内的。 用了好多种方法，都失败了。最后搜到了stackoverflow上的一种方法成功导出，代码贴在下面 //canvas下载图片 exportCanvasAsPNG:function (id, fileName) { var canvasElement = document.getElementById(id); var MIME_TYPE = "image/png"; v
使用h5 <a>标签 href='url' download 下载踩过的坑
热门推荐
yiyan12的专栏
07-03 6万+
用户点击下载多媒体文件(图片/视频等)，最简单的方式： &lt;a href='url' download="filename.ext"&gt;下载&lt;/a&gt; 如果url指向同源资源，是正常的。 如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器打开的文件，可以手动下载。...
利用a标签下载文件（文件地址不限）
Drip
05-24 3万+
利用a标签下载文件，向后台传入服务器端的文件地址，后台根据地址获取输入流后，在向前台输出文件流供下载 前台jsp:测试文档 /** * 根据文件路径下载 * @return */ public String downFile(){ try { String fileName = bizProblemService.selectByFileid(fileid);//根据
Javascript：结合canvas、a标签根据url下载图片到本地
KaiSarH
11-02 898
js结合canvas、a标签根据url下载图片到本地
canvas绘制图片 a标签下载图片
weixin_43645482的博客
05-26 310
downloadPoster(){ var canvas = document.createElement(‘canvas’);// 创建一个名字为canvas的元素 canvas.id = ‘myCanvas’// id为myCanvas canvas.width = 350// 设置宽高，隐藏， canvas.height = 581 canvas.style.display = ‘none’ document.body.appendChild(canvas)// 新建的canvas添加到body里面
canvas画多圈数据和点击下载事件
daily886的博客
11-29 362
Document             *{             margin:0;             padding:0;         }         html,body{             width:100%;             height:100%;         }         #canvas{             po
使用JavaScript将canvas内容下载到本地
zem
04-15 3364
这里主要通过a标签来下载canvas的内容，首先要通过toDataURL方法将canvas对象转换为base64位编码 toDataURL的用法 canvas.toDataURL(type, encoderOptions)需要两个参数，两个参数都是可选参数，有默认值 第一个参数type表示图片格式，默认为image/png 第二个参数encoderOptions在指定图片格式为 image...
a 链接点击下载
weixin_30381317的博客
03-12 1005
1. 将链接设置为.zip 结尾2.在a元素中添加download 属性,（目前只有chrome、firefox和opera支持） function download(src) { 　　　　var $a = $("<a></a>").attr("href", src).attr("download", "img.png"); 　　　　$a[0].click()...
HTML5 Canvas详解：绘制图形与属性介绍
2. **保存文件**：Canvas的图像可以导出为PNG或JPEG等格式，通过`toDataURL()`方法生成数据URL，然后创建一个`a`标签下载。 3. **获取像素信息**：`getImageData()`方法可以获取Canvas上特定区域的像素数据，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值