使用ctx.drawImage（）將畫布另存為圖像時，我無法將畫布另存為圖像

Question

我試圖使繪圖應用程序，您可以在畫布上繪制一些東西，然后通過單擊“保存”按鈕將結果另存為服務器上的圖像。 您還可以將其他圖像作為圖形的背景。 問題是，當我使用ctx.drawImage（）將圖像放到畫布上時，由於什么也沒有發生，所以我無法將畫布另存為圖像。 一切正常，直到我使用ctx.drawImage（）為止。 為什么我不能將畫布另存為圖像？

我的ajax代碼：

// it works until I use ctx.drawImage()
$.ajax({
           type: "POST",
           url: "save.php",
           data: {image: dataURL},
           success: function()
            {
                alert('saved');
            }
        });

用於將另一個圖像作為背景的代碼：

//var ctx = can.getContext('2d');
var img = new Image;
ctx.drawImage (img, 0, 0);

我的PHP代碼：

<?php
$dataURL = $_POST["image"];  
$parts = explode(',', $dataURL);  
$data = $parts[1];  
$data = base64_decode($data);  
$fp = fopen('test.png', 'w');  
fwrite($fp, $data);  
fclose($fp); 
?>

這是整個javascript代碼

    $(document).ready (function()
    {

    var color = $("#color").val();


    $("#size").val("10");
    var mouse = 0;

    var can = document.getElementById("canny");
    var ctx = can.getContext('2d');

    var offsetX = 158;
    var offsetY = 200;

    var img = new Image;
    var url = "http://i.imgur.com/fmAoxZ0.jpg";
    img.src = url;



    function setBackground()
    {

        ctx.drawImage (img, 0, 0);
    }   






    function setOpacity(newValue)
    {
        $("#canny").css ("opacity", newValue * 0.01);
        $("#txt-opacity").html(newValue + "%");
    }


    $("body").mousedown(function(event)
    {

            color = $("#color").val();
            var cordX = event.clientX - offsetX;
            var cordY = event.clientY - offsetY;
            var size = $("#size").val();


            ctx.beginPath();
            ctx.arc(cordX,cordY,size,0,2*Math.PI);
            ctx.fillStyle = color;
            ctx.fill();


        document.getElementById("coords").innerHTML = "x: " + cordX + "     y: " + cordY;

        mouse = 1;

        $("body").mousemove(function(event)
        {
            if (mouse == 1)
            {

                var cordX = event.clientX - offsetX;
                var cordY = event.clientY - offsetY;
                var size = $("#size").val();


                ctx.beginPath();
                ctx.arc(cordX,cordY,size,0,2*Math.PI);
                ctx.fillStyle = color;
                ctx.fill();

                $("body").mouseup(function()
                {

                    mouse = 0;

                });


            }
        });

    mouse = 1;

    });


    $("#opacity").change (function()
    {
        setOpacity(this.value);
    });


    $("#opacity").trigger("change");





    $("#red").click (function()
    {
        $("#color").val("#FF3636");
        $(this).css ("border-color", "darkorange");
        $("#blue").css ("border-color", "black");
        $("#lime").css ("border-color", "black");
        $("#yellow").css ("border-color", "black");
    });


    $("#blue").click (function()
    {
        $("#color").val("#0080FF");
        $(this).css ("border-color", "darkorange");
        $("#red").css ("border-color", "black");
        $("#lime").css ("border-color", "black");
        $("#yellow").css ("border-color", "black");
    });


    $("#lime").click (function()
    {
        $("#color").val("#8CFF00");
        $(this).css ("border-color", "darkorange");
        $("#red").css ("border-color", "black");
        $("#blue").css ("border-color", "black");
        $("#yellow").css ("border-color", "black");
    });


    $("#yellow").click (function()
    {
        $("#color").val("#FFF01F");
        $(this).css ("border-color", "darkorange");
        $("#red").css ("border-color", "black");
        $("#blue").css ("border-color", "black");
        $("#lime").css ("border-color", "black");
    });





    $("#btn-clear").click(function()
    {


        if (confirm ("Are you sure to clear your image?"))
        {
            ctx.clearRect(0, 0, can.width, can.height);
        }

    });



    $("#btn-save").click (function()
    {
        var dataURL = can.toDataURL();


            $.ajax({
               type: "POST",
               url: "save.php",
               data: {image: dataURL},
               success: function()
                {
                    alert('saved');
                }
            });









    });


    $("#fill").click (function()
    {
        $("#canny").css ("background-color", color);

    });


    $('input[type=radio][name=bgselect]').change (function ()
    {
        if (this.value == "image")
        {
            setBackground();

            $("#url").css ("visibility", "visible");
            img.src = url;
        } else
        {
            $('#canny').css('background-image', 'none');
            $("#url").css ("visibility", "hidden");

        }
    });

    $("#url").change(function()
    {
        url = $(this).val();
        setBackground();

    });









});

Answer 1

您的問題出在canvas.toDataURL上，如果您將跨域圖像繪制到畫布上，則會被禁用。 如果使用F12打開瀏覽器控制台，則會看到安全錯誤。

由於您是圖像托管者（imgur.com）已啟用對圖像的跨域訪問，因此可以通過在img對象中添加img.crossOrigin='anonymous'來遵守跨域安全性。

var img = new Image;
img.crossOrigin='anonymous';
var url = "http://i.imgur.com/fmAoxZ0.jpg";
img.src = url;