如何通过canvas 把页面代码转化为图片

今天分享下”如何通过canvas 把页面代码转化为图片“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

变换编码到图片应用

html2canvas，这是一个十分有名的从电脑浏览器网页截图的开源库，应用很便捷，作用也很强劲。

应用 html2canvas

html2canvas 的应用比较简单，简易到只必须传入一个 DOM 原素，随后根据回调取得 canvas：

在实际使用的时候，有两个注意点：

    1.html2canvas 通过解析元素实际的样式来生成 canvas 图片内容，因此它对元素实际的布局和视觉显示有要求。如果要完整截图，最好将元素从文档流中独立出来（例如 position:absolute）2.默认生成的 canvas 图片在 retina 设备上显示很模糊，处理成 2 倍图能解决这个问题：

var w = $("#code").width();

var h = $("#code").height();//要将 canvas 的宽高设置成容器宽高的 2 倍

var canvas = document.createElement(“canvas”);

canvas.width = w * 2;

canvas.height = h * 2;

canvas.style.width = w + “px”;

canvas.style.height = h + “px”;

var context = canvas.getContext(“2d”);//然后将画布缩放，将图像放大两倍画到画布上

context.scale(2,2);

html2canvas(document.querySelector("#code"), {

canvas: canvas,

onrendered: function(canvas)

{ http://www.qlyl1688.com/ …

}

});

使用 html2canvas的实际案例

1.html代码结构

<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</p>

<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</p>

</section>

2.js代码结构

var str = $(’#html2canvas’);

//console.log(str);

html2canvas([str.get(0)], {

onrendered: function (canvas) {

var image = canvas.toDataURL(“image/png”);

var pHtml = “<img src=”+image+“ />”;

$(’#html2canvas’).html(pHtml);

}

});

总结

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

如何通过canvas 把页面代码转化为图片相关推荐

python html转图片失真_html dom 转化成图片踩坑记（canvas toDataURL）
需求在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...
qrcode生成二维码，canvas转化为图片
可以用jquery.qrcode.min.,js将一个页面生成二维码,该插件支持canvas和table,默认为canvas 核心代码: $('#qrcodeCanvas').qrcode({ ...
uni-app 组件中的canvas转化为图片报错：errMsg：“canvasToTempFilePath:fail canvas is empty”
项目场景: uni-app,开发微信小程序使用: wx.canvasToTempFilePath({canvasId: 'line',success: function(res) {console. ...
html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签标签是 HTML 5 中的新标签. 定义和用法标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例通过 canvas 元素 ...
ubb代码转化html代码
ubb代码转化html代码 public static string UbbDecode(string str) { str = HtmlEncode(str); str = Regex.Replac ...
layui跳转html如何带参数,Layui跳转页面代码（可携带复杂参数）
今天用了Layui的"数据表格 - 数据操作"示例代码,结果发现点击"编辑"按钮出出来一个弹出消息框,效果如下: 虽然说也可以用"弹出层"做 ...
html编写app页面代码,编写html页面代码需要了解的--综合编
类型:编程辅助大小:83KB语言:中文评分:5.0 标签: 立即下载在很多企业面试的时候,尤其是在面试UI(界面层)的面试当中,很多时候要求我们手写html.当然,这里要求的是比如跟JavaScr ...
各种页面刷新代码大全,asp/javascript刷新页面代码
页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面. 1) 10表示间隔10秒刷新一次 2) <script> window.location.re ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...

如何通过canvas 把页面代码转化为图片

如何通过canvas 把页面代码转化为图片相关推荐

最新文章

热门文章