相关疑难解决方法(0)

如何在画布中提取图像的一部分并将其用作div的背景图像?

这是我的代码的样子:

document.addEventListener('DOMContentLoaded', function () {
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext("2d");
        var imageData = ctx.getImageData(0, 0, 300, 300);
        var tile = {
                        'id': 1,
                        'data': imageData,
                        'dataUrl': imageData.toDataUrl()
                    };
        var div = document.createElement('div');
                div.classList.add('tile');
                grid.appendChild(div);
                div.style.backgroundImage = ('url(' + tile.dataUrl + ')');
});
Run Code Online (Sandbox Code Playgroud)

我正在尝试从(0,0)高度和宽度为300px的画布上提取图像的一部分,并将该imageData对象转换为dataUrl以用作div的背景.

我收到一个错误:imageData.toDataUrl()不是一个函数.我怎样才能做到这一点?

提前致谢!

javascript html5 canvas data-url

5
推荐指数
1
解决办法
4750
查看次数

标签 统计

canvas ×1

data-url ×1

html5 ×1

javascript ×1