canvas 保存图片时,加边距
如果你想在 Canvas 中的图像或绘制内容周围加上边距并保存,你可以通过以下步骤实现:
创建一个新的更大尺寸的 canvas 对象。这个新 canvas 的尺寸应该是原始图像或内容的尺寸加上你想要的边距。
将原始的图像或内容绘制到新的 canvas 上,在绘制时设置适当的偏移量,以创建所需的边距。
下面是一段示例代码:
// 首先获取原始 canvas 和 context
var originalCanvas = document.getElementById('yourOriginalCanvas');
var ctx = originalCanvas.getContext('2d');
// 绘制你的图像或其他内容...
// 创建新的 canvas 和 context
var newCanvas = document.createElement('canvas');
var newCtx = newCanvas.getContext('2d');
// 设置新 canvas 的尺寸(在此我们设定了20像素的边距)
newCanvas.width = originalCanvas.width + 20 * 2;
newCanvas.height = originalCanvas.height + 20 * 2;
// 在新 canvas 上以偏移位置(相当于边距)绘制原来的 canvas
newCtx.drawImage(originalCanvas, 20, 20);
// 然后你就可以保存 newCanvas 作为图片了
var img = newCanvas.toDataURL("image/png");
这个示例代码中设定了20像素的边距,你可以根据需要更改这个值以达到你需要的效果。