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>