Jquery 在从移动摄像机上载期间旋转图像（Base64）
我有上传和裁剪图像脚本。 一切正常，但当我试图上传手机摄像头的图像时，它会旋转 请看下面的代码 也许你能告诉我哪里错了，如何修正这个旋转Jquery 在从移动摄像机上载期间旋转图像（Base64）,jquery,canvas,html5-canvas,base64,Jquery,Canvas,Html5 Canvas,Base64,我有上传和裁剪图像脚本。 一切正常，但当我试图上传手机摄像头的图像时，它会旋转 请看下面的代码 也许你能告诉我哪里错了，如何修正这个旋转 var CROP = (function () { return function () { // Code Dependant Variables this.eles = { ele: undefined, container: undefined,
var CROP = (function () {
return function () {
// Code Dependant Variables
this.eles = {
ele: undefined,
container: undefined,
img: undefined,
overlay: undefined,
preview: undefined
};
this.img = undefined;
this.imgInfo = {
aw: 0,
ah: 0,
w: 0,
h: 0,
at: 0,
al: 0,
t: 0,
l: 0,
s: 1 // scale
};
this.init = function(ele) {
$(ele.container)
.attr({
'data-imgcrop': '',
'data-mask': ele.mask
})
.append('<input type="range" value="'+ele.zoom.min+'" min="'+ele.zoom.min+'" max="'+ele.zoom.max+'" step="'+ele.zoom.steps+'"><div class="cropMain"></div>');
// set min zoom
this.imgInfo.s = ele.zoom.min;
/*
Elements
*/
var umm = ele,
shell = $(ele.container),
zoom = shell.find('input'),
cropMain = shell.find('.cropMain'),
cropPreview = ele.preview,
img,
container,
overlay,
that = this;
/*
Container
*/
container = $('<div />')
.attr({
class: 'crop-container'
})
.css({
width: ele.width + 'px',
height: ele.height + 'px'
});
/*
Image
*/
img = $('<img />')
.attr('class', 'crop-img')
.css({
zIndex: 5999,
top: 0,
left: 0
});
/*
Crop Overlay
*/
overlay = $('<div />')
.attr({
class: 'crop-overlay',
draggable: "true"
})
.css({
zIndex: 6000
});
// Add Elements
container.append(overlay);
container.append(img);
cropMain.append(container);
this.eles.ele = cropMain;
this.eles.container = container;
this.eles.img = img;
this.eles.overlay = overlay;
this.eles.preview = cropPreview;
// load image
this.loadImg(ele.image);
/*
Bind Events
*/
container.resize(function () {
that.imgSize();
});
/*
Overlay Movement
*/
overlay.bind(((document.ontouchstart !== null) ? 'mousedown' : 'touchstart'), function (e) {
// apply grab cursor
$('body').addClass('grabcursor');
var o = $(this),
mousedown = {
x: (e.originalEvent.pageX || e.originalEvent.touches[0].pageX),
y: (e.originalEvent.pageY || e.originalEvent.touches[0].pageY)
},
elepos = {
x: o.parent().offset().left,
y: o.parent().offset().top
};
e.preventDefault();
$(document).bind(((document.ontouchmove !== null) ? 'mousemove' : 'touchmove'), function (e) {
var mousepos = {
x: (e.originalEvent.pageX || e.originalEvent.changedTouches[0].pageX || mousedown.x),
y: (e.originalEvent.pageY || e.originalEvent.changedTouches[0].pageY || mousedown.y)
};
if (mousedown.y !== mousepos.y) {
if (parseInt(o.css('top')) === 0) o.css({
top: that.eles.ele.offset().top,
left: that.eles.ele.offset().left
});
// Move Image
that.imgMove({
t: parseInt(o.css('top')) - (elepos.y - (mousedown.y - mousepos.y)),
l: parseInt(o.css('left')) - (elepos.x - (mousedown.x - mousepos.x))
});
// Reposition Overlay
o.css({
left: elepos.x - (mousedown.x - mousepos.x),
top: elepos.y - (mousedown.y - mousepos.y)
});
}
});
$(document).bind(((document.ontouchend !== null) ? 'mouseup' : 'touchend'), function (e) {
// remove grab cursor
$('body').removeClass('grabcursor');
$(document).unbind(((document.ontouchmove !== null) ? 'mousemove' : 'touchmove'));
overlay.css({
top: 0,
left: 0
});
});
return false;
});
// config slide
// --------------------------------------------------------------------------
$('input[type=range]').on("input change", function () {
that.slider(zoom.val());
rangeColor(zoom);
});
that.zoom = function(num) {
if(num === 'min' || num === 'max')
var num = parseInt(zoom.attr(num));
that.slider(num);
zoom.val(num);
rangeColor(zoom);
};
// zoom slider progress color
function rangeColor(self) {
var val = self.val(),
min = self.attr('min'),
max = self.attr('max'),
pos = Math.round(((val - min) / (max - min)) * 100),
style = "background: linear-gradient(to right, #fbc93d " + pos + "%, #eee " + (pos + 0.1) + "%);";
// apply background color to range progress
self.attr('style', style);
}
};
this.loadImg = function (url) {
var that = this;
this.eles.img.removeAttr('style').attr('src', url)
.load(function () {
that.imgSize();
});
};
this.imgSize = function () {
var img = this.eles.img,
imgSize = {
w: img.css('width', '').width(),
h: img.css('height', '').height()
},
c = this.eles.container;
var holderRatio = {
wh: this.eles.container.width() / this.eles.container.height(),
hw: this.eles.container.height() / this.eles.container.width()
};
this.imgInfo.aw = imgSize.w;
this.imgInfo.ah = imgSize.h;
if (imgSize.w * holderRatio.hw < imgSize.h * holderRatio.wh) {
this.imgInfo.w = c.width();
this.imgInfo.h = this.imgInfo.w * (imgSize.h / imgSize.w);
this.imgInfo.al = 0;
} else {
this.imgInfo.h = c.height();
this.imgInfo.w = this.imgInfo.h * (imgSize.w / imgSize.h);
this.imgInfo.at = 0;
}
this.imgResize();
};
this.imgResize = function (scale) {
var img = this.eles.img,
imgInfo = this.imgInfo,
oldScale = imgInfo.s;
imgInfo.s = scale || imgInfo.s;
img.css({
width: imgInfo.w * imgInfo.s,
height: imgInfo.h * imgInfo.s
});
// Move Image Based on Size Changes
this.imgMove({
t: -((imgInfo.h * oldScale) - (imgInfo.h * imgInfo.s)) / 2,
l: -((imgInfo.w * oldScale) - (imgInfo.w * imgInfo.s)) / 2
});
};
this.imgMove = function (move) {
var img = this.eles.img,
imgInfo = this.imgInfo,
c = this.eles.container;
imgInfo.t += move.t;
imgInfo.l += move.l;
var t = imgInfo.at - imgInfo.t,
l = imgInfo.al - imgInfo.l;
if (t >= 0) t = imgInfo.t = 0;
else if (t < -((imgInfo.h * imgInfo.s) - c.height())) {
t = -((imgInfo.h * imgInfo.s) - c.height());
imgInfo.t = ((imgInfo.at === 0) ? (imgInfo.h * imgInfo.s) - c.height() : (imgInfo.h * imgInfo.s) - c.height());
}
if (l >= 0) l = imgInfo.l = 0;
else if (l < -((imgInfo.w * imgInfo.s) - c.width())) {
l = -((imgInfo.w * imgInfo.s) - c.width());
imgInfo.l = ((imgInfo.al === 0) ? (imgInfo.w * imgInfo.s) - c.width() : (imgInfo.w * imgInfo.s) - c.width());
}
// Set Position
img.css({
top: t,
left: l
});
if(this.eles.preview)
this.preview(this.eles.preview.width, this.eles.preview.height, this.eles.preview.container);
};
/*
Slider
*/
this.slider = function (slideval) {
this.imgResize(slideval);
};
// return cropped data: coordinates & base64 string
// --------------------------------------------------------------------------
this.data = function(width, height, filetype) {
var self = this,
imgInfo = self.imgInfo,
c = self.eles.container,
img = self.eles.img;
var original = new Image();
original.src = img.attr('src');
// draw image to canvas
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var w = Math.round((c.width() - (0 * 2)) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
h = Math.round((c.height() - (0 * 2)) * (imgInfo.ah / (imgInfo.h * imgInfo.s))),
x = Math.round(-(parseInt(img.css('left')) - 0) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
y = Math.round(-(parseInt(img.css('top')) - 0) * (imgInfo.ah / (imgInfo.h * imgInfo.s)));
canvas.getContext('2d').drawImage(original, x, y, w, h, 0, 0, width, height);
data = {
width: width,
height: height,
image: canvas.toDataURL("image/"+filetype),
filetype: filetype
};
return data;
};
// show preview
// --------------------------------------------------------------------------
this.preview = function(width, height, target) {
var self = this,
imgInfo = self.imgInfo,
c = self.eles.container,
img = self.eles.img;
// if #preview element doesn't exist, create
if(!$(target + ' img').length)
$(target)
.css({
'height': c.height(),
'width': c.width(),
'overflow':'hidden',
'margin':'0 auto',
'padding':0,
'transform': 'scale('+this.eles.preview.ratio+')',
})
.append('<img>');
// position and resize image
$(target + ' img')
.attr('src', img.attr('src'))
.attr('style', 'position:relative;' + $('.crop-img').attr('style'));
};
// flip image
// --------------------------------------------------------------------------
this.flip = function() {
var self = this,
imgInfo = self.imgInfo,
c = self.eles.container,
img = self.eles.img;
// get current width & height
var original = new Image();
original.src = img.attr('src');
height = original.naturalHeight;
width = original.naturalWidth;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').translate(width, 0);
canvas.getContext('2d').scale(-1, 1);
canvas.getContext('2d').drawImage(original, 0, 0);
canvas.getContext('2d').translate(width, 0);
canvas.getContext('2d').scale(-1, 1);
c.find('.crop-img')
.removeAttr('style')
.attr('src', canvas.toDataURL());
};
// rotate 90 degrees
// --------------------------------------------------------------------------
this.rotate = function() {
var self = this,
imgInfo = self.imgInfo,
c = self.eles.container,
img = self.eles.img;
// get current width & height
var original = new Image();
original.src = img.attr('src');
height = original.naturalHeight;
width = original.naturalWidth;
canvas = document.createElement('canvas');
canvas.width = height;
canvas.height = width;
canvas.getContext('2d').translate(canvas.width / 2, canvas.height / 2);
canvas.getContext('2d').rotate(Math.PI / 2);
canvas.getContext('2d').drawImage(original, -width / 2, -height / 2);
canvas.getContext('2d').rotate(-Math.PI / 2);
canvas.getContext('2d').translate(-canvas.width / 2, -canvas.height / 2);
c.find('.crop-img')
.removeAttr('style')
.attr('src', canvas.toDataURL());
};
// download image
// --------------------------------------------------------------------------
this.download = function(width, height, filename, filetype, link) {
var self = this,
imgInfo = self.imgInfo,
c = self.eles.container,
img = self.eles.img;
var original = new Image();
original.src = img.attr('src');
// draw image to canvas
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var w = Math.round((c.width() - (0 * 2)) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
h = Math.round((c.height() - (0 * 2)) * (imgInfo.ah / (imgInfo.h * imgInfo.s))),
x = Math.round(-(parseInt(img.css('left')) - 0) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
y = Math.round(-(parseInt(img.css('top')) - 0) * (imgInfo.ah / (imgInfo.h * imgInfo.s)));
canvas.getContext('2d').drawImage(original, x, y, w, h, 0, 0, width, height);
$('#' + link)
.attr('href', canvas.toDataURL("image/"+filetype))
.attr('download', filename + '.' + filetype);
};
// import new image
// --------------------------------------------------------------------------
this.import = function() {
$('body').append('<input type="file" id="importIMG" style="display:none">');
var self = this,
imgInfo = self.imgInfo,
c = self.eles.container,
img = self.eles.img;
oFReader = new FileReader(), rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
$('#importIMG').change(function() {
if(document.getElementById("importIMG").files.length === 0) return;
var oFile = document.getElementById("importIMG").files[0];
if(!rFilter.test(oFile.type)) return;
oFReader.readAsDataURL(oFile);
$('#importIMG').remove();
});
oFReader.onload = function (oFREvent) {
c.find('.crop-img')
.removeAttr('style')
.attr('src', oFREvent.target.result);
};
$('#importIMG').click();
};
};
}());
var-CROP=（函数（）{
返回函数（）{
//代码相关变量
此.eles={
ele：未定义，
容器：未定义，
img：未定义，
覆盖：未定义，
预览：未定义
};
this.img=未定义；
this.imgInfo={
胡：0，
啊:0,，
w:0，
h:0，
零时零分,，
al:0，
t:0，
l:0，
s:1/比例
};
this.init=函数（ele）{
$（元素容器）
艾特先生({
“数据imgcrop”：“，
“数据掩码”：ele.mask
})
.附加（“”）；
//设置最小缩放
this.imgInfo.s=ele.zoom.min；
/*
元素
*/
var umm=ele，
外壳=$（元素容器），
zoom=shell.find（'input'），
cropMain=shell.find（'.cropMain'），
cropreview=ele.preview，
img，
集装箱，
叠加，
那=这个；
/*
容器
*/
容器=$（“”）
艾特先生({
类别：“作物容器”
})
.css({
宽度：元素宽度+px，
高度：标高高度+px
});
/*
形象
*/
img=$（'=0）t=imgInfo.t=0；
否则如果（t<-（（imgInfo.h*imgInfo.s）-c.高度（）{
t=-（（imgInfo.h*imgInfo.s）-c.高度（）；
imgInfo.t=（（imgInfo.at==0）？（imgInfo.h*imgInfo.s）-c.height（）：（imgInfo.h*imgInfo.s）-c.height（）；
}
如果（l>=0）l=imgInfo.l=0；
否则如果（l<-（（imgInfo.w*imgInfo.s）-c.宽度（）{
l=-（（imgInfo.w*imgInfo.s）-c.宽度（）；
imgInfo.l=（（imgInfo.al==0）？（imgInfo.w*imgInfo.s）-c.width（）：（imgInfo.w*imgInfo.s）-c.width（）；
}
//设定位置
img.css({
上图：t，
左：l
});
如果（此.eles.preview）
this.preview（this.eles.preview.width、this.eles.preview.height、this.eles.preview.container）；
};
/*
滑块
*/
this.slider=函数（slideval）{
这个.imgResize（slideval）；
};
//返回裁剪数据：坐标和base64字符串
// --------------------------------------------------------------------------
this.data=函数（宽度、高度、文件类型）{
var self=这个，
imgInfo=self.imgInfo，
c=自发光容器，
img=self.eles.img；
var original=新图像（）；
original.src=img.attr（'src'）；
//在画布上绘制图像
var canvas=document.createElement（'canvas'）；
画布宽度=宽度；
canvas.height=高度；
var w=数学圆（（c.width（）-（0*2））*（imgInfo.aw/（imgInfo.w*imgInfo.s）），
h=数学圆（（c.height（）-（0*2））*（imgInfo.ah/（imgInfo.h*imgInfo.s）），
x=数学圆（-（parseInt（img.css（'left'））-0）*（imgInfo.aw/（imgInfo.w*imgInfo.s）），
y=数学圆（-（parseInt（img.css（'top'））-0）*（imgInfo.ah/（imgInfo.h*imgInfo.s））；
canvas.getContext（'2d'）.drawImage（原始、x、y、w、h、0、0、宽度、高度）；
数据={
宽度：宽度，
高度:高度,，
image:canvas.toDataURL（“image/”+文件类型），
filetype:filetype
};
返回数据；
};
//显示预览
// --------------------------------------------------------------------------
this.preview=函数（宽度、高度、目标）{
var self=这个，
imgInfo=self.imgInfo，
c=自发光容器，
img=self.eles.img；
//如果#预览元素不存在，请创建
如果（！$（目标+img'）。长度）
美元（目标）
.css({
“高度”：c.高度（），
“宽度”：c.宽度（），
“溢出”：“隐藏”，
“页边距”：“0自动”，
“填充”：0，
“转换”：“缩放（“+this.eles.preview.ratio+”），
})
.附加（“”）；
var self=这个，
imgInfo=self.imgInfo，
c=自发光容器，
img=self.eles.img；
oFReader=newfilereader（），rFilter=/^（image\/bmp | image\/gif | image\/jpeg | image\/png | image\/tiff）$/i；
$（'#importIMG'）.change（function（）{
if（document.getElementById（“importIMG”）.files.length==0）返回；
var of ile=document.getElementById（“importIMG”）.files[0]；
如果（！rFilter.test（oFile.type））返回；
readAsDataURL（oFile）；
$（'#importIMG'）。删除（）；
});
oFReader.onload=函数（OFRENT）{
c、 查找（“.crop img”）
.removeAttr（'style'））
.attr（'src'，of report.target.result）；
};
$（“#导入”）。单击（）；
};
};
}());