裁剪浏览图像上的弹出
cropping browsed image on popup
请查看下面的代码http://jsfiddle.net/UmJtB/18/
<script type="text/javascript">
$(document).ready( function() {
$(".uploadphoto").click(function() {
if(document.getElementById('files').files.length == 0){
alert('Select an Image first');
return false;
}else {
// When upload button is pressed, load the Popupbox First
loadPopupBox();
}
$('#popupBoxClose').click( function() {
unloadPopupBox();
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "1.5"
});
}
});
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
var imgdiv = $('#popup_box');
$(imgdiv).append(image);
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$(".uploadphoto").click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
$(function(){
$('#popup_box img').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
</head>
<body>
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>
<a id="popupBoxClose">close</a> </div>
<div id="container"> <!-- Main Page -->
</div>
</body>
</html>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:600px;
width:600px;
background:#FFFFFF;
left: 300px;
top: 150px;
z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#popup_box img {
height:600px;
width:600px
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a {
cursor: pointer;
text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
background: url("close.png") no-repeat scroll 0 0 transparent;
color: transparent;
font-size: 20px;
line-height: 26px;
position: absolute;
right: -28px;
top: -14px;
}
</style>
我上传的图像弹出,我想裁切的图像,为此我使用了JCrop。但这对我不起作用。我想在画布上显示那个图像。请帮帮我……我得到这个错误PM错误:NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsDataURL]提前感谢!
工作小提琴
JS变化
reader.onloadend = function (e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
var theImage = new Image();
theImage.src = e.target.result;
var imageWidth = theImage.width;
var imageHeight = theImage.height;
var imgdiv = $('#popup_box');
$(imgdiv).append(image);
image.Jcrop({
/*onChange: function(coords){showPreview(coords, image);}, */
onSelect: function(coords){showPreview(coords, image, imageWidth / image.width(), imageHeight / image.height());},
aspectRatio: 1
});
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
和
function showPreview(coords, image, width_scale, height_scale) {
var c=document.getElementById("preview");
var ctx=c.getContext("2d");
var img=image[0];
if(coords.w > 0 && coords.h > 0)
ctx.drawImage(img,coords.x * width_scale,coords.y * height_scale,coords.w * width_scale, coords.h * height_scale, 0 , 0, 300, 150);
}
首先,我已经添加了Jcrop插件到每个正在onloadend函数内加载的图像。我们还必须计算图像缩放了多少,因为canvas处理的是原始图像,而不是渲染的html图像。我删除了onChange回调函数,因为每次onChange事件触发时,绘制画布可能有点太昂贵了。
showPreview回调已被修改为获取Jcrop传递的坐标以及被裁剪的图像和该图像的比例因子。
相关文章:
- 循环浏览多个身体背景图像
- 模式上的后退和前进按钮位于图像库上(可滚动浏览)
- 利用移动设备上的滑动功能浏览图像阵列
- Javascript循环浏览图像
- 基于缩略图在路径中循环浏览图像
- 循环浏览 base64 图像并保存为 pdf
- 如何自动循环浏览图像数组
- 如何使用上一个/下一个按钮循环浏览图像
- 如何让不同的图像和文本自动循环浏览?我的图像正在循环,但我的文本不是
- 在 javascript 中循环浏览图像数组
- 在jquery/Javascript中浏览图像时,如何从本地磁盘获取本地url图像路径
- 循环浏览图像中的像素
- 如何显示浏览图像的名称
- jquery逐步浏览图像
- 裁剪浏览图像上的弹出
- 使用next和previous按钮HTML浏览图像
- 如何浏览图像并在浏览器中显示
- unsharp laravel filemanager -不能浏览图像文件夹
- 如何创建一个在鼠标悬停时循环浏览图像数组的 JavaScript
- jQuery-循环浏览图像并隐藏除单击的图像之外的所有图像