HTMLキャンバスからbase64データを取得するには、canvas.toDataURL();を実行する必要があります。この問題は、base64を与えるときに一般的な300 x 150のキャンバスサイズにスケーリングされますが、実際のキャンバスは600 x 100になります。画像を600 x 100にする方法はありますか？そのようにbase64でエクスポートするには？前もって感謝します！HTMLキャンバス要素は、キャンバスの同じ縮尺でBase64データを取得します
CSSで定義された幅と高さがHTMLではないため、ドキュメントの幅と高さが登録されていませんでした。
<body>
<script>
var granmoe = 0;
var hai = 5;
var runnin = 0;
while(runnin != hai){
\t var can = document.createElement("canvas");
\t can.id = "canvasite"
\t can.style = "width: 150px; height: 100px; display:none;"
\t document.body.appendChild(can);
\t c = document.getElementById('canvasite'),
ctx = c.getContext('2d');
var x = 0
if(runnin == 0){
\t \t var endheight = c.height/2
\t }
var y = endheight;
\t var widd = 0
\t while(widd != c.width){
\t ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
\t \t ctx.fillRect(x, y, 1, 1);
\t \t var ychan = Math.floor((Math.random() * 6) + 1);
\t \t if(ychan == 1){
\t \t \t var y=y+2
\t \t }else if(ychan == 2){
\t \t \t var y=y+1
\t \t }else if(ychan == 3){
\t \t \t var y=y-1
\t \t }else if(ychan == 4){
\t \t \t var y=y-2
\t \t }else{
\t \t \t var y=y
\t \t }
\t \t var hig = y
\t \t while(hig != c.height){
\t \t ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
\t \t \t ctx.fillRect(x, hig, 1, 1);
\t \t \t var hig = hig+1
\t \t }
\t \t var widd = widd+1
\t \t var x=x+1
\t }
{
\t var endheight = y
\t var runnin = runnin+1
\t document.getElementById('canvasite').setAttribute('id','nAn')
\t var imgm = document.createElement("img");
\t imgm.src = c.toDataURL();
imgm.id = "imageitem"
imgm.style = "display:none;"
\t document.body.appendChild(imgm)
\t var xid = granmoe*(300*(1/hai));
\t if(granmoe == 0){
\t \t var cansfoo = document.createElement("canvas")
\t \t cansfoo.id = "fullimage";
\t \t cansfoo.style = 'width: '+(hai*150)+'px; height: 100px; display:none;'
\t \t document.body.appendChild(cansfoo);
\t }
\t var ci=document.getElementById("fullimage");
\t var ctxi=ci.getContext("2d");
\t var imd=document.getElementById("imageitem");
\t ctxi.drawImage(imd,xid,0,(300*(1/hai)),180);
\t //end
\t var granmoe=granmoe+1
\t document.getElementById("imageitem").setAttribute('id','non');
}
}
var base64 = ci.toDataURL();
var bass = document.createElement("img");
bass.src = base64
bass.id = "resiz"
bass.style = "display:none;"
document.body.appendChild(bass);
{
\t \t var resize = document.createElement("canvas")
\t \t resize.id = "resize";
resize.width = (hai*150);
resize.height = 100;
\t \t resize.style = 'display:none;'
\t \t document.body.appendChild(resize);
\t var re=document.getElementById("resize");
\t var res=re.getContext("2d");
\t var imag=document.getElementById("resiz");
\t res.drawImage(imag,0,50,(hai*150),50);
document.write(resize.toDataURL());
}
</script>
</body>
'toDataURL'のサイズとは関係ありません。ここで は、以下の更新されたコードです。あなたのキャンバスに相当する文字列を与えるだけです。 '300x150'はコンストラクタでサイズを指定しない場合です。サイズを指定すると、指定されたサイズの画像が生成されます –
何か問題があればコードを投稿します –
@Gaurav Chaudhary私はCSSでそれを試しました幅：600ピクセル。それは動作しませんでした – Athdot