Question

我正在尝试复制我的画布，但它让我 drawCanvas为null 错误。每当我按下按钮，它就会给我一个错误。有没有其他方法可以复制我的画布？

HTML

<Html>
<Head>
<Title>Java Example</Title>

        <script type="text/javascript">
{

if (!window.Clipboard) {
   var pasteCatcher = document.createElement("apDiv1");
   pasteCatcher.setAttribute("contenteditable", "");
   pasteCatcher.style.opacity = 0;
   //document.body.appendChild(pasteCatcher);
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 

//window.addEventListener("paste", onPasteHandler);

function onPasteHandler(e)
{
    if(e.clipboardData) {
        var items = e.clipboardData.items;
        if(!items){
            alert("Image Not found");
        }
        for (var i = 0; i < items.length; ++i) {
        if (items[i].kind === 'file' && items[i].type === 'image/png') {
            var blob = items[i].getAsFile(),
                source = window.webkitURL.createObjectURL(blob);

            pastedImage = new Image();
            pastedImage.src = source;

            pasteData();
            }
        }
    }
}

function pasteData()
{
    drawCanvas = document.getElementById('drawCanvas1');
    ctx = drawCanvas.getContext( '2d' );
    ctx.clearRect(0, 0, 640,480);
    ctx.drawImage(pastedImage, 0, 0);
}

function pasteData2()
{
    drawCanvas = document.getElementById('drawCanvas1');
    ctx = drawCanvas.getContext( '2d' );
    ctx.clearRect(0, 0, 640,480);
    ctx.drawImage(pastedImage, 0, 0);
    image2 = convertCanvasToImage(drawCanvas);
    document.getElementById("canvasHolder").appendChild(image2);
}

 // Converts image to canvas; returns new canvas element
            function convertImageToCanvas(image) {
            var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.getContext("2d").drawImage(image, 0, 0);                
                return canvas;
            }

            // Converts canvas to an image
            function convertCanvasToImage(canvas) {
                var image = new Image();
                image.src = canvas.toDataURL("image/png");
                return image;
            }
}

        </script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:258px;
    height:165px;
    z-index:1;
    left: 71px;
    top: 59px;
}
</style>
</Head>

<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
<!--div id='div' contenteditable='true'>Paste</div-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button type="button" value="click me" onclick="return pasteData2();" />
<h2>Canvas Image</h2>
    <p id="canvasHolder">

    </p>
</Body>
</Html>

错误 enter image description here

Answer 1

首先，您必须注册图像onload事件以确保图像已加载：

     // inside onPastHandler ...

        pastedImage = new Image();
        pastedImage.onload = pasteData.bind(null,pastedImage);
        pastedImage.src = source;

然后你提到一个不存在的画布，'drawCanvas1'，你没有甚至需要：

function pasteData(img) {
      document.getElementById("canvasHolder").appendChild(img);
 }

Html DrawCanvas为null

1 个答案: