Question

我们一直在开发Asp.net MVC4应用程序，因为我们需要显示一张刮刮卡，其中背景图像/文本应该动态显示。我们在搜索时发现了一些样本，并尝试将这些样本应用于动态创建的图像或文本，我们正在获得简单的html页面。如果我们使用statis值运行，应用程序运行正常。在这里，我使用viewbag存储动态创建的图像网址，并尝试在.cshtml页面中使用该视图包

Dynamically getting the image url

enter image description here

Image with static url

enter image description here

任何人都可以向我提供任何解决方案，我该如何解决这个问题。

在.cshtml页面

中的代码下方

在下面的代码注释代码中，我已尝试过其他方式。

 @{
     ViewBag.Title = "ScratchCard";
  }
  <script src="~/Scripts/jquery-1.7.2.js"></script>
  <script src="~/Scripts/jquery-1.7.2.min.js"></script>

  @*<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>*@

  <script src="~/Scripts/jquery.jScratchcard.js"></script>

  @*<script src="~/Scripts/wScratchPad.js"></script>*@

<style>
.scratchpad
{
    width: 100px;
    height: 100px;
    border: solid 1px;
}

#wScratchPad
{
    display: inline-block;
    position: relative;
}
</style>
<fieldset>
@*<div id="ScratchPad" class="scratchpad"></div>*@

<div id="wScratchPad" style="display: inline-block; position: relative; border: solid black 1px;"></div>

<div>
    <a id="reset" href="javascript:reset_to_defaults();">reset to defaults</a> |

    <a id="reset" href="javascript:reset();">reset</a> |

    <a id="reset" href="javascript:reset_with_new_color();">reset with new color</a> |  

    <a href="javascript:get_color();">get color</a> |

    <a href="javascript:set_image_bg();">set image background</a> |

    <a href="javascript:set_image_overlay();">set overlay image</a>
</div>
<div>
    percent scratched: <span id="percent_scratched"></span>
</div>

<div id="content" style="display: none"></div>

<script type="text/javascript">
    $(function () {
        var pool = [10001, 20002, 30003, 40004, 50005];
        var getNumber = function () {
            if (pool.length == 0) {
                throw "No numbers left";
            }
            var index = Math.floor(pool.length * Math.random());
            var drawn = pool.splice(index, 1);
            return drawn[0];
        };

        var c = document.getElementById("arr");
        var b = getNumber();

        $("#wScratchPad").wScratchPad({
            image: './Images/ScartchCard_FG.jpg',
            text: b,
            scratchMove: function (e, percent) {
                if (percent > 70)
                    this.clear();
            },
        });
    })
</script>

@*<style type="text/css">
    #canvas, #overlay
    {
        border: 1px solid #222;
        cursor: pointer;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    var topImage = new Image();
    var bottomImage = new Image();
    var coinImage = new Image();
    bottomImage.src = '@ViewBag.FilePath'
    coinImage.src = "";

    function init() {
        var isMouseDown = false;
        var canvasWidth = $('#canvas').width();
        var canvasHeight = $('#canvas').height();
        $('body').append('<canvas id="overlay" width="' + canvasWidth + '" height="' + canvasHeight + '" />'); // Create the coin overlay canvas
        var overlayctx = $('canvas')[1].getContext('2d');
        overlayctx.drawImage(coinImage, 0, 0);


        function scratchOff(x, y) {
            mainctx.save();
            mainctx.beginPath();
            mainctx.arc(x, y, radius, 0, Math.PI * 2, false); // we don't fill or stroke the arc intentionally
            mainctx.clip();
            mainctx.drawImage(bottomImage, 0, 0);
            mainctx.restore();
        }

        $('#overlay').mousedown(function (e) {
            isMouseDown = true;
            var relX = e.pageX - this.offsetLeft;
            var relY = e.pageY - this.offsetTop;
            scratchOff(relX, relY, true);
        });
        $('#overlay').mousemove(function (e) {
            var relX = e.pageX - this.offsetLeft;
            var relY = e.pageY - this.offsetTop;
            overlayctx.clearRect(0, 0, canvasWidth, canvasHeight);
            overlayctx.drawImage(coinImage, relX - radius, relY - radius);
            if (isMouseDown) scratchOff(relX, relY, false);
        });
        $('#overlay').mouseup(function (e) {
            isMouseDown = false;
        });

        var mainctx = $('canvas')[0].getContext('2d');
        var radius = 15;
        topImage.onload = function () {
            mainctx.drawImage(topImage, 0, 0);
        };
        topImage.src = "top-300.jpg";
    }
</script>

    <canvas id="canvas" width="300" height="225"></canvas>*@


@*<script type="text/javascript">
    var sp = $("#wScratchPad").wScratchPad({
        image: './Images/8-18-2014_635439630600880975.jpg',
        scratchDown: function (e, percent) { $("#percent_scratched").html(percent) },
        scratchMove: function (e, percent) { $("#percent_scratched").html(percent) },
        scratchUp: function (e, percent) { $("#percent_scratched").html(percent) }
    });

    function reset_to_defaults() {
        sp.wScratchPad('image', null);
        sp.wScratchPad('image2', './Images/8-18-2014_635439630600880975.jpg');
        sp.wScratchPad('color', '#336699');
        sp.wScratchPad('overlay', 'none');
        sp.wScratchPad('text', 'none');
        sp.wScratchPad('reset');
    }
    function reset() {
        sp.wScratchPad('reset');
    }

    function reset_with_new_color() {
        sp.wScratchPad('color', '#FF0000');
        sp.wScratchPad('image2', null);
        sp.wScratchPad('reset');
    }

    function get_color() {
        alert(sp.wScratchPad('color'));
    }

    function set_image_bg() {
        //sp.wScratchPad('image', './Images/ScartchCard_FG.jpg');
        sp.wScratchPad('image', null);
    }

    function set_image_overlay() {
        sp.wScratchPad('image2', './Images/8-18-2014_635439630600880975.jpg');
        sp.wScratchPad('reset');
    }
</script>*@

@*<script type="text/javascript">
    //$(document).ready(function () {
    //    $("#ScratchPad").wScratchPad({
    //        cursor: '',
    //        image: '~/Images/orderedList9.png',
    //        text: '123',
    //        scratchMove: function (e, percent) {
    //            if (percent > 70)
    //                this.clear();
    //        },
    //    });
    //})

    $('#ScratchPad').wScratchPad({
        bg: './Images/8-18-2014_635439630600880975.jpg',
        fg: './Images/ScartchCard_FG.jpg',
        'cursor': '',
        scratchMove: function (e, percent) {
            //$('#demo1-percent').html(percent);
        }
    });

    ////$('#ScratchPad').wScratchPad({
    ////    cursor: '',
    ////    image: './Images/ScartchCard_FG.jpg',
    ////    text: '123',
    ////    scratchMove: function (e, percent) {
    ////        if (percent > 70)
    ////            this.clear();
    ////    },
    ////});
</script>*@

在Controller Page

中

    public ActionResult ScratchCard()
    {
        ViewBag.FilePath = "./Images/8-18-2014_635439630600880975.jpg";
        return View();
    }

Network tab

enter image description here

先谢谢，

如何在Scratch卡中显示动态图像

0 个答案: