Получение изображения или холста из окна предварительного просмотра

-1

Я работаю с крутым инструментом под названием cropit. Это то, что я уже:Получение изображения или холста из окна предварительного просмотра

http://code.reloado.com/ejiyov3

Теперь, нажав на кнопку «Экспорт», я хочу, чтобы изменить window.open(imageData) операцию и получить изображение предварительного просмотра, как только стоя изображение под всем этим. Другими словами - я хочу сделать снимок, и каждый раз, когда я меняю предварительный просмотр и нажимаю кнопку, изменяется моментальный снимок.

Любая идея, как действовать на этом?

источник

2016-07-24 PLAYCUBE

Что вы имеете в виду _ "получить изображение предварительного просмотра" _? – guest271314

Загружая изображение, вы можете перемещать и масштабировать его в окне предварительного просмотра. По предварительным изображениям я имею в виду состояние предварительного просмотра. – PLAYCUBE

Вы можете сохранить 'URI' данных в 'var imageData = $ ('# image-cropper'). Cropit ('export');' – guest271314

Вы можете создать <img> элемент, установите img элемент src в imageData, дополните вновь созданный файл в документ

<!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>

источник

2016-07-24 16:34:49 guest271314

Получение изображения или холста из окна предварительного просмотра

ответ

Смежные вопросы