Abrufen eines Bilds oder einer Arbeitsfläche aus dem Vorschaufenster

-1

Ich arbeite mit einem coolen Tool namens cropit. Das ist, was ich habe schon:Abrufen eines Bilds oder einer Arbeitsfläche aus dem Vorschaufenster

http://code.reloado.com/ejiyov3

Nun, indem Sie auf die Schaltfläche „Exportieren“ klicken, möchte ich die window.open(imageData) Betrieb ändern und das Vorschaubild als allein stehende Bild unter all das bekommen. Mit anderen Worten - ich möchte einen Schnappschuss davon machen, und jedes Mal, wenn ich die Vorschau ändere und auf die Schaltfläche klicke, ändert sich auch der Schnappschuss.

Irgendeine Idee, wie man auf diesem einwirkt?

Quelle

2016-07-24 PLAYCUBE

Was meinen Sie _ "das Vorschaubild bekommen" _? – guest271314

Wenn Sie ein Bild hochladen, können Sie es im Vorschaufenster verschieben und zoomen. Als Vorschaubild bezeichne ich den Status der Vorschau. – PLAYCUBE

Sie können den 'Daten-URI'-Satz unter' var imageData = $ ('# image-cropper') speichern. Cropit ('export'); ' – guest271314

Sie können ein <img> Element erstellen, setzen img Element src-imageData, hängen neu geschaffen zu dokumentieren

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
    <script src="https://cdn.jsdelivr.net/jquery.cropit/0.5.1/jquery.cropit.js"> 
 
    </script> 
 
    <meta charset=utf-8 /> 
 
    <title>code.reloado.com</title> 
 
    <!--[if IE]> 
 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
<![endif]--> 
 
    <style> 
 
    article, 
 
    aside, 
 
    figure, 
 
    footer, 
 
    header, 
 
    hgroup, 
 
    menu, 
 
    nav, 
 
    section { 
 
     display: block; 
 
    } 
 
    .cropit-preview { 
 
     width: 360px; 
 
     height: 360px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <!-- This wraps the whole cropper --> 
 

 
    <div id="image-cropper"> 
 

 
    <!-- This is where the preview image is displayed --> 
 
    <div class="cropit-preview"></div> 
 

 
    <!-- This range input controls zoom --> 
 
    <input type="range" class="cropit-image-zoom-input" /> 
 

 
    <!-- This is where user selects new image --> 
 
    <input type="file" class="cropit-image-input" /> 
 

 

 
    <button class="export">Export</button> 
 

 
    <script> 
 
     $("#image-cropper").cropit(); 
 
     $('.export').click(function() { 
 
     var imageData = $('#image-cropper').cropit('export'); 
 
     console.log(imageData); 
 
     $("<img>", { 
 
      src: imageData 
 
     }).appendTo("body") 
 
     }); 
 
    </script> 
 

 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-07-24 16:34:49 guest271314

Abrufen eines Bilds oder einer Arbeitsfläche aus dem Vorschaufenster

Antwort

Verwandte Themen