Проблемы публикации HTML5 Canvas JS. Не будет работать на сервере - PullRequest
Новая
       15

Проблемы публикации HTML5 Canvas JS. Не будет работать на сервере

0 голосов
/ 06 ноября 2018

Я только что провел несколько экспериментов по созданию и публикации веб-сайта с использованием Flash ~ Adobe Flash Professional СС 2014 со встроенным HTML5 Canvas.

Итак, сначала я сделал 3-пейджинговый сайт, похожий на .FLA, и разместил его локально. И все работало нормально. Таким образом, я использовал кириллические имена изображений, используемых для сценария, но не столкнулся с проблемами локально в InternetExplorer. Но браузер Opera говорит, что easeljs-0.7.1.min.js: 13 Uncaught Произошла ошибка. Скорее всего, это связано с ограничениями безопасности при чтении данных пикселей холста с локальными или междоменными изображениями. Хорошо, это не может достигнуть изображений, нет проблем.

Далее я загрузил свой код на бесплатный хостинг, поэтому это не должно быть проблемой - он бесплатный.

Итак, после публикации я получил HTML: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AITS</title>

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="AITS.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    images = images||{};

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
    exportRoot = new lib.AITS();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas" width="1366" height="768" style="background-color:#15424D"></canvas>
</body>
</html>

И файл JavaScript 

(function (lib, img, cjs) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
    width: 1366,
    height: 768,
    fps: 24,
    color: "#15424D",
    manifest: [
        {src:"images/img1.png", id:"img1"},
        {src:"images/img2.png", id:"img2"},
        {src:"images/img3.png", id:"img3"},
        {src:"images/img4.png", id:"img4"},
        {src:"images/img5.png", id:"img5"},
        {src:"images/img6.png", id:"img6"}
    ]
};



// symbols:



