konvajs - 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}，则图像会完美显示。

2个src之间的唯一区别：

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

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

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

Answer 1

URL.createObjectURL您可以使用文件的 base64 URL而不是使用：

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