将页面转换为canvas导出为图片

最新推荐文章于 2024-04-21 23:49:04 发布
最新推荐文章于 2024-04-21 23:49:04 发布
阅读量4.6k 收藏
点赞数
分类专栏： 图像处理 程序人生 文章标签： javascript html svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16635325/article/details/127342810
版权

思路

需要将dom对象在canvas重绘，然后调用canvas.toDataurl（）将数据转换为base64的data url,可以直接导出图片。

但是Dom对象不能直接在Canvas中绘制，需要先将dom文本转换图片地址，然后在图片加载时将其内容绘制在canvas上。

一种快捷的方式是将dom文本内嵌在svg对象中，再将svg对象转换为xml/svg data url,这个地址可以作为图片对象的地址直接在页面中展示。

如图所示，一个svg文本可以作为url的内容在浏览器中展示一张图片

svg内容如下：

<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40"><foreignObject height="100%" width="100%"><svg width="18" height="18" x="370" y="120" transform=" translate(11, 11) scale(2.23, 2.23) "> <style type="text/css"> .anst0 { fill: #ea4554 } .anst1 { fill-rule: evenodd; clip-rule: evenodd; fill: #333 } .anst2 { fill: rgba(255, 255, 255, 0.33) } </style> <g id="anExclamationMark_1_"> <path id="anTriangle_2_" class="anst0" d="M1 14.4L8.1 1.6c.4-.8 1.3-.8 1.7 0L17 14.4c.4.7-.1 1.6-1 1.6H2c-.8 0-1.4-.9-1-1.6z"></path> <path id="anSquare_2_" class="anst1" d="M8 12h2v2H8z"></path> <path id="anLine_1_" class="anst1" d="M8 5h2v6H8z"></path> <path id="anBottomDot_1_" class="anst2" d="M8 12h2v2H8z"></path> <path id="anTopLine_1_" class="anst2" d="M8 5h2v6H8z"></path> </g> </svg></foreignObject></svg>

需要注意的是，svg对象下可以直接放置svg对象，也可以放非svg对象，如div p h1等等，但是需要作为foreignObject的子集，否者不会展示内容

在dom文本转换为xml/svg url过程中需要对一些特殊字符做转义，否者地址失效

 

svg xml url的第一个svg必须要有命名空间，否者以xml形式显示,当然就不能作为图片地址了

 

 

该xml/svg data url可以作为img对象的地址，在页面内展示图片，如图所示

下载这张矢量图片

只需添加一个超链接，指定为图片地址，点击超链接，即可下载该图片

需要注意的是，xml/svg data url不能作为下载地址，需要将其转换为base64地址

一种简单的方法是将xml/svg data url 作为地址的img对象绘制在canvas上，然后调用canvas.toDataurl(),即可获得base64 dataurl

data:image/png;base64,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

点击超链接下载为Png图像，自带透明背景

