如何将页面变成图片保存在手机中？
0
悬赏园豆：5
[已解决问题]
解决于 2018-08-06 14:57
场景：手机微信扫二维码进入主页，填写数据提交后，跳转页面接收后台数据进行对应展示，接着长按屏幕后对该页面进行图片保存。
困扰1.只有对着图片长按屏幕才会弹出保存到手机的功能，但我这只是个页面。
困扰2.第二种方案，点击提交后将对应数据直接在Java写到图片中跳转到新页面展示的就是这个图片，这样就能实现长按手机屏幕即可保存。但问题来了，展示的数据有对应的音频，如果Java直接把数据写入图片展示，那这音频用户还怎么点的到。
困扰3.跳转后展示给用户看的页面与用户最终保存的页面有区别，例如展示给用户看的效果下方没有二维码，最终保存后下面会有对应的二维码。所以又不能用Java把数据写进图片，因为那只是展示给用户看的，而不是最终保存的。
我这个纠结的哦。一直都在开发pc上的系统，所以对手机浏览器这块不是很明白。所以想请高人帮忙，比如微信浏览器是否会有对应API？
最佳答案
1
应该有两种方式可以实现这个功能，一.将html代码发送给后台根据html内容重新渲染出图片并保存，二.前端js实现直接进行截图转换为图片保存。我觉得前端js比较适合您的需求。推荐使用html2canvas来实现这个功能。首页就是示例代码，应该可以解决您的需求。
收获园豆：4
直接跳转至页面的时候就生成了图片？
不能截图，因为保存下来的跟你展示给用户的有区别，展示的下方没二维码，保存后的图片有二维码。这就不能通过截屏了。
@Tomdwannn: 这个js库可以保存指定div位置的图片。展示内容是一个div,二维码一个div,就你指定展示内容的div保存为图片即可。有二维码的那块就不处理了。
@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来截图？
其他回答(1)
0
把所有的html内容复制放进一个canvas容器内，然后把canvas生成一张图片就行了
收获园豆：1
这个步骤是在哪一步？Java还是继续传数据做跳转而已对么？那展示给用户的是页面还是图片？
