本帖子已过去太久远了，不再提供回复功能。html5上传图片(二)一解决部分手机拍照上传图片转向问题 - 大朋展翅 - 博客园
& & & &本以为解决跨域上传后没有问题了，不成想被测试找出一个问题，那就是在手机上拍照上传后图片会旋转。很头痛，不过没有办法，问题还是需要解决的。在查阅了一系列资料后我找到了相应的解决方案，利用exif.js获取图片旋转的方向，然后再转过来图片，之后再上传。这个方案需要修改前面的脚本，同样的，由于要传base64字符串，后台也要做出相应的修改。下面是我修改后的相应代码：
1 (function () {
var imgOperate = {
operateUrl: "更改图片在数据库中的状态地址",
uploadUrl: "代理图片上传地址",
DelPicId: '',
ddWidth: 0,
dlWidth:0,
successCount:0,
onload: function () {
this.initImage();
initImage: function () {
var et = $('#entrust dd').
this.ddWidth = $('#entrust dd').width() + 17;
this.dlWidth = parseInt(et * this.ddWidth + 160);
$('#entrust').css("width", this.dlWidth);
this.BindEvent();
BindEvent: function () {
var _this = this;
$("#pic0").on("change", function () {
_this.uploadFiles(this);
InserImage:function(urls,dd)
$.post(this.operateUrl, { houseid: houseid, operateType: 1, picStr: urls }, function (data) {
data = eval("(" + data + ")");
if (data && data.picIds)
dd.getElementsByTagName("img")[0].setAttribute("housepicid", data.picIds);
uploadFiles: function (where) {
if (!houseid) {
this.ShowMsg("请回到第一步完善相应的信息");
var imgLength = $("#entrust dd").length - 1;
if (imgLength &= 50)
this.ShowMsg("你的图片超过了50张，不能再上传");
if (imgLength + where.files.length & 50)
this.ShowMsg("你选择的图片超过了50张，无法上传，请重新选择");
var _this = this;
var radtime = new Date();
var sid = radtime.getTime();
this.successCount=0;
for (var i = 0; i & where.files. i++) {
var formData = new FormData();
var file = where.files[i];
var orientation = 1;
if (file.name.indexOf("jpg") & -1) {
EXIF.getData(file, function () {
EXIF.getAllTags(this);
orientation = EXIF.getTag(this, 'Orientation');
if (orientation) {
var reader = new FileReader();
reader.onload = function (e) {
_this.getImgData(e, this.result, orientation, function (data) {
var base64String =
formData.append("icoimage", base64String);
_this.UploadImg(where, formData, sid, i);
reader.readAsDataURL(file);
formData.append("icoimage", file);
_this.UploadImg(where, formData, sid, i);
formData.append("icoimage", file);
_this.UploadImg(where, formData, sid, i);
UploadImg: function (where, formData, sid, i) {
var _this = this;
url: this.uploadUrl + '?channel=频道&sid=' + sid,
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).success(function (res) {
var imgsrc =
if (imgsrc == "-1" || imgsrc == "302" || imgsrc == -1 || imgsrc == 302) {
_this.ShowMsg("上传失败，照片超过10M");
} else if (imgsrc.indexOf("http") != -1) {
var dd = document.createElement("dd");
if ($("#entrust dd").length == 1) {
dd.innerHTML = "&div class=\"cver\"&封面图&/div&&a class=\"close\"&&/a&&img src=\"" + imgsrc + "\" housepicid=\"\"&";
dd.innerHTML = "&a class=\"close\"&&/a&&img src=\"" + imgsrc + "\" housepicid=\"\"&";
document.getElementById("entrust").appendChild(dd);
_this.dlWidth += _this.ddWidth + 17;
$('#entrust').css("width", _this.dlWidth);
_this.InserImage(imgsrc, dd);
this.successCount++;
_this.ShowMsg("正在上传第" + i + "张图片");
if (i == where.files.length) {
if (this.successCount & 0) {
_this.ShowMsg("成功上传" + successCount + "，可继续上传新照片");
ShowMsg: function (text, mymethod) {
var radtime = new Date();
var sid = radtime.getTime();
var msg_div = "&div class='zuopenbox' id='div_msg" + sid + "'&&div class='opencon_01'&&div class='openList'&&h3 class='f15' style='margin-bottom: 0; color: #FFFFFF'&" + text + "&/h3&&/div&&/div&&/div&";
$(msg_div).appendTo("body");
var _this = this;
setTimeout(function () {
var d = 0.5;
var m = document.getElementById("div_msg"+sid);
m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
m.style.opacity = '0';
setTimeout(_this.RemoveNode(m), 500);
RemoveNode: function (m) {
m.parentNode.removeChild(m);
// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法，返回校正方向后的base64
getImgData: function (e,img, dir, next) {
var _this = this;
var image = new Image();
image.src = e.target.
image.onload=function(){
var degree=0,drawWidth,drawHeight,width,
drawWidth=this.naturalW
drawHeight=this.naturalH
//以下改变一下图片大小
var maxSide = Math.max(drawWidth, drawHeight);
if (maxSide & 1024) {
var minSide = Math.min(drawWidth, drawHeight);
minSide = minSide / maxSide * 1024;
maxSide = 1024;
if (drawWidth & drawHeight) {
drawWidth = maxS
drawHeight = minS
drawWidth = minS
drawHeight = maxS
var canvas=document.createElement('canvas');
canvas.width=width=drawW
canvas.height=height=drawH
var context = canvas.getContext('2d');
//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
switch(dir){
context.translate(width, 0);
context.scale(-1, 1);
context.translate(width, height);
context.rotate(Math.PI);
context.translate(0, height);
context.scale(1, -1);
context.rotate(0.5 * Math.PI);
context.scale(1, -1);
context.rotate(0.5 * Math.PI);
context.translate(0, -height);
context.rotate(0.5 * Math.PI);
context.translate(width, -height);
context.scale(-1, 1);
context.rotate(-0.5 * Math.PI);
context.translate(-width, 0);
context.drawImage(this,0,0,drawWidth,drawHeight);
//返回校正图片
next(canvas.toDataURL("image/jpeg",.8));
image.src=
imgOperate.onload();
window.imgOperate = imgO
public override void ProcessRequest(HttpContext context)
//获取目标站点地址
String target = "图片服务器地址";
string sid = context.Request["sid"];
target = string.Format("{0}?city=&channel=频道&sid={1}&backurl=",target,sid);
string imgText = string.E
if (context.Request.Files.Count == 0 && string.IsNullOrEmpty(imgText=context.Request["icoimage"]))
Response.Write("0");
Response.End();
Stream stream = new MemoryStream();
string fileName = string.E
byte[] bArr = null;
if (context.Request.Files.Count & 0)
file = context.Request.Files[0];
fileName = file.FileN
stream = file.InputS
bArr = new byte[stream.Length];
stream.Read(bArr, 0, bArr.Length);
stream.Close();
imgText = HttpUtility.UrlDecode(imgText);
imgText = Regex.Match(imgText, "(?&=,).*").V
imgText= imgText.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
if (imgText.Length % 4 & 0)
imgText = imgText.PadRight(imgText.Length + 4 - imgText.Length % 4, '=');
bArr=Convert.FromBase64String(imgText);
fileName = "base64.png";
HttpWebRequest request = WebRequest.Create(target) as HttpWebR
CookieContainer cookieContainer = new CookieContainer();
request.CookieContainer = cookieC
request.AllowAutoRedirect = true;
request.Method = "POST";
request.Headers.Add("Origin", "http://" + context.Request.UrlReferrer.Host);
request.Headers.Add("Accept-Encoding", "gzip, deflate");
request.Headers.Add("Accept-Language", "zh-CN,q=0.8");
request.Headers.Add("Upgrade-Insecure-Requests", "1");
request.Referer = context.Request.UrlReferrer.OriginalS
string boundary = DateTime.Now.Ticks.ToString("X"); // 随机分隔线
request.ContentType = "multipart/form-charset=utf-8;boundary=" +
byte[] itemBoundaryBytes = Encoding.UTF8.GetBytes("\r\n--" + boundary + "\r\n");
byte[] endBoundaryBytes = Encoding.UTF8.GetBytes("\r\n--" + boundary + "--\r\n");
//请求头部信息
StringBuilder sbHeader = new StringBuilder(string.Format("Content-Disposition:form-name=\"file\";filename=\"{0}\"\r\nContent-Type:application/octet-stream\r\n\r\n",fileName));
byte[] postHeaderBytes = Encoding.UTF8.GetBytes(sbHeader.ToString());
Stream postStream = request.GetRequestStream();
postStream.Write(itemBoundaryBytes, 0, itemBoundaryBytes.Length);
postStream.Write(postHeaderBytes, 0, postHeaderBytes.Length);
postStream.Write(bArr, 0, bArr.Length);
postStream.Write(endBoundaryBytes, 0, endBoundaryBytes.Length);
postStream.Close();
//发送请求并获取相应回应数据
HttpWebResponse response = request.GetResponse() as HttpWebR
SetCookie(response,context);
//response是目标服务器的响应对象，context是返回给浏览器的上下文对象
void SetCookie(HttpWebResponse response, HttpContext context)
foreach (Cookie cookie in response.Cookies)
if (cookie.Name!=null&&cookie.Name.StartsWith("Picture"))
string result=string.E
if (cookie.Value != null && cookie.Value.StartsWith("http://"))
Regex r = new Regex(@"^.*?(?=\|)");
result = r.Match(cookie.Value).V
result = cookie.V
context.Response.Write(result);
context.Response.End();
& & & 本次遇到的难题主要是解析base64字符串的问题，总是遇到""。经过反复的调整，终于实现了相应的功能。本帖子已过去太久远了，不再提供回复功能。在html中插入整个页面的背景图_百度经验
该经验图片、文字中可能存在外站链接或电话号码等，请注意识别，谨防上当受骗！&&&&&&电脑在html中插入整个页面的背景图听语音1234567
百度经验:在html页面设计时，有时会需要对整个页面进行背景插图，这里介绍的就是简单的一种方式，希望能帮到你。百度经验:Dreamweaver CS6一张作为背景的图片百度经验:1先”新建文件夹“并将其命名为“表格”。2将背景图放入新建的”表格“文件夹里。3在Dreamweaver CS6中新建一个html空白文档。4将页面内容放入&body&&/body&中。5在&body后按一下空格键，找到background，再按空格，点击“浏览”，找到背景图的位置。6选中背景图，点击“确定”。7图片插入完成。8将这个html另存为在“表格”文件夹里。9点击这个预览图标，就可以在浏览器中查看效果。10完成效果图。END百度经验:html要和图片一起保存在同一个文件夹里，不然换一台电脑可能就显示不出背景图。图片要先保存在文件夹里，然后再插入到html中。如果帮到了你，请投票或收藏吧！经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。投票(11)已投票(11)有得(0)我有疑问(0)◆◆说说为什么给这篇经验投票吧！我为什么投票...你还可以输入500字◆◆只有签约作者及以上等级才可发有得&你还可以输入1000字◆◆如对这篇经验有疑问，可反馈给作者，经验作者会尽力为您解决！你还可以输入500字相关经验57200热门杂志第1期你不知道的iPad技巧3629次分享第1期win7电脑那些事6369次分享第2期新人玩转百度经验1294次分享第1期Win8.1实用小技巧2596次分享第1期小白装大神1805次分享◆请扫描分享到朋友圈该经验图片、文字中可能存在外站链接或电话号码等，请注意识别，谨防上当受骗！}