h5截长图(html2canvas保存图片)

前言

h5项目总是会有很多截图变成图片保存海报的功能，这次遇到了一个需求是保存长图（图片长度根据用户选择项目数量变化）

注意

需要被保存的页面如果是长图，需要有属性overflow:scroll；且每个元素都需要定宽高！！！否则会窜

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>截长图</title><script src="./jquery-1.11.0.min.js"></script><!--随便一个jq版本--><script src="./html2canvas.0.5-B4.js"></script><!--截长图用的html2canvas版本--><style>/* 这个是保存成的那个图片的样式！ */.save_img{position: absolute;width: 100%;height: 100%;opacity: 0;z-index: 8;/*根据具体情况改数值*/}</style></head><body><div><img src="" alt="" id="image"/>/*生成的图片的位置*//*这里面是展示用的海报页内容 */</div><div id="page1" style="z-index: -1;">/*id是为了生成图片,z-index = -1;是为了让这个截图用的页面展示出来方便截图又看不到*//*这里面是截图用的海报页内容*/</div></body><script>/* 注意：截图功能需要用自带环境的编辑器打开才可以！直接打开会报错（跨域问题）page1是需要被截成图片的页面的id，image是截完图 保存图片地址的图片的id*/window.onload = function(){setTimeout(function(){cut_image("page1", "image");},2000)//加一个延时，保证图片被截到function cut_image(id, id2) {<!--如果是不超过一屏的图片截图，下面这一堆可以只写成 var w = $("#" + id + "").width();var h = $("#" + id + "").height();再下面的html2canvas里面也可以不写scrollY、scrollX、y这三个属性-->var scrollHeight = $('#page1').prop("scrollHeight");$('#page1').scrollTop(scrollHeight);$("#image,#page1").css('height',scrollHeight);var height = $('#page1').height();var w = $("#" + id + "").width();var h = scrollHeight;html2canvas(document.getElementById(id), {width: w / 1,height: h / 1,scale: 1,useCORS:true,//（图片跨域相关）allowTaint:false,//允许跨域scrollY: 0, scrollX: 0,y:height-scrollHeight}).then(function(canvas) {var url = canvas.toDataURL("image/jpg", 0.8);//img//image/jpg为格式，0.01是图片质量，可为0~1之间的数，如果超出取值范围，将会使用默认值 0.92//图片地址赋值$('#' + id2 + '').attr('src', url);});}}</script>
</html>

小问题

如果遇到保存长图后二维码识别不了，点这个

h5截长图(html2canvas保存图片)相关推荐

html2canvas 截长图并导出图片
截长图的问题过程为了截长图,可把我气死了,不是上面白,就是下面一片空白,有的时候只截图了当前窗口的,有的时候甚至给你提醒 Error loading image 岂可休!!! 在历尽一晚上查找之后 ...
ffmpeg截取jpg图_知道你会截图，但你会截长图吗
知道你会截图,但你会截长图吗?有时候我们工作生活中需要截取保存的一些内容比较长,需要截取长图,但是我们常用的截图方式一般都只能截取当前屏幕内的内容,无法截取下面没有显示的地方.怎么办呢? 在浏览器里, ...
android WebView截长图实现
1.先简单介绍下webview截屏,看代码: //开启缓存 webview.setDrawingCacheEnabled(true); webview.buildDrawingCache();Bitm ...
android 拖动截图,【UNIAPP截长图】方案之一：滚动截屏 Android
实现思想:主动滚动一段距离,截一个图,然后裁剪拼接关键步骤: 1.截长图准备 2.截取图片组 3.拼接长图片 1.截长图准备 preparePicture() 获取屏幕可用宽高,页面宽高,及页面底部 ...
【基础知识】截长图的方法以及防止截图时下拉框自动收回的方法
截长图的方法: 博主之前使用的tim,不具备截长图的功能,之后百度了很多的方法,最后发现QQ的截长图功能最好用,很不解,tim不应该是偏向于办公吗,这种功能竟然还能阉割? 使用工具:QQ最新版使用方 ...
UIScrollView截长图
iOS UIScrollView截长图优化保留页面上的阴影等细节显示. extension UIScrollView {/**scrollview截长图可以保留阴影图片拼接*/func snapSh ...
android 截长图方法,Android实现截屏与截长图功能
本文实例为大家分享了Android实现截屏与截长图功能展示的具体代码,供大家参考,具体内容如下 Demo在GitHub的地址:ScreenShoot 在Android开发中,有时候会遇到需要截屏分享到 ...
华为手机截屏怎么截长图_华为手机竟然有6种截屏方法，你用过几种？3种以上的手机没白买...
很多时候我们都喜欢通过手机截图来对一些信息进行保存分享,那么常用华为手机,关于华为手机截图方法你知道几种呢? 悄悄告诉你,其实华为手机截图方法多达6中,各种花样截图方法都有,就是可惜了很多小伙伴都不知 ...
华为手机截屏怎么截长图_华为手机5种常用截屏方式，教你轻松定格屏幕精彩瞬间...
手机上的精彩内容这么多,想要截图发好友,你知道怎么截才最顺手嘛? 华为手机提供了多种实用又快捷的截屏方法,总有一种适合你,快来看看吧~ 隔空截屏抓取截屏,酷炫手势在屏幕正前方20~40厘米,伸开手 ...
win10系统picpick截图工具自动滚动截长图方法
描述:win10系统picpick截图工具自动滚动截长图方法步骤: 使用截图工具,使用顶部菜单栏,选择截取滚动窗口功能此时会自动识别滚动窗口,单机滚动条,即可自动滚动,如果只滑动一次就结束了,请将 ...

h5截长图(html2canvas保存图片)

目录

前言

注意

代码

小问题

h5截长图(html2canvas保存图片)相关推荐

最新文章

热门文章