14668

[code]

    var can = $("#drawarea")[0];
    var context = can.getContext("2d");
    
    $("#select").on("change", function() {
      var fileList = this.files;
      if (1 > fileList.length) {
        return false;
      }
      var file = fileList[0];
      var fr = new FileReader();
      fr.onload = function() {
    
        var image = new Image();
    
        image.onload = function() {
    
          if (can.getContext) {
    
            var context = can.getContext("2d");
    
            var width = this.width;
            var height = this.height;
    
            can.width = 600;
            can.height = 315;
    
            context.drawImage(this, 0, 0, width, height, 0, 0, 600, 315);
    
          }
    
        }
    
        image.src = this.result;
    
      }
    
      //ファイルを[base64エンコード]として読み込む
      fr.readAsDataURL(file);
    });
    
    
    $("#save").on("click", function() {
      var img = $('<img>').attr({
        width: 300,
        height: 150,
        src: can.toDataURL()
      });
    
      var link = $("<a>").attr({
        href: can.toDataURL().replace("image/png", "application/octet-stream"),
        download: new Date().getTime() + ".png"
    
      });
    
    
    
      $("#gallery").append(link.append(img.addClass("thumbnail")));
      context.clearRect(0, 0, can.width, can.height);
    });
    
    
    
    $("#eureka").on("click", function() {
      can.setAttribute("data-filter", "Eureka");
    })
[/code]

[code]

    .rightbar {
      width: 300px;
      height: 700px;
      float: right;
      border: solid 5px black;
    }
    #drawarea {
      cursor: crosshair;
    }
    [data-filter] {
      transition: -webkit-filter .2s;
    }
    [data-filter="Eureka"] {
      -webkit-filter: brightness(160%) contrast(110%) grayscale(0%) hue-rotate(0deg) invert(10%) saturate(90%) sepia(0%);
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <p>
      <button id="save">save</button>
      <input type="file" id="select">
    </p>
    <p>
      <canvas id="drawarea" width="500" height="300" style="border:1px solid black;"></canvas>
    </p>
    <button id="eureka" data-filter="Eureka">エウレカボタン</button>
    
    
    <div class="rightbar">
      <div id="gallery"></div>
    </div>
[/code]

base64として取得してるから編集された状態でsave出来ないのかなと思っているのですが、  
filter cssで編集したまま保存する方法が分かりません。

よろしくお願いします。


CC BY-SA 3.0
2015-08-20T08:04:48.483
14660
2015-08-20T10:35:41.160
8415
question
javascript jquery css html5
filter cssで編集した画像を編集したままの状態でダウンロードしたい


クライアントサイドでCSSのフィルタを適用した要素を画像としてレンダリングする確実な方法はたぶんありません。

  1. CSSでフイルタをかけるのではなく、[キャンバスのピクセルデータを直接いじって加工する](http://www.html5rocks.com/en/tutorials/canvas/imagefilters/?redirect_from_locale=ja)
  2. [サーバサイドで処理する](http://murayama.hatenablog.com/entry/2013/06/17/082332)

のどちらかになるでしょう。質問の範囲を超えるので、これらの方法の詳細は省略します。


CC BY-SA 3.0
2015-08-20T09:51:52.080
14668
2015-08-20T10:35:41.160
2015-08-20T10:35:41.160
10330
10330
14660
answer