在平常工作中,我们经常会遇到通过Canvas进行展示内容的情况,在展示之后还会要求将Canvas进行已图片格式进行保存.该如何完成这一需求?
通常情况下,我们需要完成两个步骤:
1.Canvas转化为DOMString形式的String
2.将图片下载到本地
使用
type 图片格式，默认为 image/png
encoderOptions 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
包含 data URI 的字符串。
有如下HTMLElement(“canvas”)元素
<canvas id="canvas" width="50" height="50"></canvas>
可以用这样的方式获取一个 data-URL
var canvas = ElementById("canvas");
var dataURL = DataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
配合参数选项可以进行如下使用,设置jpegs图片的质量
var fullQuality = DataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = DataURL("image/jpeg", 0.5);
var lowQuality = DataURL("image/jpeg", 0.1);
对于图片下载,我们通过创建一个隐藏的a标签的形式进行下载,通过模拟点击事件的形式进行触发.
// 设置下载并转换const download = ElementById('download');lick = function () {var bloburl = DataURL();console.log('bloburl', bloburl);var anchor = ateElement('a');if ('download' in anchor) {anchor.style.visibility = 'hidden';anchor.href = bloburl;anchor.download = name;document.body.appendChild(anchor);var evt = ateEvent('MouseEvents');evt.initEvent('click', true, true);anchor.dispatchEvent(evt);veChild(anchor);} else {location.href = bloburl;}}
当下载完成之后,将a标签节点从dom中移除掉,完整代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas转图片并下载</title></head>
<body>
<canvas id="canvasId" width="500" height="500" >您的浏览器不支持使用该标签</canvas>
<button id="download">下载图片</button>
</body>
<script&load = function () {// 设置canvasconst canvas = ElementById('canvasId');const context = Context('2d');context.fillStyle = '#999';context.font = '18px Palatino';context.lineWidth = '10';context.fillText('我是用来下载的Canvas图片', canvas.width / 2, canvas.height / 2);const img = new Image();img.src = './bird1.png';load = function () {context.drawImage(img, canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2);}// 设置下载并转换const download = ElementById('download');lick = function () {var bloburl = DataURL();console.log('bloburl', bloburl);var anchor = ateElement('a');if ('download' in anchor) {anchor.style.visibility = 'hidden';anchor.href = bloburl;anchor.download = name;document.body.appendChild(anchor);var evt = ateEvent('MouseEvents');evt.initEvent('click', true, true);anchor.dispatchEvent(evt);veChild(anchor);} else {location.href = bloburl;}}}
</script>
</html>
点击下载能够完成Canvas图片的下载.
本文发布于:2024-01-28 22:47:21，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170645324310843.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
