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

Question

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

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

然后我找到要更改的形状的 ref 并使用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
};