admin管理员组

文章数量:1315017

Probably trivial, but I have no idea how to do it... I want to access img outside of createThumbnail. How can I do that?

Function

function createThumbnail(){
    canvas.deactivateAll().renderAll(); 
    html2canvas($('#chartdiv'), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png"),
                elem = document.getElementById("thumbnail_img");
                elem.src = img;
        }
    });
}

Probably trivial, but I have no idea how to do it... I want to access img outside of createThumbnail. How can I do that?

Function

function createThumbnail(){
    canvas.deactivateAll().renderAll(); 
    html2canvas($('#chartdiv'), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png"),
                elem = document.getElementById("thumbnail_img");
                elem.src = img;
        }
    });
}

• javascript

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 22, 2014 at 16:13 gcogco 1,70077 gold badges2424 silver badges4646 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

best is to return an object. so you can "use" createThumbnail multiple times (this isn't possible with a global variable).

This way your code is nice and you don't make the function depending on your global scope / global variables.

function createThumbnail(){
    canvas.deactivateAll().renderAll(); 
    var img = {}, elem;
    html2canvas($('#chartdiv'), {
        onrendered: function(canvas) {
            img.dataUrl = canvas.toDataURL("image/png"),
            elem = document.getElementById("thumbnail_img");
            elem.src = img;
        }
    });
    return img;
}

var img = createThumbnail();
var dataUrl = img.dataUrl; // contains the dataUrl from the canvas when onrendered was called

You are setting a local variable to the onrendered callback. Move that outside of the function and then just assign that variable from within the function.

var img; //Set empty variable here.

function createThumbnail(){
  canvas.deactivateAll().renderAll();
  html2canvas($('#chartdiv'), {
    onrendered: function(canvas) {
      var elem;
      img = canvas.toDataURL("image/png");
      elem = document.getElementById("thumbnail_img");
      elem.src = img;
    }
  });
}

See this article about closures

You can’t by default, since img is declared inside the anonymous function. You’ll have to assign it to something accessible from the outside.

var accessibleImg;

function createThumbnail(){
    canvas.deactivateAll().renderAll(); 
    html2canvas($('#chartdiv'), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png"),
                elem = document.getElementById("thumbnail_img");
                elem.src = img;
            accessibleImg = img;
        }
    });
}

本文标签： javascriptHow to access variable outside js functionStack Overflow