您可以按照以下步骤将最终分辨率保持为1200 x 1000 px。

var finalCanvas = document.createElement('canvas');
finalCanvas.width = 1200;
finalCanvas.height = 1000;
var finalCtx = finalCanvas.getContext('2d');

finalCtx.drawImage(img, 0, 0, finalCanvas.width, finalCanvas.height);
var a = document.createElement('a');
a.href = finalCanvas.toDataURL('image/jpeg', 0.85);

我使用clientWidth和width
使用clientWidth = 600和width = 1200
这是可以做到的

HTMLCanvasElement

分辨率V显示尺寸

解析

使用canvas元素属性HTMLCanvasElement.width和HTMLCanvasElement.height设置分辨率（像素数

*注意设置HTMLCanvasElement.width或HTMLCanvasElement.height会将CanvasRenderingContext2D属性重置（清除/归零所有像素）为默认值。

显示大小

要设置画布元素的显示大小（在页面上显示的大小），请使用元素样式（CSS）属性HTMLCanvasElement.style.width和HTMLCanvasElement.style.height

*注意显示像素可能与显示设备的物理像素大小（显示器上的像素大小）不匹配。要知道物理像素大小，请使用devicePixelRatio。物理像素的尺寸目前对于浏览器/ JS是未知的。

示例

将显示大小设置为分辨率的一半。

*注意必须使用devicePixelRatio将画布像素调整为页面像素大小。

function resizeCanvas(canvasEl, width, height, displayScale = 0.5) {
    displayScale *= devicePixelRatio;
    canvasEl.width = width;
    canvasEl.height = height;
    canvasEl.style.width = (width * displayScale).toFixed(0) + "px";
    canvasEl.style.height = (height * displayScale).toFixed(0) + "px";
}

使用上述函数

// Set resolution 1200 by 1000 and display size 600 by 500. 
// Create dataURL of canvas image 1200 by 1000
const canvas = mycanvas.current;
resizeCanvas(canvas, 1200, 1000, 0.5); 
canvas.getContext("2d").drawImage(img, canvas.width, canvas.height);
const dataURL = canvas.toDataURL("image/jpeg", 0.85);