html转为html2canva图片，解决图片模糊问题

最新推荐文章于 2025-03-08 10:52:17 发布

亮亮同學

最新推荐文章于 2025-03-08 10:52:17 发布

阅读量518

点赞数

分类专栏： javascript html

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/u011421988/article/details/105364122

版权

html 同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文介绍如何使用HTML2Canvas库解决手机端截图模糊问题，通过调整DOM元素尺寸和分辨率，确保截图清晰度，适用于移动设备的图片保存需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
  <a class="save_img" href="javascript:;">长按下方图片保存到手机</a>
  <div class="hid_div" > <!--hid_div是展示数据的 -->

  	</div>
  	<div class="img_div"> <!-- img_div是放截图的地方 -->
	  	<img id="imgSC"/>
	  </div>
</body>

首先需要引入html2canva的js 下载地址 https://github.com/niklasvh/html2canvas/releases

    //解决图片模糊问题，将图片放大
    var canvas2 = document.querySelector('.hid_div');
    var width = canvas2.offsetWidth;//dom宽
    var height = canvas2.offsetHeight;//dom高
	 html2canvas($(".hid_div"),{
			//dpi: window.devicePixelRatio * 2,
			scale: 2,
			width: width,
            heigth: height,
		}).then(function (canvas) {
            //因为是手机端展示，所以图片高度使用原始高宽展示
            //保存到手机上的是放大之后的图片
			$('#imgSC').css("width",width);
			$('#imgSC').css("height",height);
	        var url = canvas.toDataURL("image/png"); // 获取生成的图片的url
            //手机端绑定到img标签。pc端绑定到a标签下进行下载
	        $("#imgSC").attr("src",url);
            //隐藏显示的内容
	        $('.hid_div').hide();
	    });