JSFiddle - React, Tailwind, and code Playground

by wilt

HTML

<div ng-controller="MyCtrl">
    <div>Here i load images using src="{{image.dataURL}}"</div>
    <div data-ng-repeat="image in images1">
        <img src="{{image.dataURL}}" />
    </div>
    <button data-ng-click="load1()">load by clicking here</button>
    <hr>
    <div>Here i load images using data-ng-src="image.dataURL"</div>
    <div data-ng-repeat="image in images2">
        <img data-ng-src="image.dataURL"/>
    </div>
    <button data-ng-click="load2()">load by clicking here</button>
    <hr>
    <div>These are the canvases used to get the image dataURL src</div>
    <div>
        <canvas id="canvas0"></canvas>
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"></canvas>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

var canvas = [];
var colors = ["#FF0000", "#0000FF", "#00FF00"]
var context;

for (var i = 0; i < colors.length; i++) {
    canvas[i] = document.getElementById('canvas' + i);
    canvas[i].width = canvas[i].height = 60;
    context = canvas[i].getContext('2d');
    context.fillStyle = colors[i];
    context.fillRect(10, 10, 50, 50);
}

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.images1 = [];
    $scope.images2 = [];
    $scope.load1 = function () {
        for (var i = 0; i < canvas.length; i++) {
            $scope.images1.push({
                dataURL: canvas[i].toDataURL()
            });
        }
    }
    $scope.load2 = function () {
        for (var i = 0; i < canvas.length; i++) {
            $scope.images2.push({
                dataURL: canvas[i].toDataURL()
            });
        }
    }
}