网站建设规划书

2020-12-28 22:29 admin

网站建设规划书:canvas实现截屏功能 H5页面生成图片

最近发现各种测试结果,未来预测遍布朋友圈,生成个性名片,保存测试结果等等应用成了推广策划们的 常用技俩 ,总结一点就是网页截屏,通过用户自主填写或是答案生成图片然后发朋友圈或是其他的圈。
而html2canvas 能帮助前端小白实现这一功能:

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。
html2canvas 脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现,然后生成Canvas,能让用户保存为图片。


我之所以青睐html2canvas是因为支持对局部进行截取,我需要做得就是处理好所有的样式并把需要保存成图片的部分放在一个DOM里面,而不是重新用canvas绘制一个一样的图片。虽然不力推,但对于不熟悉canvas和赶时间的宝宝html2canvas真的是一个不错的选择呀!
基本语法:

html2canvas(element, options); // element是需要截图的元素,options为可选项,参数控制

options选项:


由于设备像素比devicePixelRatio决定了canvas的清晰度,所以通常情况下我们会通过放大待画元素的宽高,然后最终生成图片的再缩小到原始比例。
首先需要两个js文件: 和
图像处理代码:

 var cntElem = $('.canvasBox')[0];
 var shareContent = cntElem;//需要截图的包裹的(原生的)DOM 对象
 var width = shareContent.offsetWidth; //获取dom 宽度
 var height = shareContent.offsetHeight; //获取dom 高度
 var canvas = document.createElement( canvas ); //创建一个canvas节点
 var scale = 2; //定义任意放大倍数 支持小数
 canvas.width = width * scale; //定义canvas 宽度 * 缩放
 canvas.height = height * scale; //定义canvas高度 *缩放
 canvas.getContext( 2d ).scale(scale, scale); //获取context,设置scale
 var opts = {
 scale: scale, // 添加的scale 参数
 canvas: canvas, //自定义 canvas
 // logging: true, //日志开关,便于查看html2canvas的内部执行流程
 width: width, //dom 原始宽度
 height: height,
 useCORS: true // 【重要】开启跨域配置
 html2canvas(shareContent, opts).then(function (canvas) {
 var context = canvas.getContext('2d');
 // 【重要】关闭抗锯齿
 context.mozImageSmoothingEnabled = false;
 context.webkitImageSmoothingEnabled = false;
 context.msImageSmoothingEnabled = false;
 context.imageSmoothingEnabled = false;
 // 【重要】默认转化的格式为png,也可设置为其他格式
 var img = Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height);
 document.body.appendChild(img);
 $(img).css({
 // 根据需求设置图片样式
 width : canvas.width / 2 + px ,
 height : canvas.height / 2 + px ,

案例:
需求:根据抽到的签生成图片

小白菜一枚,欢迎指正(〃‘▽’〃)
效果预览:
完整代码:


关于H5页面在iPhoneX适配 ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现。倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:《基础知识学起来!为设...


作者简介: 陈志兴,腾讯SNG增值产品部高级工程师,主要负责手Q个性化业务、手Q WebView等项目。喜欢阅读优秀的开源项目,听听音乐,偶尔也会打打竞技类游戏。 本文根据作者在2017GMTC全球移动技术大会的上分享的ppt整理,特别感谢卢景伦(腾讯SNG增值产品部高级工程师)将ppt精华汇总成文,方便大家阅读学习。 FOREWORD 说在前面 2017年8月8日,增值产品部Vas团队研发的轻量...


H5 H5在最近几年蓬勃式爆发,它之所以如此受大众青睐,因为它有自身强大的功能。 H5最大的优势是跨平台,开发者无需太多的适配工作,用户无需下载,打开一个网址即可,就能访问了。 开发简单,开发成本低,入门门槛低,周期短,给小团队更多的机会。 传播作用好,h5页面最大的优势是传播能力极强,有非常好的传播作用,是企业商家做的曝光,产品宣传的利器。 在微信朋友圈中,我们常常看到各种制作精美的电子邀请函、...


项目需求: 由于小程序的热度高涨,公司为了引流,又想降低研发成本,所以将原先的H5项目嵌套在现在的小程序中。 之前的h5项目虽然实现了微信支付,但是嵌套之后小程序无法直接使用之前的h5支付功能。为了达到兼容,因为支付页面是同一个,所以项目必须同时兼容两个支付,一个是原本h5项目的支付能正常使用,另一个是当在小程序中点击支付的时候调用小程序自己的支付功能。 实现思路: 先判断h5的加载环境,如果是普...


通过Safari实现对移动端H5页面调试。 在移动端App开发模块里使用h5页面展示可以加快开发速度,但是h5模块出现问题需要调试并不方便。通过Safari辅助功能,可以发现定位问题。 总结操作步骤如下: 手机 - 设置- Safari - 高级- JavaScript打开、Web检查器打开 xcode工具通过usb连接手机,运行App 在App中点击进入到H5展示页面 在...


NPM安装: npm i gmy-img-cropper 使用说明 页面引入:import gmyList from / /components/gmy-img-cropper/gmy-img-cropper.vue 页面使用: gmy-img-cropper ref= gmyImgCropper @getI...


1.内嵌的h5页面head里面添加meta标签 PS:name= format-detection 为格式检测,telephone=yes为手机号码显示为拨号的超链接 2.html页面布局是,点击联系我们,弹出phone窗口, 拨打 后面跟着后台返回的号码,点击取消即放弃拨打,点击确定可拨打该号码 3.script中get请求,从后台获取到电话号码赋给p...


先记录一下canvas的画布的形态转换的一些方法 方法 描述 scale() 缩放当前绘图至更大或更小 rotate() 旋转当前绘图 translate() 重新映射画布上的 (0,0) 位置 transform() 替换绘图的当前转换矩阵 这的方法使用在canvas的画布身上的 canvas.getContext( 2d )上的 最近在做的一个项目,使用到了canvas.g...


在android studio环境下,测试 android程序中,在自己的测试手机荣耀4A进行测试非常的顺畅,也能够实现基本的界面,换了最新的手机oppo R17进行测试的时候,发现程序能够进入oppoR17手机中进行下载,但是点击会出现闪退的情况,根本点击不进去,一点击就产生闪退,刚开始以为是API的问题,导致低版本的程序在高版本的android系统中无法运行 实际的解决办法很简单 打开andr...


运行tomcat的时候,出现下面的错误 java.lang.IllegalStateException: Context namespace element 'component-scan' and its parser class [org.springframework.context.annotation.ComponentScanBeanDefinitionParser] are only...