html2canvas转换成图片模糊,html2Canvas截取h5网页生成图片模糊问题

关于截取只截取到可视区域的解决方案：

根据上述可视区域解决方案，将要截取的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')

// })

}