Canvas创建并转换图片实现下载

困惑阿三

于 2024-08-06 11:44:45 发布

阅读量190

点赞数 1

文章标签：信息可视化 javascript canva可画前端

本文链接：https://blog.csdn.net/Hu560231/article/details/140951373

版权

Canvas简介：

Canvas API是HTML5的一部分，它允许在Web页面上进行图形绘制。不需要任何插件或下载，只需要一个支持HTML5的浏览器。它不仅可以绘制图形，还可以进行动画、游戏设计或数据可视化。是一个非常强大的标签。

下面我们实现一个最常见的问题：

在JavaScript中，将Canvas元素转换为图片并保存到本地或者直接保存一张图片是常见的需求，尤其是在Web应用中处理用户生成的内容或进行数据可视化时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建canvas 增加宽高和id -->
    <canvas width="500" height="500" id="canvas"></canvas>

    <button>下载</button>

</body>

<script>
    // 获取canvas Dom
    const canvas = document.getElementById("canvas");
    // 创建画笔
    const ctx = canvas.getContext('2d')
    // 设置填充色
    ctx.fillStyle="#fcc"
    // 设置矩形
    ctx.fillRect(0, 0, 500, 500)
    // 创建img
    const img = document.createElement("img")
    // 设置宽高
    img.width = canvas.width
    img.height = canvas.height
    // 使用 toDataURL 将canvas转换成base64格式的图片
    img.src = canvas.toDataURL()
    // 追加到body中 页面显示
    document.body.appendChild(img)
    // 模拟下载按钮
    const btn = document.querySelector("button")

    // 设置点击时间
    btn.onclick = ()=>{
        const a = document.createElement('a') // 动态创建a标签
        a.download = '粉红色的背景' // 下载名称
        a.href = img.src     // 设置下载路径
        a.click()  // 触发点击事件，使图片下载
    }

</script>
</html>

困惑阿三

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas创建并转换图片实现下载

Canvas API是HTML5的一部分，它允许在Web页面上进行图形绘制。不需要任何插件或下载，只需要一个支持HTML5的浏览器。它不仅可以绘制图形，还可以进行动画、游戏设计或数据可视化。是一个非常强大的标签。
复制链接

扫一扫