1

追いかけます...ローカル画像ファイルを取得したいのですが、javascriptを使用してその画像からdataurl値を作成します。どうすればいいのかよくわかりません。私はたくさんのコード例を見てきましたが、それらがキャンバスのもので何をしているのか正確にはわかりません。また、このためにローカルファイルにアクセスすることもできますか？私はそれを賭けても構わないと思っています。それはセキュリティ上のリスクであり、javascriptはサンドボックスを超えて連絡を取ることができません。

基本的に、REALの言い換えJSでは、これが私が探していることです...

var imgTest = "/tmp/prev/localimage.jpeg";
var imgTest = imgTest.toDataUrl;
document.write(imgTest);

最終結果は、ウェブページに印刷されたdataurl文字列「data：image / jpeg; base64、/ 9j/4AAQSkZJRgABAQE...」になることを願っています。

これは意味がありますか？そのdataurl情報を変数に入れたいだけです。

素晴らしいアドバイスをありがとうStackOverflow！

4

4 に答える 4

2

MDNには、必要なものを正確に示す、非常に簡潔で単純な例があります。

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

やってみよう。

于 2013-01-14T15:43:36.130 に答える
2

「このtoDataURL()方法では、キャンバスに描画されたすべての画像が、それを実行するコードと同じドメインを持つWebサーバーでホストされている必要があります。この条件が満たされない場合、SECURITY_ERR例外がスローされます。」ソース

私には、これはローカルファイルでは機能しないように思われ、HTML5キャンバスに描画されたコンテンツからエンコードされた画像データを生成するために使用されます。

Mozillaのドキュメントを見るとtoDataURL()、これは画像オブジェクトではなく、キャンバスオブジェクト専用の関数であることがわかります。

私が正しく理解していれば、同じサイズのキャンバスに画像を描画してから、toDataURL（）メソッドを使用してエンコードされたデータを生成できる可能性があります。もちろん、これは、画像ファイルがJavaScriptコードと同じ場所にあることを前提としています。

于 2013-01-14T15:25:28.463 に答える
2

画像オブジェクトを作成し、それをキャンバスに描画してから、キャンバスでtoDataURL（）を呼び出すことができます。そのようです：

function draw() {
  var dataURL;
  var that = this;
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
    context.drawImage(img,0,0);
    dataURL = canvas.toDataURL();
    // can call some other function once the image is loaded and you have the dataURL, e.g.
    that.onDataURL(dataURL);
  };
  img.src = '/files/4531/backdrop.png';
}

function onDataURL(dataURL) {
  console.log(dataURL);
}
于 2013-01-16T08:09:15.943 に答える
1

使用する画像を選択できるinput[type=file]をユーザーに提供できます。

その後、FileReaderを介して画像データにアクセスできます。

これはかなり良いチュートリアルです：http ：//www.html5rocks.com/en/tutorials/file/dndfiles/

FileReader APIは、Base64文字列を取得するreadAsDataURLメソッドも提供します。

于 2013-01-14T15:30:46.213 に答える