使用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;