canvas绘制图片时宽高2倍

在使用canvas绘制图像时遇到一个问题,尽管设置了canvas元素的宽高与原图相同,但实际绘制的图片大小却是原始尺寸的两倍。问题出现在JavaScript的img.onload回调中,当加载图片后在canvas上绘制。目前原因未知,寻求有经验的开发者帮助解决。

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

记录一下 canvas 绘制图像时按原屏幕宽高设置,结果绘制出来的图片却是原图2倍大小的问题

<canvas id="canvas" class="bg_img" height="1334" width="750"
      >对不起,你的浏览器不支持Canvas</canvas>
mounted() {
  const canvas = document.querySelector("#canvas");
  let ctxt = canvas.getContext("2d");
  let img = new Image();

  img.src = require("../../../assets/images/4741/47413956/v2_q933eo.jpg");
  img.onload = function() {
    ctxt.drawImage(img, 0, 0)
  }
}

能力有限,不知道为啥,一点一点试出来的,还请明白的大佬告知~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

码小余の博客

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

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

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

打赏作者

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

抵扣说明:

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

余额充值