使用ctx.drawImage（）将画布另存为图像时，我无法将画布另存为图像

Question

Im trying to make drawing app where you can draw something on canvas and save your result as an image on the server by clicking "save" button. You can also put another image as background for your drawing. The problem is that when I put an image to the canvas using ctx.drawImage() I can't save the canvas as an image because nothing happens. Everything works ok until I use ctx.drawImage(). Why I can't save canvas as an image with another image in it?

My ajax code:

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

Code for putting another image as background:

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

My PHP code:

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

This is the entire javascript code

    $(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

Your problem is be with canvas.toDataURL which is disabled if you draw cross-domain images to your canvas. If you open your browser console using F12 you will see the security error.

Since you're image host (imgur.com) has enabled cross-domain access to your image, you can comply with cross-domain security by adding img.crossOrigin='anonymous' to your img object.

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