Question

我有一个特殊问题，我希望有人可以指出我做得不对。我的原始代码发布在此处：Solved:Vue.js Konva library to display a simple image, what am I missing? 。

正在发生的事情是我正在使用Konva成功显示单个图像（请参阅代码），但是当我尝试使用移动IOS Chrome或Safari查看同一页面时，不会显示任何内容。它适用于桌面OSX Chrome和Safari，但不适用于移动版本。我只是得到一个空白区域，通常我会在我的OSX浏览器上看到图像。我相信我可能会缺少一个步骤。此外，OSX浏览器上另一个有趣的问题是，当我打开页面以显示图像时，它是空白的，直到我进行页面刷新，然后显示。现在也许这是Vue.js而不是Konva。但是，如果有人有进一步的见解，我想我会指出这一点。任何建议都将不胜感激。

[更新：搞定了] - 好的，我做了一些测试，这是我发现的似乎解决了这个问题。经过研究，与此相关的最大问题是在生命周期中的某个地方，图像在渲染之前没有附加到dom。即使我在挂载阶段我正在做image.src，这与我所理解的“.ready（）”相同。我甚至尝试使用Vue中的更新阶段加载图像。同样的问题。什么工作是我使用v-if隐藏Konva阶段，然后在安装期间附加源，然后运行v-if = true后映像附件以显示Konva阶段和宾果游戏！一切正常。它甚至适用于IOS浏览器。

<template>
  <div id="app">
    <h1>Display Image via Konva</h1>
    <div v-if=ShowStage>
     <v-stage ref="stage" :config="configKonva">
       <v-layer ref="layer">
         <v-image :config="configImg"></v-image>
       </v-layer>
     </v-stage>
    </div>
 </div>

<script>
  import Vue from 'vue';
  import VueKonva from 'vue-konva'
  Vue.use(VueKonva)

  export default {
    data() {
      return {
      ShowStage: false,
      testImg: new Image(),
      configKonva: {
        width: 500,
        height: 500
      }
    },
    computed: {
      configImg: function() {
         return {
           x: 20,
           y: 20,
           image: this.testImg,
           width: 200,
           height: 200,
        }
      }
   },
   mounted() {
   this.testImg.src = "https://konvajs.github.io/assets/lion.png"
   this.ShowStage = true 
   }
}   
</script>

Answer 1

我现在遇到了同样的问题。

在本地，它似乎可以在带有 Safari 的 IPhone 上运行，但部署到服务器时它不再工作了。

但是你尝试过这样的事情吗？

const image = new Image()
image.src = url
image.crossOrigin = 'anonymous'
image.onload = () => {
  new Konva.Image({image: image})
  // Further code ...
}

设置为匿名的crossOrigin至少对我有部分帮助。

使用Vue.js在Konva.js中渲染图像适用于桌面浏览器，但不适用于IOS Chrome或Safari

1 个答案: