React + Konva: Как заполнитьPatternImage загруженным изображением?

Question

Следующий код (из изображений на imgur) в fillPatternImage работает:

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
 }}

, а затем делаю всю вещь 1010, это не сработает.Я уверен, что источник действителен в том, что если я создаю новое состояние с именем imageUrl с URL-адресом из загруженного изображения и выполняю: <img src={this.state.imageUrl}, изображение отображается отлично.

Единственная разница между двумя источниками:

• Источник из непосредственного источника imgur - это просто ссылка на изображение, например: http://i.imgur.com/A6H6xHF.png

• источником из загруженного изображения является "blob: http://localhost:3000/c0e5194d-1c58-4aa1-b4d6-6abf7438e179"

Кстати,Импортируйте файл изображения из общей папки, а затем установите его в качестве источника исходного изображения javascript, затем 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
};