vue html2canvas截图 图片模糊 (二)

7 篇文章 0 订阅
  1. 接上一篇,截取隐藏域图片,截图出现图片模糊,处理函数如下
toImage() {
				let _canvas = this.$refs.imageWrapper;
				let canvas2 = document.createElement("canvas");

				
				let w = parseInt(window.getComputedStyle(_canvas, null).width);
				let h = parseInt(window.getComputedStyle(_canvas, null).height);
				//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了  
				let scaleBy = 2;
				canvas2.width = w * scaleBy;
				canvas2.height = h * scaleBy;
				canvas2.style.width = w + "px";
				canvas2.style.height = h + "px";

				let context = canvas2.getContext("2d");
				context.scale(scaleBy, scaleBy);  
				

				/*let width = _canvas.offsetWidth;
				let height = _canvas.offsetHeight;
				let offsetTop =0;// _canvas.offsetTop;
				let canvas = document.createElement("canvas");
				let context = canvas.getContext('2d');
				let scaleBy = 2; //放大倍数
				canvas.width = width * scaleBy;
				canvas.height = (height + offsetTop) * scaleBy;
				context.scale(scaleBy, scaleBy);*/


				html2canvas(this.$refs.imageWrapper, {
					canvas: canvas2,
					useCORS: true,
					scale: 1,

				}).then((canvas) => {
					let dataURL = canvas.toDataURL("image/png");
					this.dataURL = dataURL;

					this.shareDialogVisible = true;


					this.isShowShare = false;
				});

			}

上一篇:Vue html2canvas截图 图片空白(一)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔走的小龙虾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值