javascript - 当我使用 ctx.drawImage() 在 Canvas 中放置另一个图像时，无法将 Canvas 另存为图像

Question

我正在尝试制作绘图应用程序，您可以在 Canvas 上绘制一些内容，并通过单击“保存”按钮将结果保存为服务器上的图像。您还可以放置另一张图像作为绘图的背景。问题是，当我使用 ctx.drawImage() 将图像放入 Canvas 时，我无法将 Canvas 保存为图像，因为什么也没有发生。一切正常，直到我使用 ctx.drawImage()。为什么我无法将 Canvas 另存为其中包含其他图像的图像？

我的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，如果你将跨域图像绘制到 Canvas 上，它会被禁用。如果您使用 F12 打开浏览器控制台，您将看到安全错误。

由于您的图片托管 (imgur.com) 已启用对图片的跨域访问，因此您可以通过将 img.crossOrigin='anonymous' 添加到您的图片来遵守跨域安全性img 对象。

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