キャンバスにインラインイメージを描くことはできますか？

I持ってキャンバスの背景として画像を描画し、次のコード：キャンバスにインラインイメージを描くことはできますか？

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var destX = 69; 
    var destY = 50; 
    var imageObj = new Image(); 

    imageObj.onload = function(){ 
     context.drawImage(imageObj, destX, destY); 
    }; 
    imageObj.src = "myImage.jpg"; 
};

何今の代わりに外部ファイルを、私は背景として、インライン画像を使用したい場合は？たとえば、

<img src="data:image/jpeg;base64,4uPk5ebn6Wql94XOr2gntJRE..." />

どうすればキャンバスの背景にすることができますか？

編集：これを述べたチュートリアル（https://developer.mozilla.org/ja/Canvas_tutorial/Using_images）が見つかりましたが、使用方法は記載されていません。

出典

2012-03-15 ohseekay

イメージを 'canvas'に書きたい場合は、drawImage api（既に行っている）を使用する必要があります。

しかし、イメージをタグに入れたい場合は、 'イメージファイル'を 'base64' URIに変換する必要があります。通常、サーバーサイドプログラミング（PHP、Python）check hereによって行われます。

出典

2012-03-15 09:19:25

imageObj.srcを外部ファイル（myImage.jpg）にするのではなく、データURL（data：image ...）にします。私はimageObj.srcを試しました= data：image/jpeg ... "しかし動作しませんでした – ohseekay

これはうまくいかなければなりません。（あなたのコードで試した） –

<!DOCTYPE html> 
 
<html> 
 
<body onload="do_onload()"> 
 

 
<h1>Hello World!</h1> 
 
<p> 
 
<canvas width="640" height="400" id="myCanvas"> 
 
Canvas not supported! 
 
</canvas> 
 
</p> 
 
<script> 
 
function do_onload(){ 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var context = canvas.getContext("2d"); 
 
    var destX = 69; 
 
    var destY = 50; 
 
    var imageObj = new Image(); 
 
    imageObj.src = "data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QNSRXhpZgAATU0AKgAAAAgABVEAAAQAAAABAAAAAFEBAAMAAAABAAEAAFECAAEAAAMAAAAASlEDAAEAAAABAAAAAFEEAAEAAAAB/AAAAAAAAAAAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8A1QAA1TMA1WYA1ZkA1cwA1f8A/wAA/zMA/2YA/5kA/8wA//8zAAAzADMzAGYzAJkzAMwzAP8zKwAzKzMzK2YzK5kzK8wzK/8zVQAzVTMzVWYzVZkzVcwzVf8zgAAzgDMzgGYzgJkzgMwzgP8zqgAzqjMzqmYzqpkzqswzqv8z1QAz1TMz1WYz1Zkz1cwz1f8z/wAz/zMz/2Yz/5kz/8wz//9mAABmADNmAGZmAJlmAMxmAP9mKwBmKzNmK2ZmK5lmK8xmK/9mVQBmVTNmVWZmVZlmVcxmVf9mgABmgDNmgGZmgJlmgMxmgP9mqgBmqjNmqmZmqplmqsxmqv9m1QBm1TNm1WZm1Zlm1cxm1f9m/wBm/zNm/2Zm/5lm/8xm//+ZAACZADOZAGaZAJmZAMyZAP+ZKwCZKzOZK2aZK5mZK8yZK/+ZVQCZVTOZVWaZVZmZVcyZVf+ZgACZgDOZgGaZgJmZgMyZgP+ZqgCZqjOZqmaZqpmZqsyZqv+Z1QCZ1TOZ1WaZ1ZmZ1cyZ1f+Z/wCZ/zOZ/2aZ/5mZ/8yZ///MAADMADPMAGbMAJnMAMzMAP/MKwDMKzPMK2bMK5nMK8zMK//MVQDMVTPMVWbMVZnMVczMVf/MgADMgDPMgGbMgJnMgMzMgP/MqgDMqjPMqmbMqpnMqszMqv/M1QDM1TPM1WbM1ZnM1czM1f/M/wDM/zPM/2bM/5nM/8zM////AAD/ADP/AGb/AJn/AMz/AP//KwD/KzP/K2b/K5n/K8z/K///VQD/VTP/VWb/VZn/Vcz/Vf//gAD/gDP/gGb/gJn/gMz/gP//qgD/qjP/qmb/qpn/qsz/qv//1QD/1TP/1Wb/1Zn/1cz/1f///wD//zP//2b//5n//8z///8AAAAAAAAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAADAAMDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9DKKKKAP/2Q=="; 
 
    imageObj.onload = function(){ 
 
     context.drawImage(imageObj, destX, destY); 
 
    }; 
 
}; 
 

 
</script> 
 
</body> 
 
</html>

これは、完全な実施例です。

出典

2015-07-22 12:37:31 user2757572

キャンバスにインラインイメージを描くことはできますか？

答えて

関連する問題