how to return a value with image.onload in client side

Question

I have tried to export the png image from svg element using Blob. Here, when i click the anchor tag the image has been exported but there is no content because of asynchronous method(image.onload()) called after complete the click event. How to resolve this problem?

<body>
    <a id="export">Click To Export</a>
    <div id="container" width=500px height=200px>
        <svg id="myViewer" width="500px" height="200px" xmlns="http://www.w3.org/2000/svg">
            <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"
            />
        </svg>
    </div>
    <script>
        document.getElementById('export').onclick = function () {
            var tag = document.getElementById('export');
            tag.download = 'Sample' + "." + 'png';
            tag.href = getCanvaElement().toDataURL();
        }

        function getCanvaElement() {
            var svgText = document.getElementById("myViewer").outerHTML;
            var svg = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
            var domURL = self.URL || self.webkitURL || self;
            var url = domURL.createObjectURL(svg);
            var element = document.createElement('canvas');
            var ctx = element.getContext("2d");
            var image = new Image;
            image.onload = function () {
                ctx.drawImage(this, 0, 0);
                domURL.revokeObjectURL(url);
            };
            image.src = url;
            return element;
        }
    </script>
</body>

Sample Link: http://jsfiddle.net/kyjs655r/347/

Your first line is going to get you few down votes. We close question as people who knows the real issue are more likely to get a more suited duplicate. So please do not ask us what and what not to do. Also please try to write your problem clearly. — Rajesh, Oct 09 '17 at 05:36
I'm going to have to go ahead and mark this as a duplicate anyway, sorry. There are already many explanations how to deal with asynchronous function calls — Patrick Hund, Oct 09 '17 at 05:40

score 2 · Accepted Answer · answered Oct 09 '17 at 05:40

2

You can use Promise constructor and async/await, resolve() <canvas> element within <img> load event

 document.getElementById('export').onclick = async function() {
   var tag = document.getElementById('export');
   tag.download = 'Sample' + "." + 'png';
   const canvas = await getCanvaElement();
   tag.href = canvas.toDataURL();
 }

 function getCanvaElement() {
   return new Promise(resolve => {
     var svgText = document.getElementById("myViewer").outerHTML;
     var svg = new Blob([svgText], {
       type: "image/svg+xml;charset=utf-8"
     });
     var domURL = self.URL || self.webkitURL || self;
     var url = domURL.createObjectURL(svg);
     var element = document.createElement('canvas');
     var ctx = element.getContext("2d");
     var image = new Image;
     image.onload = function() {
       ctx.drawImage(this, 0, 0);
       domURL.revokeObjectURL(url);
       resolve(element)
     };
     image.src = url;
   })
 }

jsfiddle http://jsfiddle.net/kyjs655r/351/

answered Oct 09 '17 at 05:40

guest271314

1
15
104
177

It may be an opinionated comment, but should we not mark it as dupe instead, as Promise is covered in dupe – Rajesh Oct 09 '17 at 05:43
@Rajesh You can cast vote or not cast vote as you see fit. – guest271314 Oct 09 '17 at 05:45
@guest271314 in your sample not work.. when i click, the image has not been exported when i click the second time after that only the image has been export – Akbar Basha Oct 09 '17 at 05:48
1

@AkbarBasha The issue is that the code within the `click` handler only sets `.href` of `` element. You can call `document.getElementById('export').click()` following attaching `onclick` handler to set `.href` of `` element http://jsfiddle.net/kyjs655r/352/, or rearrange the code. – guest271314 Oct 09 '17 at 05:52
@AkbarBasha http://jsfiddle.net/kyjs655r/353/ – guest271314 Oct 09 '17 at 05:58
@guest271314 A user with your rep should know, its wrong to answer a dupe. Still this answer addresses the question correctly, so cannot vote against it. Ideally, users like you who have been here from long time should lead by example. – Rajesh Oct 09 '17 at 06:12
@Rajesh oh i c i have more time to play like this game.... If you thinking like this mean i can't able to clarify – Akbar Basha Oct 09 '17 at 06:33
@guest271314 https://stackoverflow.com/questions/47069951/image-is-not-exported-in-edge-browser – Akbar Basha Nov 02 '17 at 11:13

how to return a value with image.onload in client side

1 Answers1