React + Konva：如何用上传的图像填充PatternImage？

Question

fillPatternImage中的以下代码（来自imgur上的图像）有效：

var url = "http://www.imgur....." 
var newImage = new window.Image(); 
newImage.src = url; 

然后我找到要更改的形状的参考，然后使用setAttr("fillPatternImage", image)，并且图案以我的形状显示

但是当我这样做时：

<input type="file" ...blah blah ... onClick={(event) => {
   var url = URL.createObjectURL(event.target.files[0]; 
   let newImage = new window.Image()
   newImage.src = url
 }}

然后执行整个setAttr的操作，将无法正常工作。我确信源是有效的，因为如果我使用上传的图像中的url创建一个名为imageUrl的新状态并执行<img src={this.state.imageUrl}，则该图像将完美显示。

只有两个src之间的区别：

直接imgur源中的
• 源只是图像的链接，例如：http://i.imgur.com/A6H6xHF.png

• 上载图片的来源是“ blob：http://localhost:3000/c0e5194d-1c58-4aa1-b4d6-6abf7438e179”

顺便说一句，从公共文件夹导入图像文件，然后将其设置为本地javascript图像的src，然后使用该图像的fillPatternImage也可以。

Answer 1

您可以使用文件的base64 URL来代替使用URL.createObjectURL：

var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = function () {
  var newImage = new window.Image()
  newImage.src = reader.result
};