1

ダウンロード済みの画像をインライン JPEG/GIF などに変換する方法はありますか。Web ページで発生する画像 – クライアント側の JavaScript を使用して Base64 データに変換しますか?

他の手段 (サーバー側、オンライン ツールなど) を使用して画像を Base64 に変換する方法については話していません。

これらは、私の特定のユース ケースの制約です。

  • 画像は現在画面上、ページ内、人の前に表示されています。データ的にはダウンロード済みです。
  • 生の画像データからの変換は、クライアント側で行う必要があります。
  • 問題の画像は任意のドメインからのものです。つまり、同じオリジン ドメインである場合とそうでない場合があります。
  • ユーザーは、必要に応じて (解決に役立つ場合)、追加のアクセス許可を与えることができます (たとえば、クロスドメインやその他の問題を回避するのに役立つ FF ツールバーのインストール)。つまり、問題の解決に役立つ場合は、クライアント側でコードに特別な承認を与えることができます。

最終的な目標は、ページ上の (DOM 内の) すべての画像を JavaScript 内の Base64 データに変換することです。別の言い方をすれば、ユーザーがページで見ることができるすべての画像は、Base64 データを含む何らかの種類の JavaScript 変数に変換されています。

これまでのところ、上記のすべての制約内にとどまる投稿は見当たりません。

4

2 に答える 2

1

これはあなたが探しているものに近いと思いますが、唯一の問題は、ローカルでホストされている画像と HTML5 でのみ機能することです。

function toURL(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    var s = canvas.toDataURL();
    return s.substring(s.indexOf(","));
}

var test = document.getElementById("myImage");

console.log(toURL(test));

次のコードを使用して、JavaScript をだまして、画像がドメインからのものであると認識させることができます。

image.php

<?php
    $image = getAnImagePathAndTypeFromTheDatabaseByID($_GET["id"]); 
    //returns something like
    //array("path" => "http://www.anotherwebsite.com/image.png", "type" => "png")
    header("Content-type: image/$image[type]");
    echo file_get_contents($image["path"]);
?>

次に、たとえば image.php?id=1 に移動します。

于 2013-07-31T17:44:06.607 に答える