0

ユーザーの名前、年齢、電子メール、および彼がアップロードした画像を保存するオブジェクトを作成しました。彼がアップロードした画像を div(たとえば) に表示したいのですが、この方法がわかりません。私はこれを試しました：

$(function () {
    $('img').load(function () {
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
        // Copy the image contents to the canvas
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);
        localStorage[this.id] = canvas.toDataURL("image/png");
    })
})

しかし、javascriptまたはjqueryを使用してこの画像を表示するにはどうすればよいですか? （プラグインなし）ページに表示されるオブジェクトが5つあります。どんな解決策も役に立ちます。ありがとう

4

2 に答える 2

0

これを試してみてください、うまくいきます 

 <input type="file" id="image-input" />
        <img id="image-container" />
        <script type="text/javascript">
        (function(){
              /** @type {Node} */
          var imgInput = document.getElementById( "image-input" ),
              /** @type {Node} */
              imgContainer = document.getElementById( "image-container" ),
              /** Restore image src from local storage */
              updateUi = function() {
                imgContainer.src = window.localStorage.getItem( "image-base64" );
              },
              /** Register event listeners */
              bindUi = function(){
                imgInput.addEventListener( "change", function(){
                  if ( this.files.length ) {
                    var reader = new FileReader();
                    reader.onload = function( e ){
                      window.localStorage.setItem( "image-base64", e.target.result );
                      updateUi();
                    };
                    reader.readAsDataURL( this.files[ 0 ] );
                  }
                }, false );
              };

        updateUi();
        bindUi();
        }());
于 2014-07-10T08:10:32.080 に答える
0

これを試して

    var imgCanvas = document.createElement("canvas"),
    imgContext = imgCanvas.getContext("2d");

    // Make sure canvas is as big as the picture
    imgCanvas.width = this.width;
    imgCanvas.height = this.height;

    // Draw image into canvas element
    imgContext.drawImage(image, 0, 0, imgCanvas.width,imgCanvas.height);
    // Save image as a data URL
    imgInfom = imgCanvas.toDataURL("image/png");
    localStorage.setItem("imgInfo",imgInfom);


    document.body.style.background = 'url('+imgInfom+')';

ここでは、ボディの背景画像として画像を表示しています。他のオプションも使用できます。

于 2014-10-24T18:33:41.423 に答える