(lib.img1 = function() {
    this.initialize(img.img1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,777,350);


(lib.img2 = function() {
    this.initialize(img.img2);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,823,681);


(lib.img3 = function() {
    this.initialize(img.img3);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,438,326);


(lib.img4 = function() {
    this.initialize(img.img4);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,256,256);


(lib.img5 = function() {
    this.initialize(img.img5);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1080,500);


(lib.img6 = function() {
    this.initialize(img.img6);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,651,589);


(lib.Info_but = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Слой 2
    this.text = new cjs.Text("INFO", "96px 'Georgia'", "#CC6600");
    this.text.textAlign = "center";
    this.text.lineHeight = 98;
    this.text.lineWidth = 408;
    this.text.setTransform(288.4,-91.4,1.463,1.463);

    this.timeline.addTween(cjs.Tween.get(this.text).wait(4));

    // Слой 1
    this.instance = new lib.img4();
    this.instance.setTransform(-128,-128);

    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#000000").ss(1,1,1).p("EguggTwMBdBAAAMAAAAnhMhdBAAAg");
    this.shape.setTransform(182.9,-0.1);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("rgba(255,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
    this.shape_1.setTransform(182.9,-0.1);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("rgba(102,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
    this.shape_2.setTransform(182.9,-0.1);

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("rgba(255,255,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
    this.shape_3.setTransform(182.9,-0.1);

    this.shape_4 = new cjs.Shape();
    this.shape_4.graphics.f("rgba(204,0,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
    this.shape_4.setTransform(182.9,-0.1);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-128,-128,720.6,256);


(lib.house = function() {
    this.initialize();

    // Слой 1
    this.instance = new lib.img3();
    this.instance.setTransform(-138.7,-79,0.634,0.485);

    this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-138.7,-79,277.5,158);


(lib.BUTTON_CITY = function() {
    this.initialize();

    // Слой 1
    this.shape = new cjs.Shape();
    this.shape.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");

    this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-158,-71.9,316.1,143.9);


(lib.Photo_but = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Слой 2
    this.text = new cjs.Text("PHOTOS", "61px 'Georgia'", "#FFFF66");
    this.text.textAlign = "center";
    this.text.lineHeight = 63;
    this.text.lineWidth = 290;
    this.text.setTransform(610.1,-61.8);

    this.timeline.addTween(cjs.Tween.get(this.text).wait(4));

    // Слой 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#000000").ss(1,1,1).p("A4rrOMAxXAAAIAAWdMgxXAAAg");
    this.shape.setTransform(615.4,-24.8);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");
    this.shape_1.setTransform(615.4,-24.8);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f().s("#000000").ss(1,1,1).p("AMlrOIMHAAIAAWdI4sAAI4rAAIAA2dINcAAIX0AAIMHWdAAALPIMl2dArPrOILPWdA4rLPINc2d");
    this.shape_2.setTransform(615.4,-24.8);

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("AYsLPIsH2dIMHAAIAAWdgAAALPIMl2dIMHWdgAAALPIrP2dIX0AAIslWdgA4rLPINc2dItcWdIAA2dINcAAILPWdg");
    this.shape_3.setTransform(615.4,-24.8);

    this.instance = new lib.BUTTON_CITY();
    this.instance.setTransform(615.4,-24.8);
    this.instance.filters = [new cjs.ColorFilter(0.61, 0.61, 0.61, 1, 0, 0, 0, 0)];
    this.instance.cache(-160,-74,320,148);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_3},{t:this.shape_2}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(456.3,-97.7,318.1,145.9);


(lib.BOOKING_BUT = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Слой 2
    this.text = new cjs.Text("BOOKING", "67px 'Georgia'", "#CC6600");
    this.text.textAlign = "center";
    this.text.lineHeight = 69;
    this.text.lineWidth = 416;
    this.text.setTransform(-0.7,-48.2);

    this.timeline.addTween(cjs.Tween.get(this.text).wait(4));

    // Слой 1
    this.instance = new lib.house();
    this.instance.setTransform(3.9,-0.6);
    this.instance.filters = [new cjs.ColorFilter(0.44, 0.44, 0.44, 1, 142.8, 142.8, 142.8, 0)];
    this.instance.cache(-141,-81,282,162);
    new cjs.ButtonHelper(this.instance, 0, 1, 1);

    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#000000").ss(1,1,1).p("A7VsvMA2rAAAIAAZfMg2rAAAg");

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("rgba(231,225,219,0.427)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("rgba(142,185,206,0.757)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("rgba(255,255,51,0.529)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");

    this.shape_4 = new cjs.Shape();
    this.shape_4.graphics.f("rgba(255,102,153,0.42)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-208.8,-82.6,420.3,235.9);


// stage content:
(lib.AITS = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // timeline functions:
    this.frame_0 = function() {
        this.stop();

        this.btn1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame4.bind(this));

        this.btn2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame3.bind(this));

        this.btn3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame2.bind(this));


        function fl_ClickToGoToAndPlayFromFrame2()
        {
            this.gotoAndStop(1);
        }
        function fl_ClickToGoToAndPlayFromFrame3()
        {
            this.gotoAndStop(2);
        }
        function fl_ClickToGoToAndPlayFromFrame4()
        {
            this.gotoAndStop(3);
        }
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(4));

    // Слой 4
    this.instance = new lib.img2();
    this.instance.setTransform(149.7,137.6,0.745,0.745);

    this.instance_1 = new lib.img6();
    this.instance_1.setTransform(177.9,135.2,0.857,0.857);

    this.text = new cjs.Text("Email: 7675575@mail.ru", "96px 'Georgia'", "#FFFFFF");
    this.text.textAlign = "center";
    this.text.lineHeight = 98;
    this.text.setTransform(343.2,417.2,0.588,0.591);
    this.text.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);

    this.text_1 = new cjs.Text("Viber/WhatsApp : +79167675575", "96px 'Georgia'", "#FFFFFF");
    this.text_1.textAlign = "center";
    this.text_1.lineHeight = 98;
    this.text_1.setTransform(447.5,304.3,0.588,0.591);
    this.text_1.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance}]},1).to({state:[{t:this.instance_1}]},1).to({state:[{t:this.text_1},{t:this.text}]},1).wait(1));

    // BUTTONS
    this.btn1 = new lib.BOOKING_BUT();
    this.btn1.setTransform(673,529.8);
    new cjs.ButtonHelper(this.btn1, 0, 1, 2, false, new lib.BOOKING_BUT(), 3);

    this.btn3 = new lib.Info_but();
    this.btn3.setTransform(214.3,286.9,0.584,0.633,0,0,0,0.5,-1.3);
    new cjs.ButtonHelper(this.btn3, 0, 1, 2, false, new lib.Info_but(), 3);

    this.btn2 = new lib.Photo_but();
    this.btn2.setTransform(553.9,368.7,1.107,1.107,0,0,0,158.8,47.1);
    new cjs.ButtonHelper(this.btn2, 0, 1, 2, false, new lib.Photo_but(), 3);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.btn2,p:{x:553.9,y:368.7}},{t:this.btn3,p:{x:214.3,y:286.9}},{t:this.btn1,p:{x:673,y:529.8}}]}).to({state:[{t:this.btn2,p:{x:582.1,y:460.9}},{t:this.btn3,p:{x:979.4,y:198.2}},{t:this.btn1,p:{x:1087.3,y:565.7}}]},1).wait(3));

    // Слой 5
    this.shape = new cjs.Shape();
    this.shape.graphics.f("rgba(7,7,7,0.408)").s().p("EhqtAxaMAAAhizMDVbAAAMAAABizg");
    this.shape.setTransform(683,401.6);
    this.shape._off = true;

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1).to({_off:false},0).wait(3));

    // BG
    this.text_2 = new cjs.Text("COPYRIGHT В© 2018  AITS , Montenegro, Budva, Lazi ", "16px 'Bernard MT Condensed'", "#FFFFFF");
    this.text_2.textAlign = "center";
    this.text_2.lineHeight = 18;
    this.text_2.setTransform(681,725.6);
    this.text_2.shadow = new cjs.Shadow("rgba(255,255,102,1)",0,0,1);

    this.text_3 = new cjs.Text("AITS BUDVA RENTALS", "96px 'Bernard MT Condensed'", "#FFFFFF");
    this.text_3.textAlign = "center";
    this.text_3.lineHeight = 98;
    this.text_3.setTransform(681,0);
    this.text_3.shadow = new cjs.Shadow("rgba(255,255,153,1)",0,0,21);

    this.instance_2 = new lib.img5();
    this.instance_2.setTransform(0,85.4,1.265,1.265);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]},1).wait(3));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(671,372,1398,765);

})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;

