Google chrome 画布无法在chrome中生成bmp图像数据URL_Google Chrome_Canvas_Html5 Canvas

Google chrome 画布无法在chrome中生成bmp图像数据URL

google-chrome canvas html5-canvas

Google chrome 画布无法在chrome中生成bmp图像数据URL,google-chrome,canvas,html5-canvas,Google Chrome,Canvas,Html5 Canvas,我有代码从视频中绘制图像。这是密码 <script type="text/javascript"> function capture() { var video = document.getElementById("videoId"); var canvas = capture(video, 1); var dataURL = canvas.toDataURL("image/bmp", 1.0); console.log("dataurl: "+

我有代码从视频中绘制图像。这是密码

<script type="text/javascript">

function capture() {

    var video  = document.getElementById("videoId");
    var canvas = capture(video, 1);
    var dataURL = canvas.toDataURL("image/bmp", 1.0);
    console.log("dataurl: "+dataURL);

}

</script>


<body>
 <input type="button" value="Capture" onClick="capture()"/>
 <video id="videoId" width="640" height="480"/>
</body>


函数捕获（）{
var video=document.getElementById（“videoId”）；
var canvas=捕获（视频，1）；
var dataURL=canvas.toDataURL（“image/bmp”，1.0）；
log（“dataurl:+dataurl”）；
}

在控制台上，dataurl显示为“数据：image/png；base64，…”

问题

为什么dataurl以png格式生成

注: 这在chrome浏览器[41.0.2272.89]中发生过。在firefox中，url以bmp格式生成。

支持并非所有浏览器都支持BMP。不需要支持（我的重点是）：

用户代理必须支持PNG（“图像/PNG”）。用户代理可以支持其他类型

任何无法识别的格式

第一个参数（如果提供）控制要创建的图像的类型返回（例如PNG或JPEG）。默认为image/png；那种类型是如果不支持给定类型，也可使用

要检查是否支持格式，请检查返回的数据uri的第一部分：

 var wantType = "image/bmp";
 var dataUri = canvas.toDataURL(wantType);
 if (dataUri.indexOf(wantType) < 0) {  // or use substr etc. data: + mime
      // Format NOT supported - provide workaround/inform user
      // See update below for workaround (or replacement)
 }

还可以选择将BMP图像获取为原始

ArrayBuffer

：

var bmpBuffer = CanvasToBMP.toArrayBuffer(canvas);

和

Blob

：

var bmpBlob = CanvasToBMP.toBlob(canvas);
var url = URL.createObjectURL(bmpBlob);             // example objectURL

blob

当然可以与

createObjectURL（）

一起使用，后者可以用作图像源和下载目标，并且往往比使用数据URI更快，因为它们不需要对Base-64进行编码/解码

它编写32位BMP文件，支持alpha（Firefox目前忽略BMP文件中的alpha通道）

无论如何，这里是-

演示和源代码

/*！画布到bmp版本1.0 ALPHA
（c） 2015年肯·菲尔斯滕贝格的《认识论》
MIT许可证（需要此标题）
*/
var CanvasToBMP={
/**
*将画布元素转换为包含BMP文件的ArrayBuffer
*支持32位（alpha）。
*
*请注意，必须满足CORS要求。
*
*@param{HTMLCanvasElement}canvas-要转换的canvas元素
*@return{ArrayBuffer}
*/
toArrayBuffer:函数（画布）{
var w=画布宽度，
h=画布高度，
w4=w*4，
idata=canvas.getContext（“2d”）.getImageData（0,0,w,h），
data32=新的uint32数组（idata.data.buffer），//画布的32位表示形式
步幅=数学地板（（32*w+31）/32）*4，//行长，包括填充
pixelArraySize=stride*h，//位图总大小
fileLength=122+pixelArraySize，//头大小已知+位图
file=newarraybuffer（fileLength），//原始字节缓冲区（返回）
视图=新数据视图（文件），//句柄endian、注册表宽度等。
位置=0，x，y=0，p，s=0，a，v；
//写入文件头
setU16（0x4d42）；//BM
setU32（fileLength）；//总长度
pos+=4；//跳过未使用的字段
setU32（0x7a）；//偏移到像素
//DIB头
setU32（108）；//头大小
setU32（w）；
setU32（-h>>>0）；//负=从上到下
setU16（1）；//1平面
setU16（32）；//32位（RGBA）
setU32（3）；//无压缩（BI_位字段，3）
setU32（像素阵列化）；//包含填充的位图大小（步幅x高度）
setU32（2835）；//像素/米h（~72 DPI x 39.3701英寸/米）
setU32（2835）；//像素/米v
pos+=8；//跳过颜色/重要颜色
setU32（0xff0000）；//红色通道掩码
setU32（0xff00）；//绿色通道掩码
setU32（0xff）；//蓝色通道掩码
setU32（0xff000000）；//alpha通道掩码
setU32（0x57696e20）；/“win”颜色空间
//位图数据，将ABGR的顺序更改为BGRA
while（y>>24；//阿尔法通道
view.setUint32（p+x，（v@KenFrystenberg.VERY nice（并且非常酷！），这是画布需要的一段时间了…谢谢！Alpha似乎是常见图像格式之间的巨大区别：.png和.jpg。我看到了一个jpg（提供rgb）与单独的alpha通道表示捆绑。再次感谢您在CanvasToBMP@KenFrystenberg.是的，这是一个赢家！我喜欢你用.toBlob添加的额外味道。这会派上用场的。再一次…干得好！
var bmpBlob = CanvasToBMP.toBlob(canvas);
var url = URL.createObjectURL(bmpBlob);             // example objectURL