_路在远方
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html转canvas canvas转图片示例
04-28
该样例代码是 html转canvas canvas转图片 功能示例，代码下载完成后请在web服务器上发布后进行代码测试，否则会因跨域问题导致代码出错。 压缩包资源： canvas2image.js demo.html githug.txt html2canvas.min.js S1.jpg
canvas保存到本地图片三种方法
热门推荐
wogieni的博客
07-26 4万+
canvas保存到本地图片三种方法canvas保存本地图片第一种方法（修改图片的媒体类型，window.open直接下载）第二种方法（创建a标签，通过自己触发点击来下载）第三种方法（将图片数据转换成Blob数据，可以保存大图片） canvas保存本地图片 在公司做一个canvas的项目，遇到个需求 ：将canvas保存为图片，图片尺寸为12000*4000，一共用了好几种方法，最后才成功，特此记录...
canvas绘制并导出图片（画笔）
ANNENBERG的博客
07-22 459
【代码】canvas绘制并导出图片（画笔）
html2canvas网页转为图片框架
最新发布
qq_43235503的博客
04-21 185
html2canvas网页转为图片框架
关于 html2canvas 将HTML导出图片
weixin_43191327的博客
06-23 1862
最近我看到了一篇关于如何解决 HTML2Canvas 导出图片模糊的问题的博客。在过去的项目中，我也使用过 HTML2Canvas 插件将活动页面导出为图片，并且好像也遇到了类似的问题，尽管记忆已经有些模糊了。今天我想仔细研究一下这个问题的原因。在网上可以找到很多关于 HTML2Canvas 导出图片模糊的问题的讨论，结果发现大部分博客提供的解决方案都是相同的，即通过对 Canvas 的尺寸进行比例放大然后再缩小来解决。但实际上，我并不理解这样的操作究竟是如何使图片变得更清晰的。
html2canvas节点导出为图片相关方法
weixin_48082595的博客
03-31 320
html2canvas节点导出为图片相关方法
Vue将页面导出为图片或者PDF
10-16
在某些场景下，我们可能需要将Vue应用中的页面导出为图片或PDF格式，以便于保存、分享或打印。本篇文章将详细讲解如何在Vue项目中实现这两种功能。 首先，我们要解决的是将页面导出为图片。这通常涉及到HTML到图片...
解锁canvas导出图片跨域的N种姿势小结
09-22
在尝试通过`toDataURL`方法将canvas内容导出为数据URL时，如果canvas中绘制的图像来源于不同的源，就会触发“Tainted canvases may not be exported.”的错误。 以下是几种解决canvas导出图片跨域问题的方法： 1. ...
将HTML5 Canvas的内容保存为图片借助toDataURL实现
09-28
通过以上介绍，我们可以理解如何利用HTML5 Canvas的`toDataURL()`方法将Canvas的内容保存为图片，无论是在线显示还是下载到本地。在实际项目中，这可以应用于各种场景，如用户自定义的图形编辑、游戏截图或数据可视...
js将HTML文本导出生成word文档
11-27
在现代Web应用中，有时我们需要将网页上的内容导出为Word文档，以便用户可以离线查看或打印。本文将详细讲解如何使用JavaScript实现这一功能，主要依赖于两个JavaScript库：html2docx和FileSaver.js。这两个库可以...
js 将canvas生成图片保存,或直接保存一张图片的实现方法
11-27
将canvas数组保存 function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click(); } canvas：传入canvas的dom对象 name：保存的图片的名字 直接将图片保存的方法 function downLoadImage(img,name) { var a = document.createElement("a"); a.href = img.src;
base64转blob类型如何显示在页面上
qq_44162778的博客
02-23 631
//urlData 传base64 //type 图片类型 传 “image/png” // 调用方法 图片放置的参数 = URL.createObjectURL(this.base64ToBlob(base64,“image/png”))； base64ToBlob(urlData, type) { let arr = urlData.split(’,’); let mime = arr[0].match(/????.*?);/)[1] || type; // 去掉url的头，并转化为byte let
利用canvas 转换图片成base64
qq_36710806的博客
03-27 1669
/通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染。const canvas = document.createElement("canvas"), //创建canvas元素。width=Img.width, //确保canvas的尺寸和图片一样。
将微信小程序页面转为图片
qq_37635012的博客
03-04 5143
最近做项目遇到一个需求，那就是要将某个页面转为图片然后传给后端，我仔细找了一圈，发现官方那个Api也就是wx.canvasToTempFilePath生成的图片很有可能为空，太坑了，于是我放弃用它了，选择了用wxml2canvas。 npm init 是npm初始化，这个时候根据编译器终端一路回车最终会生成一个package.json文件 –production 是减少安装与业务无关的包，减少项目的体积。如果没有构建npm，需要我们工具-构建npm,或者勾选中 如果你没看到这一项也别急，我们高级版本的微信
WPF把Canvas另存为
08-17 277
由于wpf的UI使用xaml来表达的，所以我们们可利用这个优点，把WPF中的xaml元素另存为各样的文件，在很多时候我们都不须要这样的操作。把xaml保存为图片、字符串、XPS等等。这里我写了一些方法，以供大家参考.。 注意：以下保存操作前，一定要确保参数中的canvas有高和宽。 1.把canvas保存为文本文件 1: using System.Window...
html2canvas：将html的dom变成图片，并保存
dlnu2015250622的博客
10-14 2002
如何将HTML页面保存为图片？ 将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data url。 使用HtmlCanvas2实现 话不多说，直接上代码....... 1.npm下载 和html2canvas： npm install html2canvas 2.引入 html2canvas： import html2canvas from 'html2canvas' 3.调用方法 基于html2canvas.js可将一...
解决canvas导出图片模糊问题
认真和努力总没有错
03-26 1万+
// 解决导出图片模糊的方法 toBeCanvas() { var copyDom = $("#canvasQR"); var width = copyDom.offsetWidth; //dom宽 var height = copyDom.offsetHeight; //dom高 ...
js Canvas将canvas转为图片，输出到页面
qq_35728290的博客
10-22 5390
window.onload = function () { var drawing = document.getElementById('drawing') //确定浏览器支持&lt;canvas&gt;元素 if (drawing.getContext) { var context = drawing.getContext('2d') c...
用html5的canvas生成图片并保存到后台
SaYa_of1的博客
01-04 2万+
借鉴了 这位大神的 http://blog.csdn.net/jcx5083761/article/details/7991558
html2canvas导出图片
04-01
html2canvas是一种JavaScript库，可将HTML元素转换为Canvas元素并导出为图像。在使用html2canvas之前，需要先引入该库。 下面是一个使用html2canvas导出图片的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html2canvas demo</title> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </head> <body> <div id="content"> <h1>Hello, world!</h1> <p>This is an example of using html2canvas to export an image.</p> <img src="https://via.placeholder.com/150" alt="Placeholder image"> </div> <button id="export-btn">Export as image</button> <script> // 获取要导出的元素 var content = document.getElementById("content"); // 获取导出按钮 var btn = document.getElementById("export-btn"); // 点击导出按钮时执行以下代码 btn.onclick = function() { // 使用html2canvas将元素转换为Canvas html2canvas(content).then(function(canvas) { // 创建一个新的img元素 var img = new Image(); // 将Canvas的内容赋值给img img.src = canvas.toDataURL(); // 将img添加到页面上 document.body.appendChild(img); }); }; </script> </body> </html> ``` 在上面的示例中，我们首先获取要导出的元素和导出按钮。然后，当点击导出按钮时，使用html2canvas将元素转换为Canvas，并将Canvas转换为图像，将图像添加到页面上。 需要注意的是，由于html2canvas使用Canvas元素来渲染HTML元素，因此可能会遇到一些兼容性问题，尤其是对于一些复杂的布局或样式。在使用html2canvas时，应该注意测试和调试，以确保生成的图片符合预期。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值