HBuilder X使用html2canvas

2024-10-03

使用html2canvas在手机端独立实现h5页面转图片

需求方便用户把每日消息的海报图片分享到微信朋友圈进行消息扩散实现方案使用html2canvas 插件,html2canvas 1.0.0-alpha.11 ,github地址:https://github.com/niklasvh/html2canvas 官网:https://html2canvas.hertzen.com/ 具体实现:二维码里是h5页面链接,当h5页面加载完成后,第一步:调用html2canvas方法返回canvas对象,第二步:使用canvas.toDataURL()方

app内区域截图利用html2Canvals保存到手机截屏 (html2Canvas使用版本是：0.5.0-beta3。)

app内区域截图利用html2Canvals保存到手机 app内有时候需要区域内的截图保存dom为图像,我们可以使用html2Canvas将dom转换成base64图像字符串,然后再利用5+api保存至app,通用代码如下: function saveDomImage (html2Canvas, dom, fileName) { //使用之前要引入 html2Canvas.js if(mui.os.plus){ if (typeof html2Canvas == null) throw Erro

【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

前言最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还兼容老的方法,但是新的既然出来了,肯定研究新的了.但是网上几乎都是旧的方法,所以,唯有自己看官方的文档,慢慢一步一步研究了.在研究的过程中,发现,他跟微信支付的差别蛮大的.好了废话不多说了,下面直接来干货. 首先,你得去蚂蚁金服开放平台申请一个应用,地址:https://openhome.alipa

xampp与Hbuilder、phpstorm配置

1.xampp的安装就不用多说了,安装完按之后出现这个界面. 2.点击中间那个按钮,运行三个选项,全部正常之后是这样的,这样xampp就不用管了,但是要记下安装的路径,之后需要用 3.首先说Hbuilder,比较简单在内置服务器中修改一下地址就行了,先在外置服务器添加一个地址. 4.然后在web服务器地址修改一下就行了,下面三个用不到不用修改也行,修改前面两个, ,最后把你所有的项目都拷贝到xampp下面的htdocs这样Hbuilder就能跑php代码了. 5.phpstorm10版本安装好之

前端工具HBuilder安装Sass插件

HBuilder自带未安装的less插件,但是sass插件却没有,需要自己安装,步骤如下: 1.安装sass,参考: http://www.w3cplus.com/sassguide/install.html 2.如下图,菜单‘工具’下,选择‘预编译器设置’→选择‘.sass,.scss’,点击编辑,弹出对话框: a.文件后缀不变,为:.sass,.scss b.触发命令地址填写sass的安装路径,如:我的本机sass路径为:d:\Ruby22\bin\sass.bat c.命令参数: --no

Hbuilder快捷键

Hbuilder编辑器功能挺强大,体积相对来说比较小,下面是一些常用到的快捷键,尽快熟练使用,成为不用鼠标的大神!哈哈哈!!! alt+↓ 跳转到下一个可编辑区: ctrl+enter 向下换行: ctrl+shift+enter 向上换行: ctrl+shift+R 复制当前行:

Hbuilder开发HTML5 APP之WebView

WebView就是原生的WebView,HBuilder在其上封装了一层,便于Javascript的调用,结构如图: 也可以实现这样的结构: 注意:WebView的使用属性HTML5+规范,所以必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中

使用html2canvas实现浏览器截图

最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的. 阅读目录 html2canvas介绍使用实例问题分析总结回到顶部 html2canvas介绍以前我们只能通过其他的截图工具来截取图像.现代浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦.html2canvas就是这样一款前端插件,它的原理是将Dom节点在C

HBuilder从下载到使用

听别人谈论这货,于是决定长长见识,见见世面,便屁颠屁颠到网上下一个,满怀好奇的研究了一下.对用过eclipse这款软件的人来说,上手非常容易. ☆ 准备工作 ① 确认自己的电脑连接网络,能下载东西. ② 最好有一款主流浏览器.如谷歌,火狐,IE,Opera等(用这个工具都是做web的,浏览器很重要.) ☆ 下载HBuilder 方式一: 在浏览器的地址栏中输入 http://www.dcloud.io然后回车进入方式二: 打开浏览器,访问百度搜索,输入HBuilder官网,然后点击进入上面的

使用hbuilder编辑器实现移动app打包

作为一枚web前端来讲,需要了解的东西太多,需要学习的也太多了,那天因为公司需求,就研究了下移动网站打包成app的方法,这种东西好像是H5出来后就有推出的,因为性功能不行,就没怎么关注,但现在移动互联网火呀,加上原生开发周期长,迭代更新也比较慢,原生并没有H5这么灵活,虽然H5实现了网站打包成app但弊端也是有的,听说是用H5开发出的app还没有做出百万级用户的,期待中... 闲话不多说,就说下用在线编辑器HB(hbuilder)怎么去实现移动网站打包成原生app的吧,无非就是几个大步骤. 第一

hbuilder的使用

今天在群里看群友提及了hbuilder,下载试了下,发现确实会有些代码敲起来方便多了.也帮助我自己发现uft8和保存的时候选择字符重要,不然乱码,很窝心.

java使用代理 html2canvas 截屏将页面内容生成图片

1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候像分析本地的一样简单.这就是我的理解.官网给出的只有php的方法,我是照扒了一般java的出来.有写的不好的地方,欢迎大家指正.废话不多说了,先上代码. @RequestMapping(value="/proxy", method = RequestMethod.GET) public v

Hbuilder与svn快速连接并在手机上测试页面

大家好,今天讲一下Hbuilder怎样与svn连接在一起,并且在移动端上面做真是的页面测试. 1,打开Hbuilder软件,在工具中,安装插件,找到svn插件安装. 2.点击文件,导入,从svn中检测,创建新的资源库位置,输入svn地址,作为工作空间项目检出,然后创建即可. 这样就配置好svn了,页面随时做更改,文件夹右击,版本控制,updata或者提交最新文件即可. 在运行中,点击web服务器,内置web服务器换成192.168.xx.xx,然后重新启动Hbuilder,页面预览,把网址直接发

hbuilder中如何使用egit上传项目

刚开始使用时,我也是遵照网上的教程来的,其实就那一篇教程,到处被转载,怎么搜都是那一个,实际操作发现有点小不同,所以实际截图给大家一个参考. 1.首先肯定是进入hbuilder下载egit插件啦.(工具-插件安装) 选中后,点击安装就可以了.等安装完成后,会重启. 2.重启后进入hbuilder项目目录,右键选中你要上传的项目,选择team-共享项目点击后,出现如下窗口, 选中箭头,窗口变成如下, 再选中箭头所指,窗口如下, 之后,选中,完成. 3上述操作后,项目名会旁边会多一个红色小标志.

使用html2canvas实现批量生成条形码

/*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GenerateCodeBar.aspx.cs" Inherits="CodeBar_GenerateCodeBar" EnableEventValidation="false" %> <!DOCTYPE html PUBLIC "-//W3C//DT

使用html2canvas实现网页截图并嵌入到PDF

以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这里来聊下之前在工作中用到的html2canvas.这里要感谢写出html2canvas库的小伙伴! canvans的原理是将dom节点在Canvas里画出来,虽然特殊方便,但是仍有一些限制.如: 不支持iframe 不支持跨域图片部分浏览器上不支持SVG图片不支持Flash 不支持古代浏览器和IE9以下 function canvasImg(div

html2canvas插件对整个网页或者网页某一部分截图并保存为图片

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现.它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建.当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现.以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器. 如果你想将网页的某一部分或者全部进

使用Apache+Dreamweaver（或者H-builder）搭建php开发环境

使用得工具说明 php+Apache服务器+Dreamweaver+mysql数据库下载安装好wamp,可以在网上直接百度下载,为了方便,我给放个百度云的链接.wamp下载:链接:http://pan.baidu.com/s/1jH6FbtO 密码:zeo6下载并安装好,没有什么大问题,一路回车就好.有一个步骤是选择浏览器,默认IE,如果想chrome,自己更改一下就可以 php环境搭建集成开发环境,也叫IDE环境.web服务器+php解释器+数据库都是配置好的,直接用就可以,不需要我们自己

苹果应用 Windows 申请普通证书和Push 证书 Hbuilder 个推(2)

s上一篇讲述了android 如何打包,这一篇看一下如何IOS下打包在苹果上申请证书,及其麻烦,我写下来,有需要的直接拿走即可: 首先苹果的证书分两种一种是 development 证书,另一种是 distrbution证书,发布证书: 一这两种证书的区别是: (1)开发证书申请完了,可以绑定100台机器,在苹果的官网上可以绑定,绑定完了,之后,你打包可以用证书,也可以把有证书的app安装到你的Iphone上面: (可以使用PP助手2.0,很方便,我之前使用itunes 太麻烦了

苹果应用 Windows 申请普通证书和Push 证书 Hbuilder 个推

最近使用Hbuilder 进行了HTML5开发,因为 HTML5 可以放在android 机器上,也可以放到 IOS机器上,所以很感兴趣,于是开发了一个小应用, 不过问题接着来了: 图1 如图所示:当IOS 打包时候,需要提供证书密码和provision file文件, android 打包也需要证书文件, (1)先说一下 android打包流程: android发布对于Android平台,可以选择使用DCloud生成的公用证书或自己生成的证书,两者不影响安装包的发布,唯一的差别就是证书

Hbuilder连接模拟器调试

Hbuilder是一个非常好用的HTML5开发IDE,我最喜欢的功能就是连接手机调试了,连接手机调试有两种途径,一是通过USB连接真机,二是下载安装一个安卓模拟器,让Hbuilder连接到安卓模拟器,如果不怕麻烦的话,可以选择第一种方式,但是我总是不想用USB线连上我的又卡又慢的安卓机开发,因此我选择用安卓模拟器. 关于真机运行.手机运行.真机联调常见问题,官方网址http://ask.dcloud.net.cn/article/97 关于如何安装配置手机模拟器,官方网址http://ask

HBuilder X使用html2canvas

热门专题