Question

我正在尝试从dataurl在画布上绘制图像，但画布上没有任何内容。出于测试目的，我有两个画布。我在第一个画布上使用url绘制图像（正确加载），然后将其转换为dataurl并在第二个画布中绘制dataurl，但无法绘制。

以下是我的代码：

测试HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="bootstrap.min.css" rel="stylesheet">
    <title>Something</title>
</head>

<body>
    <div class="col-md-8" id="middle panel">
        <div class="container-fluid">
            <div class="row">
                <canvas class="embed-responsive-item" id="docCanvas" height="800" width="1200"></canvas>
            </div>
            <!-- Middle Panel-Container-Row (Editor) -->
            <div class="row">
                <canvas class="embed-responsive-item" id="docCanvasNew" height="1000" width="1500"></canvas>
            </div>
            <!-- Middle Panel-Container-Row (Editor) -->
        </div>
        <!-- Middle Panel-Container -->
    </div>
    <div class="col-md-4" id="signWidget">
        <p>Boot</p>
    </div>
    <br>
    <!-- <canvas id="docCanvas" height="800" width="1200"></canvas> -->
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    <script src="easeljs-NEXT.combined.js"></script>
    <script src="bootstrap.min.js" type="text/javascript"></script>
    <!-- <script src="signing.js"></script> -->
    <script src="ease.js"></script>
</body>

测试js

var canvas, stage;
var canvas_new, stage_new;
var offset;
var update = true;
var uri;
var uri_new;
$(function() {
    function init() {
        // create stage and point it to the canvas:
        canvas = document.getElementById("docCanvas");
        stage = new createjs.Stage(canvas);
        canvas_new = document.getElementById("docCanvasNew");
        stage_new = new createjs.Stage(canvas_new);
        // enable touch interactions if supported on the current device:
        createjs.Touch.enable(stage);
        // enabled mouse over / out events
        stage.enableMouseOver(10);
        stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
        // load document image
        var docImage = new Image();
        docImage.src = "new_editor_filled.png";
        docImage.onload = handleDocImageLoad;
    }
    init();

    function stop() {
        createjs.Ticker.removeEventListener("tick", tick);
    }

    function handleDocImageLoad(event) {
        var image = event.target;
        var bitmap;
        var container = new createjs.Container();
        stage.addChild(container);
        bitmap = new createjs.Bitmap(image);
        container.addChild(bitmap);
        bitmap.x = 0 | 0;
        bitmap.y = 0 | 0;
        createjs.Ticker.addEventListener("tick", tick);
        uri = canvas.toDataURL();
        //uri_new = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');
        var docImageNew = new Image();
        docImageNew.onload = handleDocImageLoadNew;
        docImageNew.src = uri;
    }

    function handleDocImageLoadNew(event) {
        var image = event.target;
        var bitmap;
        var container = new createjs.Container();
        stage_new.addChild(container);
        bitmap = new createjs.Bitmap(image);
        container.addChild(bitmap);
        bitmap.x = 100 | 0;
        bitmap.y = 100 | 0;
        stage_new.update();
        //update = true;
        //createjs.Ticker.addEventListener("tick", tick);
    }

    function tick(event) {
        // this set makes it so the stage only re-renders when an event handler indicates a change has happened.
        if (update) {
            update = false; // only update once
            stage.update(event);
        }
    }
});

无法从图像dataurl（Easeljs）在画布上绘制图像

0 个答案: