Bild-beschneiden-und-Ausschnitt-wieder-als-Bild-speichern.php

Quell Code

<!--
    <script src="js/index.php?js=xjs.js" id="xjs"></script>
     <script src="js/index.php?js=alib.js"></script>
 -->

<!--
    <script src="js/index.php?js=logger.js"></script>
    <script src="js/index.php?js=jcrop-jquery.min.js"></script>
-->
<!--
<script src="js/index.php?js=jquery.color.js"></script>
 -->
 <style>
     .jcrop-holder {
  direction: ltr;
  text-align: left;
}
/* Selection Border */
.jcrop-vline,
.jcrop-hline {
  background: #ffffff url("Jcrop.gif");
  font-size: 0;
  position: absolute;
}
.jcrop-vline {
  height: 100%;
  width: 1px !important;
}
.jcrop-vline.right {
  right: 0;
}
.jcrop-hline {
  height: 1px !important;
  width: 100%;
}
.jcrop-hline.bottom {
  bottom: 0;
}
/* Invisible click targets */
.jcrop-tracker {
  height: 100%;
  width: 100%;
  /* "turn off" link highlight */
  -webkit-tap-highlight-color: transparent;
  /* disable callout, image save panel */
  -webkit-touch-callout: none;
  /* disable cut copy paste */
  -webkit-user-select: none;
}
/* Selection Handles */
.jcrop-handle {
  background-color: #333333;
  border: 1px #eeeeee solid;
  width: 7px;
  height: 7px;
  font-size: 1px;
}
.jcrop-handle.ord-n {
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -4px;
  margin-left: -4px;
}
.jcrop-handle.ord-e {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 50%;
}
.jcrop-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}
.jcrop-handle.ord-nw {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-ne {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 0;
}
.jcrop-handle.ord-se {
  bottom: 0;
  margin-bottom: -4px;
  margin-right: -4px;
  right: 0;
}
.jcrop-handle.ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
  margin-left: -4px;
}
/* Dragbars */
.jcrop-dragbar.ord-n,
.jcrop-dragbar.ord-s {
  height: 7px;
  width: 100%;
}
.jcrop-dragbar.ord-e,
.jcrop-dragbar.ord-w {
  height: 100%;
  width: 7px;
}
.jcrop-dragbar.ord-n {
  margin-top: -4px;
}
.jcrop-dragbar.ord-s {
  bottom: 0;
  margin-bottom: -4px;
}
.jcrop-dragbar.ord-e {
  margin-right: -4px;
  right: 0;
}
.jcrop-dragbar.ord-w {
  margin-left: -4px;
}
.jcrop-light .jcrop-vline,
.jcrop-light .jcrop-hline {
  background: #ffffff;
  filter: alpha(opacity=70) !important;
  opacity: .70!important;
}
.jcrop-light .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #000000;
  border-color: #ffffff;
  border-radius: 3px;
}
.jcrop-dark .jcrop-vline,
.jcrop-dark .jcrop-hline {
  background: #000000;
  filter: alpha(opacity=70) !important;
  opacity: 0.7 !important;
}
.jcrop-dark .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #ffffff;
  border-color: #000000;
  border-radius: 3px;
}
.solid-line .jcrop-vline,
.solid-line .jcrop-hline {
  background: #ffffff;
}
.jcrop-holder img,
img.jcrop-preview {
  max-width: none;
}
p#dropbox {
    height: 50px;
    width: 50vw;
    border: 5px dotted blue;
}
     
 </style>
 <script src="/js/index.php?js=jquery.js"></script>
<script src="/js/index.php?js=crop-Jcrop.js"></script>
<!--
<script src="http://rolfrost.de/jcrop/jquery.Jcrop.min.js"></script>
-->
<script src="/js/index.php?js=crop-drop.js"></script>
<script src="/js/index.php?js=crop-FileSaver.js"></script>
<h1>Bildbearbeitung mit JCrop und Canvas und Speichern unter...</h1> 
<p> Demonstriert das Erstellen eines Bildschnittes mit JQery und Pixel-Manipulation mit Canvas </p>
<div class="cleft"></div>

<script>
    var OBJECTS = {};
    OBJECTS.raw = {};
    OBJECTS.raw.scale = 1;
    var SCALE_BASE = 640;
</script>
<p id="dropbox" class="gerahmt" style="width:640px">
    Bild vom Desktop hierher ziehen und fallen lassen.<br>
    <img src="http://rolfrost.de/astro/pixel.png" alt="IMG" id="img_origin">
</p>
<form action="#" id="coords" style="display:none">
    <fieldset><legend><strong>Ausgewählte Koordinaten:</strong></legend>
    <span class="inline-labels">
    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
    <label>W <input type="text" size="4" id="w" name="w" /></label>
    <label>H <input type="text" size="4" id="h" name="h" /></label>
    </span>
    </fieldset>
