当我右键单击绘制到<canvas>标签中的图像时，唯一另存为的文件选项类型是.png。即使上载的文件是.jpeg，快捷菜单中显示的唯一选项Save Image As也是.png文件。图像数据是否<canvas>作为png文件绘制到标签中？
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>
<canvas id="cnvsForFormat" width="400" height="266"></canvas>
window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);
var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");
cnvs.style.border="1px solid #c3c3c3";
var img = new Image;
img.src = URL.createObjectURL(frmData);
img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;
var wdthHghtRatio = picHeight/picWidth;
console.log('picWidth: ' + Number(picWidth));
console.log('picHeight: ' + Number(picHeight));
console.log('wdthHghtRatio: ' + wdthHghtRatio);
if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};
document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: ' + picWidth + " h: " + picHeight);
console.log('width: 400 h: ' + newHeight);
//Must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
ctx.drawImage(img,0,0, 400, newHeight);
};
html5 canvas内容的本机格式是位图。
实际上，最好将其描述为像素图，但可以将其视为位图。
您无法右键单击另存为画布元素，但可以：
使用.toDataURL（）将画布位图作为png dataURL获取。
使用.toDataURL（'image / jpeg'）将画布位图获取为jpg dataURL。
使用context.getImageData获取/设置位图像素数据。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句