JavascriptでJPEGをPNGにしたい

Question

javascriptでhttp://hogehoge.Jpgのuint8arrayをpngに変換する必要に迫られまして、下記コードを書きました。

                function loadImg(imgUrl) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', imgUrl, true);
                    xhr.responseType = "arraybuffer";
                    xhr.onload = function() {
                        var bytes = new Uint8Array(this.response);
                        console.log("uint8jpg:"+bytes);
                        var blob = new Blob([ bytes ], { type: "image/jpeg" });
                        console.log('blob:'+blob);
                        window.createImageBitmap(blob)
                        .then(function(image) {
                            var width = image.width;
                            var height = image.height;
                            console.log('ok'+image);
                            var canvas = document.createElement('canvas');
                            canvas.width  = width;
                            canvas.height = height;
                     
                            // Draw Image
                            var ctx = canvas.getContext('2d');
                            ctx.drawImage(image, 0, 0);
                            var pngdata=canvas.toDataURL("image/png");
                            console.log('w,h:'+width+','+height);
                            var BASE64_MARKER = ';base64,';
                            var base64Index = pngdata.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
                            var base64 = pngdata.substring(base64Index);
                            var raw = window.atob(base64);
                            var rawLength = raw.length;
                            var array = new Uint8Array(new ArrayBuffer(rawLength));
                            for(i = 0; i < rawLength; i++) {
                                array[i] = raw.charCodeAt(i);
                            }
                            hogehoge......
                        })

                    };
                    xhr.send();
                };

このコードなのですがfirefox,chromeでは動くがsaferiではだめだった。
理由を調べるとwindow.createImageBitmap(blob)でundefinedで落ちてた。
でさらに調べると
ImageBitmapがsafariではつかえないらしい。
https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap
ということは多分サファリでは他の関数で代用できるとおもわれますが
どうするのが正解か分かる人はいませんか？

Answer 1

Lhankor_Mhyさんのコメントで紹介されているpolyfillが実際にやっているとおりではあるのですが、一度<img>要素に画像を読み込めばcreateImageBitmapを使わずに済むと思います。

function loadImg(imgUrl) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', imgUrl, true);
  xhr.responseType = "arraybuffer";
  xhr.onload = function() {
    var bytes = new Uint8Array(this.response);
    console.log("uint8jpg:"+bytes);
    var blob = new Blob([ bytes ], { type: "image/jpeg" });
    console.log('blob:'+blob);

    var objUrl, img = new Image();          // 変更箇所
    img.onload = function(image) {  // 変更箇所

      var width = image.width;
      var height = image.height;
      console.log('ok'+image);
      var canvas = document.createElement('canvas');
      canvas.width  = width;
      canvas.height = height;

      // Draw Image
      var ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0);
      URL.revokeObjectURL(objUrl);  // 変更箇所; 使い終わったobjUrlを破棄

      // 中略

    });

    objUrl = URL.createObjectURL(blob);  // 変更箇所
    img.src = objUrl;

  };
  xhr.send();
};

createImageBitmapに比べると、オブジェクトURLを作ったり破棄したりする必要があるのがデメリットでしょうか。

Comments

[kokawa2003]

オブジェクトURLなるものを初めて知りました。MACな人が明日くるので来たら確認します

[kokawa2003]

今時なにって感じですが。上記コードは実は今確認したがだめだったのでなおした。
function loadImg2(imgUrl){
var xhr = new XMLHttpRequest();
xhr.open('GET', imgUrl, true);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
var bytes = new Uint8Array(this.response);
console.log("uint8jpg:"+bytes);
var blob = new Blob([ bytes ], { type: "image/jpeg" });
console.log('blob:'+blob);

var objUrl;
var img = new Image();
img.onload = function()
{ // 変更箇所
var image=img;

try{
var width = image.width;
var height = image.height;
console.log('ok'+image);
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;

// Draw Image
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
URL.revokeObjectURL(objUrl); // 変更箇所; 使い終わったobjUrlを破棄
var pngdata=canvas.toDataURL("image/png");
console.log('png'+pngdata);
console.log('w,h:'+width+','+height);
var BASE64_MARKER = ';base64,';
var base64Index = pngdata.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = pngdata.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
console.log("uint8png:"+array);
hogehoge
}catch(e){
hogehoge
}

};

objUrl = URL.createObjectURL(blob); // 変更箇所
img.src = objUrl;

};
xhr.send();
}

[othersight]

雑な対応になってしまい、失礼しました。とはいえ、解決したのであれば幸いです。

Answer 2

「createimagebitmap polyfill」でググったところ、こんな記事が。
createImageBitmap polyfill for Safari and Edge - DEV Community ????‍????????‍????