canvas绘制下载的图片

最新推荐文章于 2023-12-05 16:19:05 发布

cc_bbs

最新推荐文章于 2023-12-05 16:19:05 发布

阅读量145

点赞数

分类专栏： js成长日记文章标签： canvas blob ajax

本文链接：https://blog.csdn.net/q314235965/article/details/118677664

版权

js成长日记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

上代码：

<body>
    <canvas width="300" height="300" id="cvs"></canvas>
    <script>
        const cvs = document.getElementById('cvs');
        const ctx = cvs.getContext('2d');
        function getPic() {
            const xhr = new XMLHttpRequest();
            xhr.open('get', 'http://localhost:1234/pic.png');
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    createImageBitmap(xhr.response).then(result => {
                        ctx.drawImage(result, 0, 0);
                    })
                }
            }
            xhr.send();
        }
        getPic();
    </script>
</body>

流程是：

ctx.drawImage接口，第一个参数可以是

显然，只有ImageBitmap可能符合要求。

ImageBitmap介绍：

提供了createImageBitmap接口，是一个工厂方法，可以从多种源获得imageBitmap

多种源包括：

里面包含了blob的源，正好对应xmlhttprequest.responseType的blob

所以最终关键点就在：

xhr.responseType = 'blob';

这一步了

它让浏览器将服务器buffer数据转换成blob。

类型链：

createImageBitmap(xhr.response/* blob */)
    .then(result/* imageBitmap */ => {
        ctx.drawImage(result, 0, 0);
    })

cc_bbs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制下载的图片

上代码：<body> <canvas width="300" height="300" id="cvs"></canvas> <script> const cvs = document.getElementById('cvs'); const ctx = cvs.getContext('2d'); function getPic() { const xhr = new
复制链接

扫一扫