关于konva中图片Image图形的一些问题和解决方案

图形的加载

在konva中，有两种方式加载图片，其原理都是需要加载图片dom，等图片完全加载完成再置入canvas中，官方的例子是这样的：

var imageObj = new Image();
imageObj.onload = function() {
  var yoda = new Konva.Image({
    x: 50,
    y: 50,
    image: imageObj,
    width: 106,
    height: 118
  });

  // add the shape to the layer
  layer.add(yoda);
  layer.batchDraw();
};
imageObj.src = '/assets/yoda.jpg';

这个还是能看懂，但是这种方式其实有个问题：

当我们导出json配置后，图片就会丢失，因为json只能是文本配置，不是dom这些。

官方在json哪又声明了一种新的方式：

Konva.Image.fromURL(imageURL, function(image){
   // image is Konva.Image instance
   layer.add(image);
   layer.draw();
 });

也就是说，konva中的Image对象，除了new方法，还有静态的fromURL方法，该方法提供了onload 这一系列操作，通过回调我们可以处理加载完成后的逻辑。

通过第二种写法，我想了下，将图片的配置改成这样：

{
    "attrs": {
        "id": "background",
        "lowestLevel": true,
        "src": "xxx713/96612a7bf1a6dd7ab76e05ff61618a12.png",
        "background": true,
        "x": 89,
        "y": 184,
    },
    "className": "Image"
}

不要配置image属性，增加一个自定义src属性，然后这样json就能导出，我们konva处理的时候，就直接读取src，然后处理就行了，个人使用的就是第二种方法。

这样我们导入导出图片的问题就解决了。

重点：

在konva的逻辑里，json配置是不会携带事件和图片dom的（本身也带不了），所以，图片这些是需要单独处理的，所以我们在json读取完毕后，再单独处理图片和事件。

导出json配置，图片width和height属性丢失

即便你再创建Konva.Image时，设置了width和height，但是在导出json时，会默认忽略，看官方解释是因为默认图片的宽高是用的图片实际的宽高，所以在导出后这个参数其实是无效的，反正最后就没有给你导出来。

官方建议就是使用自定义属性保存，这样下次使用就能读取

{
    "attrs": {
        "id": "background",
        "src": "xxxxmages/20210713/96612a7bf1a6dd7ab76e05ff61618a12.png",
        "lowestLevel": true,
        "background": true,
        "x": 89,
        "y": 184,
        "myWidth": 582,
        "myHeight": 432
    },
    "className": "Image"
}

配置差不多这样。

如果改动了图片大小，记得自定义的属性也调整一下