我的画布是width=“600px”和height=“500px”。
然后在画布上显示图像(1200px和1000px)
ctx.drawImage(img,600,500);
最后用这个脚本导出。
var a = document.createElement('a');
a.href = mycanvas.current.toDataURL('image/jpeg', 0.85);
在这种情况下,jpg的最终分辨率是600px x 500px。
但是我想保持最终分辨率1200 x 1000 jpg。
什么是实现此目的的最佳实践。
3条答案
按热度按时间yqhsw0fo1#
您可以按照以下步骤将最终分辨率保持为1200 x 1000 px。
g2ieeal72#
我使用
clientWidth
和width
使用
clientWidth = 600
和width = 1200
这是可以做到的
vshtjzan3#
HTMLCanvasElement
分辨率V显示尺寸
解析
使用canvas元素属性HTMLCanvasElement.width和HTMLCanvasElement.height设置分辨率(像素数
*注意设置HTMLCanvasElement.width或HTMLCanvasElement.height会将CanvasRenderingContext2D属性重置(清除/归零所有像素)为默认值。
显示大小
要设置画布元素的显示大小(在页面上显示的大小),请使用元素样式(CSS)属性HTMLCanvasElement.style.width和HTMLCanvasElement.style.height
*注意显示像素可能与显示设备的物理像素大小(显示器上的像素大小)不匹配。要知道物理像素大小,请使用devicePixelRatio。物理像素的尺寸目前对于浏览器/ JS是未知的。
示例
将显示大小设置为分辨率的一半。
*注意必须使用devicePixelRatio将画布像素调整为页面像素大小。
使用上述函数