HTML - 画布元素以相同的画布比例获取 Base64 数据答案

【问题标题】：HTML - Canvas element get Base64 data at same scale of canvasHTML - 画布元素以相同的画布比例获取 Base64 数据
【发布时间】：2023-03-27 01:49:01
【问题描述】：

我发现要从 HTML 画布中获取 base64 数据，您必须执行 canvas.toDataURL();。问题在于，当它为您提供 base64 时，它会缩放到通用的 300 x 150 画布大小，但实际画布是 600 x 100。有没有办法将图像拉伸为 600 x 100，或者像这样在base64中导出它？提前致谢！

【问题讨论】：

toDataURL 与大小无关。它只是提供与您的画布等效的字符串。 300x150 是当你在构造函数中没有给出尺寸时，如果你提供了尺寸，它会生成提供的尺寸的图像
如果您的代码有问题，请发布您的代码
@Gaurav Chaudhary 我在css宽度中尝试过：600px；它没有工作
你是怎么知道的，它是缩放的？您是否将其保存为JPG 图像。如果您提供代码，那么我会尽力提供帮助！
我将它保存为 png，我会上传它！

标签： javascript html canvas html5-canvas

【解决方案1】：

我在 CSS 而不是 HTML 中定义了宽度和高度，因此文档没有注册宽度和高度。以下是更新后的代码：

<body>
<script>
var granmoe = 0;
var hai = 5;
var runnin = 0;
while(runnin != hai){
	var can = document.createElement("canvas");
	can.id = "canvasite"
	can.style = "width: 150px; height: 100px; display:none;"
	document.body.appendChild(can);
	c = document.getElementById('canvasite'),
    ctx = c.getContext('2d');
    var x = 0
    if(runnin == 0){
		var endheight = c.height/2
	}
    var y = endheight;
	var widd = 0
	while(widd != c.width){
    	ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
		ctx.fillRect( x, y, 1, 1 );
		var ychan = Math.floor((Math.random() * 6) + 1);
		if(ychan == 1){
			var y=y+2
		}else if(ychan == 2){
			var y=y+1
		}else if(ychan == 3){
			var y=y-1
		}else if(ychan == 4){
			var y=y-2
		}else{
			var y=y
		}
		var hig = y
		while(hig != c.height){
    		ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
			ctx.fillRect( x, hig, 1, 1 );
			var hig = hig+1
		}
		var widd = widd+1
		var x=x+1
	}
    {
	var endheight = y
	var runnin = runnin+1
	document.getElementById('canvasite').setAttribute('id','nAn')
	var imgm = document.createElement("img");
	imgm.src = c.toDataURL();
    imgm.id = "imageitem"
    imgm.style = "display:none;"
	document.body.appendChild(imgm)
	var xid = granmoe*(300*(1/hai));
	if(granmoe == 0){
		var cansfoo = document.createElement("canvas")
		cansfoo.id = "fullimage";
		cansfoo.style = 'width: '+(hai*150)+'px; height: 100px; display:none;'
		document.body.appendChild(cansfoo);
	}
	var ci=document.getElementById("fullimage");
	var ctxi=ci.getContext("2d");
	var imd=document.getElementById("imageitem");
	ctxi.drawImage(imd,xid,0,(300*(1/hai)),180);
	//end
	var granmoe=granmoe+1
	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);
{
		var resize = document.createElement("canvas")
		resize.id = "resize";
        resize.width = (hai*150);
        resize.height = 100;
		resize.style = 'display:none;'
		document.body.appendChild(resize);
	var re=document.getElementById("resize");
	var res=re.getContext("2d");
    	var imag=document.getElementById("resiz");
	res.drawImage(imag,0,50,(hai*150),50);
    document.write(resize.toDataURL());
    }
</script>
</body>

【讨论】：