从预览窗口中获取图像或画布
Posted
技术标签:
【中文标题】从预览窗口中获取图像或画布【英文标题】：Getting an image or canvas out of the preview window 【发布时间】：2016-07-24 15:44:07 【问题描述】：我正在使用一个名为cropit 的酷工具。这是我已经拥有的：
http://code.reloado.com/ejiyov3
现在，通过单击“导出”按钮，我想更改 window.open(imageData) 操作并将预览图像作为所有这些图像下方的单独站立图像。换句话说 - 我想拍摄它的快照，每次我更改预览并单击按钮时，快照也会更改。
知道如何处理这个吗？
【问题讨论】：
“获取预览图”是什么意思？ 通过上传图片，您可以在预览窗口中移动和缩放它。预览图像是指预览的状态。 您可以将data URI 设置存储在var imageData = $('#image-cropper').cropit('export');
var imageData = $('#image-cropper').cropit('export').toDataURL 喜欢这个？
不，$('#image-cropper').cropit('export') 已经返回 data URI。试试var imageData = $('#image-cropper').cropit('export');console.log(imageData)
【参考方案1】：
您可以创建一个<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>【讨论】：
以上是关于从预览窗口中获取图像或画布的主要内容，如果未能解决你的问题，请参考以下文章
使用 JavaScript/jQuery 从输入类型“文件”中获取二进制图像数据，以便在 WebMatrix 中使用 AJAX 进行图片预览 [重复]