vue 使用原生canvas_vue使用canvas签名之清空和保存
时间: 2023-08-29 14:06:21 浏览: 55
在 Vue 中使用原生 Canvas 实现签名功能,可以通过以下步骤实现清空和保存功能:
清空:在 Vue 组件中,使用 `$refs` 获取到 Canvas 元素,然后调用 `clearRect()` 方法清空画布。代码示例如下:
```html
<template>
<div>
<canvas ref="canvas"></canvas>
<button @click="clearCanvas">清空</button>
</div>
</template>
<script>
export default {
methods: {
clearCanvas() {
const canvas = this.$refs.canvas;
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
};
</script>
```
保存:将 Canvas 元素转换为图片,并下载保存。可以使用 `toDataURL()` 方法将 Canvas 转换为 base64 编码的 data URL,然后创建一个链接并下载。代码示例如下:
```html
<template>
<div>
<canvas ref="canvas"></canvas>
<button @click="saveImage">保存</button>
</div>
</template>
<script>
export default {
methods: {
saveImage() {
const canvas = this.$refs.canvas;
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'signature.png';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
</script>
```
在 `saveImage()` 方法中,先将 Canvas 转换为 data URL,然后创建一个 `<a>` 标签,并设置 `download` 属性为要保存的图片文件名,`href` 属性为 data URL。最后将该标签添加到页面中,并触发点击事件下载图片,下载完成后再移除该标签。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)