h5 Canvas转换为图片格式并下载 梦里梦外; 2022-01-23 11:41 268阅读 0赞 在平常工作中,我们经常会遇到通过Canvas进行展示内容的情况,在展示之后还会要求将Canvas进行已图片格式进行保存.该如何完成这一需求? 通常情况下,我们需要完成两个步骤: > 1.Canvas转化为DOMString形式的String > 2.将图片下载到本地 #### 一.转化格式 #### ##### 1.HTMLCanvasElement.toDataURL() ##### 使用 `HTMLCanvasElement.toDataURL()`进行处理数据,该方法返回一个包含图片展示的 data URI 。也就是我们常说的base64编码字符串,可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。 ##### 2.注意点⚠️ ##### * 如果画布的高度或宽度是0,那么会返回字符串“data:,”。 * 如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么说明该传入的类型是不支持的。 * Chrome支持“image/webp”类型。 ##### 3.语法 ##### canvas.toDataURL(type, encoderOptions); ###### 参数 ###### `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 = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" 配合参数选项可以进行如下使用,设置jpegs图片的质量 var fullQuality = canvas.toDataURL("image/jpeg", 1.0); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); var lowQuality = canvas.toDataURL("image/jpeg", 0.1); #### 二.下载图片 #### 对于图片下载,我们通过创建一个隐藏的`a`标签的形式进行下载,通过模拟点击事件的形式进行触发. // 设置下载并转换 const download = document.getElementById('download'); download.onclick = function () { var bloburl = canvas.toDataURL(); console.log('bloburl', bloburl); var anchor = document.createElement('a'); if ('download' in anchor) { anchor.style.visibility = 'hidden'; anchor.href = bloburl; anchor.download = name; document.body.appendChild(anchor); var evt = document.createEvent('MouseEvents'); evt.initEvent('click', true, true); anchor.dispatchEvent(evt); document.body.removeChild(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> window.onload = function () { // 设置canvas const canvas = document.getElementById('canvasId'); const context = canvas.getContext('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'; img.onload = function () { context.drawImage(img, canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2); } // 设置下载并转换 const download = document.getElementById('download'); download.onclick = function () { var bloburl = canvas.toDataURL(); console.log('bloburl', bloburl); var anchor = document.createElement('a'); if ('download' in anchor) { anchor.style.visibility = 'hidden'; anchor.href = bloburl; anchor.download = name; document.body.appendChild(anchor); var evt = document.createEvent('MouseEvents'); evt.initEvent('click', true, true); anchor.dispatchEvent(evt); document.body.removeChild(anchor); } else { location.href = bloburl; } } } </script> </html> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70] 点击下载能够完成Canvas图片的下载. [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220123/5b76cacabe2c4769931b46b71707e97c.png
还没有评论,来说两句吧...