KineticJS：如何从画布初始化图像？答案

【问题标题】：KineticJS: How do I init an Image from a Canvas?KineticJS：如何从画布初始化图像？
【发布时间】：2014-06-02 03:19:18
【问题描述】：

我有一个画布元素

var canvas; // some canvas

其中包含一张图片。

是否可以从画布元素初始化 KineticJS 图像？如果不是，我将如何以最快的方式从画布中获取 KineticJS 图像？

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案1】：

当然！

您可以使用画布元素作为 KineticJS.Image 的来源：

var canvas=document.getElementById("myCanvas");  // or createElement

...  // do stuff on the canvas element

var image1 = new Kinetic.Image({
    x:40,
    y:40,
    image:canvas,
});
layer.add(image1);
layer.draw();

【讨论】：

我可以在 KineticJS 图像创建后切换图像吗？这可用于保留图像属性但更改图像本身？
我不太确定您的后续评论在问什么：-\ Kinetic.Image 将更新以反映 Canvas 元素上的任何新绘图。反之则不然。如果您旋转或缩放 Kinetic.Image，则 Canvas 元素保持未旋转和未缩放。祝你的项目好运！
我的问题是：我可以更改图像资源，即为 KineticJS 图像分配一个新图像吗？
当然，您可以使用 myImage.image(newImageObject); 更改 Kinetic.Image 源。注意：newImageObject 必须是 (1) html img 元素 (2) 内存中的图像对象：var newImageObject=new Image()，或 (3) 画布元素。我会看看你链接中的问题。
糟糕，对不起！它应该是 myImage.setImage() 而不是 myImage.image()。您可以将 3 种类型的图像中的任何一种提供给 setImage。