Javascript 如何在画布中提取图像的一部分并将其用作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 + ')');
});

我试图从高度和宽度为300px的（0,0）中提取画布上图像的一部分，并将imageData对象转换为dataUrl，用作div的背景

我得到一个错误：imageData.toDataUrl（）不是函数。我怎样才能做到这一点

提前谢谢

是一个

htmlcanvaseElement

方法，您必须从canvas元素本身调用它

在将结果图像数据的大小更改为所需大小后，您可以将其缩回画布，但最简单的解决方案是使用第二个屏幕外画布，通过以下方法可以绘制第一个画布：

//裁剪函数
var crop=函数（画布、偏移量x、偏移量、宽度、高度、回调）{
//创建内存画布
var buffer=document.createElement（'canvas'）；
var b_ctx=buffer.getContext（'2d'）；
//将其宽度/高度设置为所需的宽度/高度
buffer.width=宽度；
缓冲区高度=高度；
//在缓冲区1上绘制主画布
//drawImage（源、源X、源Y、源宽度、源高度、，
//目的地X、目的地Y、目的地宽度、目的地高度）
b_ctx.drawImage（画布、偏移量、偏移量、宽度、高度、，
0，0，buffer.width，buffer.height）；
//现在使用缓冲区画布的dataURL调用回调
回调（buffer.toDataURL（））；
};
//#主画布部分
var canvas=document.getElementById（'main'）；
var img=新图像（）；
img.crossOrigin=“匿名”；
img.onload=函数（）{
canvas.width=this.width；
canvas.height=this.height；
canvas.getContext（'2d'）.drawImage（this，0，0）；
//在调用裁剪之前设置一点超时
setTimeout（函数（）{
裁剪（画布，100，70，70，70，回调）
}, 1000);
};
img.src=”https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";
//如何处理裁剪图像的dataURL
var callback=函数（dataURL）{
document.body.style.backgroundImage='url（'+dataURL+'）；
}

---

我的要求是目标必须是div元素。我也不能重写源代码画布。有没有办法将源画布上的一部分图像提取到目标div中？谢谢在这里，我使用的

元素有一个目标，您可以将其更改为您想要的任何元素（甚至是主画布）或

（检查代码片段末尾的

回调

函数。哎呀！我想我没看到。我想这会起作用。我会等着看我是否得到一个避免缓冲区画布的答案，如果没有，我会接受你的答案。谢谢！在我的答案中，你也有办法不用缓冲区画布来做这件事（基本上：将画布调整为裁剪大小，然后

putImageData（yourImageData，0,0）

然后

canvas.toDataURL（）

，但这对cpu来说比缓冲区画布更重，这就是为什么我只给您写了两个解决方案中最好的一个。（

getImageData

和

putImageData

速度非常慢，如果您需要保持原始画布的原样，则必须调用这两个方法两次…）