<body>
<div class="card-bg">
</div>
</body>
$(function() {
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('.card-bg');//需要替换成图片的html区域
//获取宽高
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求,对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
context.scale(1.85, 1.7);
html2canvas(_canvas,{canvas:canvas2}).then(function(canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
$(".card-bg").html('<img class="down" src="'+imgUri+'" >');
})
});
网页名称:html2canvas实现保存网页为图片,canvas2image解决图片模糊问题
当前地址:https://www.cdcxhl.com/article4/ggosoe.html
成都网站建设公司_创新互联,为您提供域名注册、微信小程序、企业网站制作、全网营销推广、搜索引擎优化、网站导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联