Javascript 是否要从放大的2d上下文中获取数据URL?
我有一个画布,它的高度和宽度随视图端口的宽度而变化。现在,画布用于使用toDataURL创建最终png。但是我需要一个固定分辨率的最终png。因此,我必须从画布上放大2d上下文。。但是如何从放大的上下文中获取数据URL呢?我不打算使用第二块画布 *最终目标是保留一个画布(我的空间有限,例如640x480 div容器,而我需要的png是1920x1080分辨率),在该画布上进行绘图。然后我需要一个缩放版本的绘制画布作为png 更新:Javascript 是否要从放大的2d上下文中获取数据URL?,javascript,html,canvas,Javascript,Html,Canvas,我有一个画布,它的高度和宽度随视图端口的宽度而变化。现在,画布用于使用toDataURL创建最终png。但是我需要一个固定分辨率的最终png。因此,我必须从画布上放大2d上下文。。但是如何从放大的上下文中获取数据URL呢?我不打算使用第二块画布 *最终目标是保留一个画布(我的空间有限,例如640x480 div容器,而我需要的png是1920x1080分辨率),在该画布上进行绘图。然后我需要一个缩放版本的绘制画布作为png 更新: 画布上的内容是svg和文本,它们是可伸缩的。它以较低的分辨率显示
画布上的内容是svg和文本,它们是可伸缩的。它以较低的分辨率显示。因此,我需要的是在启用的帧上保存,以获得高分辨率的输出,而不影响质量。所有元素都可以在页面之外使用,您可以创建它们,根据需要使用它们,然后将它们释放给GC,以便稍后进行清理 使用屏幕外画布缩放图像的示例
// Returns a new Image at size width, height
function resizeImage(image, width, height){
const canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width; // set its width and height
canvas.height = height;
// Draw the image scaled onto it
canvas.getContext("2d").drawImage(image,0,0,width,height);
// Create a new image element
const scaledImage = new Image;
// Set its src to the canvas content
scaledImage.src = canvas.toDataURL(); // default mime type image/png
// Return the new scaled image.
return scaledImage; // note Image may no have loaded at this point
// The canvas is dereferences and will be cleaned up by GC very soon.
// nobody will ever know it existed ;|
}
这就是答案。我自己想出来的
canvas.toDataURL({format: 'png',multiplier: 1920/canvas.width});
谢谢你的回答