【基础知识】HTML5 Canvas 打印Canvas的内容(实现+进阶)

最新推荐文章于 2024-05-17 07:46:48 发布

苏一恒

最新推荐文章于 2024-05-17 07:46:48 发布

阅读量5.8k

点赞数

分类专栏： Canvas系列教程(从入门到精通)【详细解读】文章标签： Canvas toDataUrl canvas canvas转化img

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/100017900

版权

Canvas系列教程(从入门到精通)【详细解读】专栏收录该内容

59 篇文章 105 订阅

订阅专栏

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

引子

我们想打印一个Canvas的内容，会考虑使用右键导出到磁盘来操作：

在Safari浏览器中对Canvas元素右键：

这里提供了一个Canvas的页面，可以选择右键Canvas查看效果

https://827652549.github.io/Canvas/Unit1/Clock.html

Canvas画布在某些浏览器里是不支持单独打印的，比如safari（上图）等等，但chrome就可以。

初级阶段

思路

为了让所有浏览器都支持能打印canvas，我们考虑让Canvas变成<img/>元素，这样便支持右键导出到本地磁盘了。

Canvas的API提供了toDataURL()的方法，该方法返回的引用，指向了给定canvas元素的数据地址，我们可以将img的src属性设置成这个返回值就行。

我们实现这个方法到一个按钮之中，然后通过点击按钮生成对应img图并覆盖原canvas即可

实现效果

https://827652549.github.io/Canvas/Unit1/ClockReturnImage.html

转化img之前右键

转化img之后右键

结果

点击按钮转化之后就能够通过右键进行操作了。

核心代码

这是相对于时钟项目的增加的代码


<body>
<div id='controls'>
    <input id='snapshotButton' type='button' value='Take snapshot'/>
    <p>点击按钮，canvas和img的相互转化，通过右键查看不同效果</p>
</div>

<img id='snapshotImageElement'/>
<canvas id="canvas" height="400" width="400">Canvas不支持。</canvas>
</body>


<script>
 snapshotButton = document.getElementById('snapshotButton'),
        snapshotImageElement = document.getElementById('snapshotImageElement'),
        loop;


    snapshotButton.onclick = function (e) {
        var dataUrl;

        if (snapshotButton.value === 'Take snapshot') {
            dataUrl = canvas.toDataURL();
            clearInterval(loop);
            snapshotImageElement.src = dataUrl;
            snapshotImageElement.style.display = 'inline';
            canvas.style.display = 'none';
            snapshotButton.value = 'Return to Canvas';
        }
        else {
            snapshotButton.value = 'Take snapshot';
            canvas.style.display = 'inline';
            snapshotImageElement.style.display = 'none';
            loop = setInterval(drawClock, 1000);
        }
    };
</script>

进阶阶段

反思

但是我们的用户可不愿意接受每次导出图像还要刻意地点击一个按钮，他们更希望直接右键导出。

分析

我们可以考虑离屏Canvas，实现不经过用户干预的情况下完成“显示模式”的切换。

离屏Canvas

在大多数情况下，都可以把背景存储在一个或多个离屏Canvas中，并将这些离屏Canvas中的某一部分绘制到屏幕上，以此来大幅度提高应用程序的性能。

原理

程序每秒钟都会将时钟绘制到离屏canvas中，然后将canvas的数据地址设置为图形元素的src属性，于是就形成了一副反映离屏canvas内容变化的动画图像。

实现效果

https://827652549.github.io/Canvas/Unit1/ClockReturnImage2.html

直接右键即可导出

核心代码

function updateClockImage() {
        dataUrl = canvas.toDataURL();
        snapshotImageElement.src = dataUrl;
    }

苏一恒

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【基础知识】HTML5 Canvas 打印Canvas的内容(实现+进阶)

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy目录引子初级阶段思路实现效果结果核心代码进阶阶段反思分析原理实现效果核心代码...
复制链接

扫一扫