首页新闻找找看学习计划

如何将页面变成图片保存在手机中?

0
悬赏园豆:5 [已解决问题] 解决于 2018-08-06 14:57

场景:手机微信扫二维码进入主页,填写数据提交后,跳转页面接收后台数据进行对应展示,接着长按屏幕后对该页面进行图片保存。

困扰1.只有对着图片长按屏幕才会弹出保存到手机的功能,但我这只是个页面。

困扰2.第二种方案,点击提交后将对应数据直接在Java写到图片中跳转到新页面展示的就是这个图片,这样就能实现长按手机屏幕即可保存。但问题来了,展示的数据有对应的音频,如果Java直接把数据写入图片展示,那这音频用户还怎么点的到。

困扰3.跳转后展示给用户看的页面与用户最终保存的页面有区别,例如展示给用户看的效果下方没有二维码,最终保存后下面会有对应的二维码。所以又不能用Java把数据写进图片,因为那只是展示给用户看的,而不是最终保存的。

我这个纠结的哦。一直都在开发pc上的系统,所以对手机浏览器这块不是很明白。所以想请高人帮忙,比如微信浏览器是否会有对应API?

Tomdwannn的主页 Tomdwannn | 初学一级 | 园豆:114
提问于:2018-01-26 16:00
< >
分享
最佳答案
1

应该有两种方式可以实现这个功能,一.将html代码发送给后台根据html内容重新渲染出图片并保存,二.前端js实现直接进行截图转换为图片保存。我觉得前端js比较适合您的需求。推荐使用html2canvas来实现这个功能。首页就是示例代码,应该可以解决您的需求。

收获园豆:4
hellotim | 小虾三级 |园豆:1491 | 2018-01-26 18:14

直接跳转至页面的时候就生成了图片?

不能截图,因为保存下来的跟你展示给用户的有区别,展示的下方没二维码,保存后的图片有二维码。这就不能通过截屏了。

Tomdwannn | 园豆:114 (初学一级) | 2018-01-26 18:21

@Tomdwannn: 这个js库可以保存指定div位置的图片。展示内容是一个div,二维码一个div,就你指定展示内容的div保存为图片即可。有二维码的那块就不处理了。

hellotim | 园豆:1491 (小虾三级) | 2018-01-26 21:16

@hellotim: 前段时间在忙别的事。今天才开始做这个东西,下面的代码可以把id="#container"的div内容截取下来,并转成图片放入class为showImg的img标签src中。

$("#btn").click(function(){
var width = 300;
//var height = 500;

var type = "png";
var scaleBy = 3; //缩放比例
var canvas = document.createElement('canvas');
canvas.width = width * scaleBy;
//canvas.height = height * scaleBy;
canvas.style.width = width * scaleBy + 'px';
//canvas.style.height = height * scaleBy + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);


html2canvas($("#container"), {
useCORS: true, //(图片跨域相关)
allowTaint: false, //允许跨域(图片跨域相关)
taintTest: true, //是否在渲染前测试图片
canvas:canvas,
width: width,
//height: height,
onrendered: function(canvas) {
$('.showImg').attr('src', canvas.toDataURL("image/png", 1.0));
}

但指定两个div,我没找到相关的说明呢。看了下Canvas这标签,感觉先在第一个Canvas标签加上二维码,然后把div的内容追加进去再来用html2canvas来截图?

Tomdwannn | 园豆:114 (初学一级) | 2018-02-02 14:49
其他回答(1)
0

把所有的html内容复制放进一个canvas容器内,然后把canvas生成一张图片就行了

收获园豆:1
Eric.luo | 园豆:853 (小虾三级) | 2018-01-26 16:32

这个步骤是在哪一步?Java还是继续传数据做跳转而已对么?那展示给用户的是页面还是图片?

支持(0) 反对(0) Tomdwannn | 园豆:114 (初学一级) | 2018-01-26 16:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册