Canvas与导出分辨率问题：如何导出1200×1000像素的JPG？

Canvas导出的图片分辨率完全由其实际像素尺寸（即canvas.width和canvas.height属性）决定，和CSS设置的显示尺寸无关。你当前的Canvas实际像素是600×500，所以导出的图片就是这个尺寸。要导出原图大小，按以下步骤操作：

1. 调整Canvas的实际像素尺寸
   将Canvas的width和height属性直接设置为1200和1000（注意不是CSS样式的宽高）：

   // 假设mycanvas是你的Canvas元素引用
   mycanvas.current.width = 1200;
   mycanvas.current.height = 1000;
   

2. 正确绘制完整图片
   你之前的drawImage(img,600,500)写法是把图片放在Canvas的(600,500)位置，只会显示图片的一部分。要绘制完整的1200×1000图片，使用不带偏移的绘制方式：

   const ctx = mycanvas.current.getContext('2d');
   ctx.drawImage(img, 0, 0); // 将图片从Canvas左上角开始绘制，占满整个Canvas
   

3. 保持页面显示尺寸（可选）
   如果需要Canvas在页面上还是显示600×500的大小（避免过大），可以通过CSS设置显示尺寸：

   canvas {
     width: 600px;
     height: 500px;
   }
   

   这样页面上显示的是缩小后的效果，但Canvas的实际像素还是1200×1000，导出的图片就是原图分辨率。

4. 导出代码保持不变（可优化下载体验）
   原有的导出逻辑不需要修改，可额外添加下载文件名优化体验：

   var a = document.createElement('a');
   a.href = mycanvas.current.toDataURL('image/jpeg', 0.85);
   a.download = 'high-res-image.jpg'; // 指定下载的文件名
   a.click();
   

内容的提问来源于stack exchange，提问作者whitebear