Php 使用jQueryJCROP插件从网络摄像头上传照片大小错误。?
我正在尝试使用网络摄像头拍摄照片,使用jcrop jquery库进行裁剪,然后将裁剪后的照片上载到服务器。不管缩略图的大小如何,它的宽度始终为300像素,高度始终为150像素 对于网络摄像头照片捕获,我一直在使用jQuery网络摄像头插件:。我还尝试了一个使用getusermedia的 仅上传网络摄像头snaptshot即可正常工作,并且是预期大小 我的javascript:Php 使用jQueryJCROP插件从网络摄像头上传照片大小错误。?,php,javascript,jquery,jcrop,Php,Javascript,Jquery,Jcrop,我正在尝试使用网络摄像头拍摄照片,使用jcrop jquery库进行裁剪,然后将裁剪后的照片上载到服务器。不管缩略图的大小如何,它的宽度始终为300像素,高度始终为150像素 对于网络摄像头照片捕获,我一直在使用jQuery网络摄像头插件:。我还尝试了一个使用getusermedia的 仅上传网络摄像头snaptshot即可正常工作,并且是预期大小 我的javascript: $('#canvas').Jcrop({ boxWidth: 320, boxHeigh
$('#canvas').Jcrop({
boxWidth: 320,
boxHeight: 240,
onChange: updatePreview,
onSelect: updatePreview,
addClass: 'jcrop-dark',
aspectRatio : 1},function(){
jcrop_api = this;
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 320) + 'px',
height: Math.round(ry * 240) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
function updatePreview(c) {
if(parseInt(c.w) > 0) {
// Show image preview
var imageObj = $("#canvas")[0];
var canvas = $("#preview")[0];
var context = canvas.getContext("2d");
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
};
$('#save').click(function(){
var imgData = document.getElementById('canvas').toDataURL();
var postStr = "img=" + encodeURIComponent(imgData);
$.ajax({
type: 'POST',
url: '{{ path('photo_upload') }}',
data: postStr,
async: false,
processData: false,
error: function(){
$('.hero-unit').prepend('<div class="alert alert-error">The photo could not be uploaded.<button type="button" class="close" data-dismiss="alert">×</button></div>');
}
});
});
我的HTML:
<div id="webcam"></div>
<a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a>
<canvas id="canvas" height="240" width="320"></canvas>
<canvas id="preview" style="width:300px;height:300px;overflow:hidden;"></canvas>
<a class="btn btn-primary btn-large" id="save">Save Photo</a>
保存照片
这正是您想要使用的代码吗
我猜您的画布仍然是默认大小(刚好是300x150),这导致它成为发送到服务器并保存的图像
另外,为什么预览时使用样式宽度和高度而不是设置实际宽度和高度?谢谢您的帮助。可直接设置宽度和高度。我确实有一些css设置的大小,以及加上实际的网络摄像头捕获代码,我排除了。我猜它无法根据css样式确定大小。正如你所知,画布的宽度和高度属性控制它的“绘图”大小(以及它的物理大小)。设置CSS大小会覆盖物理大小,但不会覆盖图形大小(因此,如果画布为300x150,并且将CSS设置为300x300,它只会拉伸以该大小显示,与图像相同)。
<div id="webcam"></div>
<a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a>
<canvas id="canvas" height="240" width="320"></canvas>
<canvas id="preview" style="width:300px;height:300px;overflow:hidden;"></canvas>
<a class="btn btn-primary btn-large" id="save">Save Photo</a>