关于截取只截取到可视区域的解决方案:
根据上述可视区域解决方案,将要截取的dom元素复制一个放在一个z-index层级最小的
错误写法:
window.onload = function(){
var IMAGE_URL;
function takeScreenshot(){
$('#wrap').clone().appendTo($('#hidden_wrap'));
...
...
正确写法:
window.onload = function(){
var IMAGE_URL;
$('#wrap').clone().appendTo($('#hidden_wrap'));
function takeScreenshot(){
...
...
完整代码(已解决截取区域问题,未解决模糊问题):
合成图片并保存*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
position: relative;
}
#wrap{
height: 100%;
background: seashell;
text-align: center;
padding-top: 20px;
position: fixed;
overflow-y: scroll;
overflow-x: hidden;
}
#capture{
width: 80%;
height: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 15px;
border: 5px solid #ffffff;
display: none;
z-index: 999;
overflow:scroll;
}
#capture img{
width: 100%;
}
h3,p{
margin-top: 8px;
}
#saveImg{
appearance: none;
position: absolute;
bottom: 50px;
z-index: 888;
width: 150px;
height: 30px;
line-height: 30px;
border-radius: 30px;
left: 50%;
transform: translateX(-50%);
background: orange;
color: #ffffff;
}
#wrap img{
width: 80%;
text-align: center;
}
.log{
position: absolute;
width: 100%;
height: 100%;
z-index: 33;
background: rgba(0, 0, 0, .8);
display: none;
}
#hidden_wrap{
position: absolute;
z-index: -10;
overflow: scroll;
}
#hidden_wrap #wrap{
position: relative;
overflow: auto;
}
#capture .close{
display: inline-block;
position: absolute;
border: 1px solid #ffff;
color: #ffffff;
border-radius: 50%;
width: 25px;
height: 25px;
top: -30px;
right: -5px;
}
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
合成并保存
X
// 加载即克隆,克隆完截图赋值,移除克隆元素,点击展示图片
window.onload = function(){
var IMAGE_URL;
$('#wrap').clone().appendTo($('#hidden_wrap'));
takeScreenshot();
$('#hidden_wrap #wrap').remove();
function takeScreenshot(){
var shareContent = document.getElementById('hidden_wrap');//需要截图的包裹的(原生的)DOM 对象
// var shareContent = document.getElementsByClassName('page-1')[0];
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
console.log('分享元素',$('#hidden_wrap #wrap').height());
console.log('分享元素宽度',width);
console.log('分享元素高度',height);
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 1; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale,scale); //获取context,设置scale
// var rect = shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量
// canvas.getContext("2d").translate(-rect.left,-rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位
var opts = {
scale:scale, // 添加的scale 参数
canvas:canvas, //自定义 canvas
logging: true, //日志开关
width:width, //dom 原始宽度
height:height, //dom 原始高度
allowTaint:true,
logging:true,
backgroundColor: 'transparent',
};
html2canvas(shareContent, opts).then(function (canvas) {
IMAGE_URL = canvas.toDataURL("image/png");
$('.copyImage').attr('src',IMAGE_URL);
// $('#hidden_wrap').css('overflow','hidden');
})
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
function downloadBase64(dataUrl, filename) {
var imageFile, href
// const downloadLink = document.createElement('a')
var downloadLink = document.getElementById('dl-hidden')
try {
var blob = dataURLtoBlob(dataUrl)
var href = window.URL.createObjectURL(blob)
downloadLink.download = filename
downloadLink.href = href
downloadLink.click()
} catch (err) {
} finally {
if (href) {
window.URL.revokeObjectURL(href)
}
// downloadLink.remove()
}
}
// $(".letter-title").text(new Date().toLocaleString());
$('#saveImg').on('click',function(){
// takeScreenshot();
$('#capture').show();
$('.log').show();
$(this).text('长按上图保存图片');
})
// var curStyle=0;
// $("#change-style").click(function(e){
// takeScreenshot();
// if(curStyle==0){
// $(".letter-content").attr("style","opacity:0.8;");
// $(".letter-bg").attr("style","border-radius:50px;");
// $("#change-style").text("普通");
// curStyle=1;
// }else{
// $(".letter-content").attr("style","opacity:1;");
// $(".letter-bg").attr("style","border-radius:0;");
// $("#change-style").text("圆角透明");
// curStyle=0;
// }
// })
// $("#save-local").click(function(e){
// downloadBase64(IMAGE_URL, '合成图.png')
// })
}
完整方案:
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
合成图片并保存* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
position: relative;
}
#wrap {
height: 100%;
background: seashell;
text-align: center;
padding-top: 20px;
position: fixed;
overflow-y: scroll;
overflow-x: hidden;
}
h3,
p {
margin-top: 8px;
}
#saveImg {
appearance: none;
position: absolute;
bottom: 50px;
z-index: 888;
width: 150px;
height: 30px;
line-height: 30px;
border-radius: 30px;
left: 50%;
transform: translateX(-50%);
background: orange;
color: #ffffff;
}
#wrap img {
width: 80%;
text-align: center;
}
.log {
position: absolute;
width: 100%;
height: 100%;
z-index: 33;
background: rgba(0, 0, 0, .8);
display: none;
}
#capture {
width: 80%;
height: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
border: 5px solid #ffffff;
/* display: none; */
z-index: 999;
overflow: scroll;
font-size: 0;
}
#capture img {
width: 100%;
}
.close {
display: inline-block;
position: absolute;
border: 1px solid #ffff;
color: #ffffff;
border-radius: 50%;
width: 25px;
height: 25px;
top: 9%;
right: 9%;
text-align: center;
line-height: 25px;
}
#hidden_wrap {
position: absolute;
z-index: -10;
overflow: scroll;
}
#hidden_wrap #wrap {
position: relative;
overflow: auto;
}
.load::before,.load::after{
content: '';
}
.load, .load::before,.load::after{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffffff;
animation: rotateCircle 1s ease-in-out infinite;
/* transition: all 1s ease-in-out 2s; */
}
.load::before{
margin-left: -15px;
animation-delay: 0.5s;
}
.load::after{
margin-left: 15px;
animation-delay: 1.5s;
}
.load{
animation-delay: 1s;
}
@keyframes rotateCircle{
0%{
/* transform: rotate(0); */
background: rgba(255, 255, 255, .6);
}
100%{
/* transform: rotate(360deg); */
background: rgba(255, 255, 255);
}
}
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
家乡的茶园开满花
夜夜想起妈妈的话 闪闪的泪光鲁冰花
生成图片
X
// 加载即克隆,克隆完截图赋值,移除克隆元素,点击展示图片
window.onload = function () {
var IMAGE_URL;
// $('#wrap').clone().appendTo($('#hidden_wrap'));
// takeScreenshot();
// $('#hidden_wrap #wrap').remove();
function takeScreenshot() {
var shareContent = document.getElementById('hidden_wrap'); //需要截图的包裹的(原生的)DOM 对象
// var shareContent = document.getElementsByClassName('page-1')[0];
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
console.log('分享元素', $('#hidden_wrap #wrap').height());
console.log('分享元素宽度', width);
console.log('分享元素高度', height);
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
var context = canvas.getContext("2d");
// context.scale(scale,scale); //获取context,设置scale
var opts = {
// dpi: window.devicePixelRatio*2,
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关
width: width, //dom 原始宽度
height: height, //dom 原始高度
backgroundColor: 'transparent',
};
html2canvas(shareContent, opts).then(function (canvas) {
IMAGE_URL = canvas.toDataURL("image/png");
$('.copyImage').attr('src', IMAGE_URL);
// $('#hidden_wrap').css('overflow','hidden');
})
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {
type: mime
})
}
function downloadBase64(dataUrl, filename) {
var imageFile, href
// const downloadLink = document.createElement('a')
var downloadLink = document.getElementById('dl-hidden')
try {
var blob = dataURLtoBlob(dataUrl)
var href = window.URL.createObjectURL(blob)
downloadLink.download = filename
downloadLink.href = href
downloadLink.click()
} catch (err) {} finally {
if (href) {
window.URL.revokeObjectURL(href)
}
// downloadLink.remove()
}
}
// $(".letter-title").text(new Date().toLocaleString());
$('#saveImg').on('click', function () {
$('#capture img').attr('src','');
$('.load').show();
$('.log').show();
$('#wrap').clone().appendTo($('#hidden_wrap'));
let time = setInterval(() => {
if (!$('#hidden_wrap wrap').is('hidden')) {
clearInterval(time);
takeScreenshot();
$('#hidden_wrap #wrap').remove();
}
}, 800);
});
$('#capture img').on('load',function(){
$('.load').hide();
$('#saveImg').text('长按上图保存图片');
console.log('生成图加载成功');
})
$('.close').on('touchend', function () {
$('.log').hide();
$('#saveImg').text('生成图片');
})
// var curStyle=0;
// $("#change-style").click(function(e){
// takeScreenshot();
// if(curStyle==0){
// $(".letter-content").attr("style","opacity:0.8;");
// $(".letter-bg").attr("style","border-radius:50px;");
// $("#change-style").text("普通");
// curStyle=1;
// }else{
// $(".letter-content").attr("style","opacity:1;");
// $(".letter-bg").attr("style","border-radius:0;");
// $("#change-style").text("圆角透明");
// curStyle=0;
// }
// })
// $("#save-local").click(function(e){
// downloadBase64(IMAGE_URL, '合成图.png')
// })
}