0

Following code (from images on imgur) in fillPatternImage works: 

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

then I find ref to the shape I want to change and I use setAttr("fillPatternImage", image) and it the pattern shows in my shape

But when I do: 

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

and then do the whole setAttr thing, it wouldn't work. I am sure the source is valid in that if I make a new state called imageUrl with url from the uploaded image and do: <img src={this.state.imageUrl}, the image shows perfectly.

Only difference between the 2 srcs:

image taken from https://i.stack.imgur.com/EPxZX.png

By the way, importing image file from the public folder and then setting it as the src of a native javascript image then fillPatternImage with that image also worked.

questionasker
  • 2,536
  • 12
  • 55
  • 119
Acy
  • 589
  • 2
  • 9
  • 25

1 Answers1

0

Instead of using URL.createObjectURL you can use base64 URL of the file:

var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = function () {
  var newImage = new window.Image()
  newImage.src = reader.result
};
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Hi Lavrton, first of all thank you for writing Konva. I still have no luck with this solution, after setAttr fillPatternImage with image created with your way it still turns black. If I do console.log(the image I fillPatternImage with) I see its src being a long (44.6KB) string. Is there perhaps another way to do this? Or is there some way to varify if I am doing something wrong? – Acy Jun 28 '19 at 03:48
  • Trying to open that very long src in new tab. You should see the image. – lavrton Jun 29 '19 at 12:55