Я предполагал, что проблема может появиться со ссылками - и я сделал их прямыми, как 

<script src="http://aits.do.am/AITS.js"></script>

Для файла HTML сделаны прямые ссылки в файле JS на изображения. Но $ @ #% работать не будет.

Я получил эту ошибку - как будто остались старые кириллические имена ... и скрипт не может загрузить их 

%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B52.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B58.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B59.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B513.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55_1.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
easeljs.min.js:12 Uncaught TypeError: Cannot read property 'naturalWidth' of undefined
    at c.Fill.b.bitmap (easeljs.min.js:12)
    at a.b.beginBitmapFill (easeljs.min.js:12)
    at new lib.Photo_but (AITS.js:147)
    at new lib.AITS (AITS.js:271)
    at handleComplete (AITS.html:31)
    at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
    at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
    at LoadQueue.a.dispatchEvent (preloadjs.min.js:12)
    at LoadQueue.a._sendComplete (preloadjs.min.js:12)
    at LoadQueue.a._loadNext (preloadjs.min.js:13)

Пока я меняю блок загрузки изображений на 

lib.properties = {
    width: 1366,
    height: 768,
    fps: 24,
    color: "#15424D",
    manifest: [
        {src:"http://aits.do.am/images/img1.png", id:"img1"},
        {src:"http://aits.do.am/images/img2.png", id:"img2"},
        {src:"http://aits.do.am/images/img3.png", id:"img3"},
        {src:"http://aits.do.am/images/img4.png", id:"img4"},
        {src:"http://aits.do.am/images/img5.png", id:"img5"},
        {src:"http://aits.do.am/images/img6.png", id:"img6"}
    ]
};

Вторая большая натуральная ширина 'неопределенной проблемы

И еще кое-что может помочь - я сделал анимацию, используя встроенную функцию воспроизведения и остановки, и теперь получил ошибку при загрузке такой анимации: 

CANVAStry.js:98 Uncaught ReferenceError: fl_ClickToGoToAndStopAtFrame is not defined
    at lib.CANVAStry.frame_0 (CANVAStry.js:98)
    at a.b._runActions (tweenjs-0.5.1.min.js:17)
    at a.b.setPosition (tweenjs-0.5.1.min.js:17)
    at a.b.setPosition (tweenjs-0.5.1.min.js:17)
    at lib.CANVAStry.b._updateTimeline (movieclip-0.7.1.min.js:12)
    at lib.CANVAStry.b._tick (movieclip-0.7.1.min.js:12)
    at a.b._tick (easeljs-0.7.1.min.js:13)
    at a.b.update (easeljs-0.7.1.min.js:13)
    at init (CANVAStry.html:21)
    at onload (CANVAStry.html:29)

!!! Большое спасибо за любую помощь !!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...