canvas + drawImage，toDataURL返回空白图像

Question

当我将图像添加到画布（drawImage）时使用其他画布方法绘制图形时的流派问题我没有任何问题。

var ready; 
ready = function() { 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var imageObj = new Image(); 

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

imageObj.onload = function() { 
    context.drawImage(imageObj, 69, 50); 
}; 

var pngUrl = canvas.toDataURL(); 
console.log(pngUrl); 
$('#client_avatar').val(pngUrl); 

};

Answer 1

$(document).ready(function() { 
 
    var canvas = document.getElementById('canvas'); 
 
    var context = canvas.getContext('2d'); 
 
    var imageObj = new Image(); 
 

 
    imageObj.onload = function() { 
 
     context.drawImage(imageObj, 0, 0, 200, 200); 
 
     var pngUrl = canvas.toDataURL(); 
 
     console.log(pngUrl); 
 
     $('#client_avatar').attr('src', pngUrl); 
 
    }; 
 

 
    imageObj.crossOrigin = 'anonymous'; //not necessary, if image hosted on same server 
 
    imageObj.src = 'https://i.imgur.com/Q6aZlme.jpg'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" width="200" height="200"></canvas> 
 
<img id="client_avatar">

^{道歉不作任何解释}

ʜᴀᴠᴇꜰᴜɴ:)

Answer 2

在设置源代码之前，您必须定义onload，否则将无法调用onload。

$(document).ready(function() { 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 


    imageObj.onload = function() { 
     context.drawImage(imageObj, 69, 50); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 


    var pngUrl = canvas.toDataURL(); 
    console.log(pngUrl); 
// $('#client_avatar').val(pngUrl); 
$("#client_avatar").append("<img src='"+ pngUrl +"'>") 

    }); 

这里工作jsbin link

Answer 3

当我将两个或多个图像添加到画布（drawImage）时，流派的问题，我没有问题。当我调用.toDataURL（）它存储/保存黑色图像。

<canvas id="myCanvas" width="200" height="200"></canvas> 
<button onclick="javascript:drawShapes();return false;">Draw Picture</button> 
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" /> 

function loadImages(sources, callback) { 
     var images = {}; 
     var loadedImages = 0; 
     var numImages = 0; 
     // get num of sources 
     for (var src in sources) { 
      numImages++; 
     } 
     for (var src in sources) { 
      images[src] = new Image(); 
      images[src].onload = function() { 
       if (++loadedImages >= numImages) { 
        callback(images); 
       } 
      }; 
      images[src].src = sources[src]; 
     } 
    } 

    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    function drawShapes() { 
     var sources = { 
      darthVader: 'http://freevectorsite.com/wp-content/uploads/2013/09/Creative-stock-vector-background.jpg', 
      yoda: 'https://upload.wikimedia.org/wikipedia/commons/e/e9/Imgur_logo.svg' 
     }; 

     loadImages(sources, function (images) { 
      context.drawImage(images.darthVader, 0, 0); 
      context.drawImage(images.yoda, 50, 50, 100, 104); 
     }); 

     // var dataURL = canvas.toDataURL("image/png"); 
    } 

<script type="text/javascript"> 
$(function() { 
    $("#btnSave").click(function() { 
     var Pic = canvas.toDataURL("image/png"); 
     $.ajax({ 
      type: 'POST', 
      url: '111.aspx/UploadImage', 
      data: '{ "imageData" : "' + Pic + '" }', 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (msg) { 
       alert('Image saved successfully !'); 
      } 
     }); 
    }); 
}); 

[WebMethod()] 
public static void UploadImage(string imageData) 
{ 
    string path = @"D:\"; 
    string fileNameWitPath = path + "myimage.png"; 
    using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create)) 
    { 
     using (BinaryWriter bw = new BinaryWriter(fs)) 
     { 
      byte[] data = Convert.FromBase64String(imageData); 
      bw.Write(data); 
      bw.Close(); 
     } 
    } 
} 

我怎么该图像上传到服务器？