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(); 
     } 
    } 
} 

我怎麼該圖像上傳到服務器？