</form>
<form action="#">
    <fieldset id="opt_save" style="display:none"><legend><strong>Aktionen für den Bildausschnitt:</strong></legend>
        <input id="save_as_png" style="border: thin solid silver;width:12em" type="button" value="Speichern als PNG">
        <input id="save_as_jpeg" style="border: thin solid silver;width:12em" type="button" value="Speichern als JPEG">
        <input id="save_as_bmp" style="border: thin solid silver;width:12em" type="button" value="Speichern als BMP">
    </fieldset>
</form>
<p id="show_resolution" style="display:none">Bildschnitt: <em id="crop_w"></em> x <em id="crop_h"></em> Pixel</p>
<canvas id="canvas_to" style="display:none"></canvas>  
<script>
    function dropper(e){ 
        e.stopPropagation();
        e.preventDefault();
        var dt = e.dataTransfer;
        var files = dt.files;
        var file = files.item(0);
        var ftype = file.type;
        if(! ftype.match(/^image/)){
            alert("Bitte ein Bild als Image");
            return;
        }
        FR.onload = function(){
            var bb = new Blob([FR.result]);
            var ident = e.target.id;
            var blob_url = URL.createObjectURL(bb);
            _('img_origin').src = blob_url;
            _('img_origin').onload = function(e){
                var width = e.target.naturalWidth;
                var height = e.target.naturalHeight;
                OBJECTS.raw.width = width;
                OBJECTS.raw.height = height;
                OBJECTS.raw.scale = width / SCALE_BASE > 1 ?  width / SCALE_BASE : OBJECTS.raw.scale;                
                OBJECTS.canvas = document.createElement('canvas');
                OBJECTS.canvas.width = width;
                OBJECTS.canvas.height = height;
                var objContext = OBJECTS.canvas.getContext("2d");
                objContext.drawImage(_('img_origin'), 0, 0);
                  jQuery(function($){
                    var jcrop_api;
                    $('#img_origin').Jcrop({
                      onChange:   showCoords,
                      onSelect:   showCoords,
                      onRelease:  clearCoords
                    },function(){
                      jcrop_api = this;
                    });
                    $('#coords').on('change','input',function(e){
                      var x1 = $('#x1').val(),
                          x2 = $('#x2').val(),
                          y1 = $('#y1').val(),
                          y2 = $('#y2').val();
                      jcrop_api.setSelect([x1,y1,x2,y2]);
                    });
                  });
                  function showCoords(c){
                    $('#x1').val(c.x);
                    $('#y1').val(c.y);
                    $('#x2').val(c.x2);
                    $('#y2').val(c.y2);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                    var objContext = OBJECTS.canvas.getContext("2d");
                    var scale = OBJECTS.raw.scale;
                    var objImageData = objContext.getImageData(c.x * scale, c.y * scale, c.x2 * scale, c.y2 * scale);
                    var canvas = _('canvas_to');
                    canvas.width = c.x2 * scale - c.x * scale;
                    canvas.height = c.y2 * scale - c.y * scale;
                    _('crop_w').innerHTML = canvas.width;
                    _('crop_h').innerHTML = canvas.height;
                    _('show_resolution').style.display = 'block';
                    _('opt_save').style.display = 'block';
                    var context = canvas.getContext("2d");
                    context.putImageData(objImageData,0,0);
                    canvas.style.display = 'block';
                    OBJECTS.canvas_to = canvas;
                  };
                  function clearCoords(){
                    $('#coords input').val('');
                    _('show_resolution').style.display = 'none';
                    _('opt_save').style.display = 'none';
                  };
            }
        };
        FR.readAsArrayBuffer(file);
    }
    function save_as_png(){
        var canvas = OBJECTS.canvas_to;
        var blob = new Blob();
        canvas.toBlob(function(blob) {
            saveAs(blob);
        }, 'image/png', 1);
    }
    function save_as_jpeg(){
        var canvas = OBJECTS.canvas_to;
        var blob = new Blob();
        canvas.toBlob(function(blob) {
            saveAs(blob);
        }, 'image/jpeg', 1);  
    }
    function save_as_bmp(){
        var canvas = OBJECTS.canvas_to;
        var blob = new Blob();
        canvas.toBlob(function(blob) {
            saveAs(blob);
        }, 'image/bmp', 1);      
    }
    _('dropbox').addEventListener('drop', dropper, false);
    _('dropbox').addEventListener("dragenter", dragenter, false);
    _('dropbox').addEventListener("dragover", dragover, false);
    _('save_as_png').addEventListener("click", save_as_png, false);
    _('save_as_jpeg').addEventListener("click", save_as_jpeg, false);
    _('save_as_bmp').addEventListener("click", save_as_bmp, false);
</script>