㈠ image/png;base64代码是唯一的吗
base64是一种通用压缩方法，同一张图片的base64，在不同语言中都可以转化成这张照片，其实就是将这样照片的数据编码成了base64字符串的形式。
㈡ ios html5 拍照上传 照片调整90度 为什么上传之后 又返回来了
它的主要功能就是上传两张人像，通过算法进行分析对比，最后得出一个相似度的分数，以验证你们是天造地设还是颜值互补。
但是，当我们把上传的图片转换成base64格式，发送给后台时，会发现偶尔会出现问题，有一些图片本来是这样的：
柴犬
处理之后却变成了这样：
柴犬2
经过测试发现，只有iOS手机竖着拍的照片才会出现这样的问题，而iOS手机横着拍的照片、Android手机拍的照片以及通过屏幕截图、网络下载等途径获得的图片都不会产生这个问题。
那么，这到底是为什么呢？
在开发过程中，由于时间紧迫，未求甚解，使用了github上的一个开源项目 lrz.js 来解决此问题，这个工具的主要用途是在尽量保证图片质量的前提下压缩图片的大小，但同时也附带了图片旋转角度纠正的功能。
通过阅读 lrz.js 的源代码，我发现它引入了一个叫做 exif.js 的库来实现旋转角度的纠正，它提供了js读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。而拍照方向就是关键所在！
exif.js 获取图像的拍照方向的代码如下：
EXIF.getData(IMG_FILE, function () { // IMG_FILE为图像数据
var orientation = EXIF.getTag(this, "Orientation");
console.log("Orientation:" + orientation); // 拍照方向
});
获取拍照方向的结果为1-8的数字：
拍照方向信息
注意：对于上面的八种方向中，加了*的并不常见，因为它们代表的是镜像方向，如果不做任何的处理，不管相机以任何角度拍摄，都无法出现镜像的情况。
这个表格代表什么意义？我们来看第一行，值为1时，右边两列的值分别为：Row #0 is Top，Column #0 is Left side，其实很好理解，它表示照片的第一行位于顶端，而第一列位于左侧，那么这张照片自然就是以正常角度拍摄的。
而这8种结果，就是第一行与第一列所在的位置的8种组合。
那么，我们来测试一下iOS手机横着拍的照片，来看看它的拍照方向是什么呢？
测试1
结果是1，即以正常角度拍摄的，其实也就是原图啦~
那么，我们再测试一下iOS手机竖着拍的照片，来看看它的拍照方向是什么呢？
测试2
原来是6！即第一行位于右侧，第一列位于顶端，其实相当于将照片顺时针旋转了90度！
所以，实际上iOS手机竖着拍出的照片与横着拍出的照片其本质上是一样的，只不过竖着拍出的照片被添加了一个顺时针旋转90°的拍照方向，所以显示的时候，就变成了上下边窄左右边宽的状态，其实也就是横着拍的照片顺时针旋转90°而成的~
那么明白了这些，文章开头所说的照片旋转bug的原因，也就很简单啦~
其实就是当我们在前端对图片进行像素处理或者drawInRect等操作之后，照片的Orientaion信息，即为拍照方向信息被删除了，所以iOS手机竖着拍的照片又回到了横着的状态，看起来也就是逆时针旋转了90°！
那么如何纠正这个旋转角度呢？
其实思路也很简单：在处理图片之前，先读取并保存图片的拍照方向信息，然后在处理图片之后，再根据拍照方向，对图片进行相应的调整，lrz.js 中的代码如下：
switch (orientation) {
case 3:
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 6:
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 8:
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
case 2:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0, resize.width, resize.height);
break;
case 4:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 5:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 7:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
default:
ctx.drawImage(img, 0, 0, resize.width,resize.height);
}
其中，translate是平移变换，scale(-1,1)是向左翻转，rotate是顺时针旋转。
举例说明 case 2，当图片的拍照方向为2时，即第一行位于顶端，而第一列位于右侧，其实相当于把照片进行了左右的翻转。所以，这里对图片的操作是，先向右平移等于图片宽度的距离，再向左翻转，这相当于以图片水平方向的对称轴为轴进行了左右翻转，然后再以（0，0）为起始点绘制原宽高的图片，即完成了对拍照方向的纠正。
最后
经过一系列的测试，发现确实只有iOS手机的竖拍照片与横拍照片是通过拍照方向来区别的，Android手机无论竖拍还是横拍的照片，拍照方向都为1，也就是说即使丢失了拍照方向这一信息，也不会影响到图片的旋转角度。而手机或电脑的屏幕截图、网络上的图片、通过PS制作的图片等也是如此。
作者：任无名F
链接：http://www.jianshu.com/p/ad4501db178e
来源：简书
着作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
㈢ 前端把图片压缩转换成base64编码把值赐予input='hidden' 之后提交给后台. HTML5,PHP,javascript,canvas
缺点你无法直接验证传来的base64数据的完整性，比如大小，文件头之类的，还需要自己来实现。
㈣ html5 base64 存储图片
http://www.html5china.com/HTML5features/canvas/20120520_3719.html
㈤ 怎样将html5中利用canvas绘制的图像在服务端保存为图片
首先你得搞明白为什么需要Base64这个东西，Base64的主要应用场景就是把二进制（Binary）的内容通过一个映射转换到可以用ASCII字符表达的字符串，然后便于使用HTTP协议在客户端和服务器端传输数据。所以，关键的一部你做的有些问题
byte[] bytes=decoder.decodeBuffer(s);
这里解码出来的byte[]已经是你的图片内容了，这些byte不可能再成功的构造成字符串了，否则为何还需要用Base64啊。所以，你需要保存的是解码出来的byte[]，而不是Base64的字符串。
另外，Base64的编解码器，你用的那个BASE64Decoder是sun.misc提供的，为了确保最大化的兼容，比如运行在非Sun JVM的环境时，建议使用apache的common-codec。
㈥ JAVA压缩至32K以下后的图片base64码
Java实现图片与Base64编码互转
importjava.io.FileInputStream;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.io.InputStream;
importjava.io.OutputStream;
importsun.misc.BASE64Decoder;
importsun.misc.BASE64Encoder;
publicclassBase64Image{
publicstaticvoidmain(String[]args){
//测试从Base64编码转换为图片文件
StringstrImg="自己写哈";
GenerateImage(strImg,"D:\wangyc.jpg");
//测试从图片文件转换为Base64编码
System.out.println(GetImageStr("d:\wangyc.jpg"));
}
publicstaticStringGetImageStr(StringimgFilePath){//将图片文件转化为字节数组字符串，并对其进行Base64编码处理
byte[]data=null;
//读取图片字节数组
try{
InputStreamin=newFileInputStream(imgFilePath);
data=newbyte[in.available()];
in.read(data);
in.close();
}catch(IOExceptione){
e.printStackTrace();
}
//对字节数组Base64编码
BASE64Encoderencoder=newBASE64Encoder();
returnencoder.encode(data);//返回Base64编码过的字节数组字符串
}
(StringimgStr,StringimgFilePath){//对字节数组字符串进行Base64解码并生成图片
if(imgStr==null)//图像数据为空
returnfalse;
BASE64Decoderdecoder=newBASE64Decoder();
try{
//Base64解码
byte[]bytes=decoder.decodeBuffer(imgStr);
for(inti=0;i<bytes.length;++i){
if(bytes[i]<0){//调整异常数据
bytes[i]+=256;
}
}
//生成jpeg图片
OutputStreamout=newFileOutputStream(imgFilePath);
out.write(bytes);
out.flush();
out.close();
returntrue;
}catch(Exceptione){
returnfalse;
}
}
}
㈦ 如何通过html5调用摄像头拍照
ios拍照默认是旋转的，有个exif的插件是专门解决这个问题的。js版连接:网页链接，里面有使用教程。通过这个判断照片的旋转角度之后，可以把它旋转过来再保存，教程：网页链接。如果只有预览需求，直接旋转容器进行显示也是可以的。
㈧ 如何获取html里<object>标签视频图片的base64值
要实现这个功能，要使用canvas来做，Canvas里面提供了一个toDataURL的接口，可以用这个接口获得图片的base64
所以思路是：
获得canvas对象
加载图片到canvas对象里面
从canvas对象中获取base64数据
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body><scripttype="text/javascript">
functiongetBase64Image(img){
varcanvas=document.createElement("canvas");
canvas.width=img.width;
canvas.height=img.height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,img.width,img.height);
vardataURL=canvas.toDataURL("image/png");
returndataURL
//returndataURL.replace("data:image/png;base64,","");
}
functionmain(){
varimg=document.createElement('img');
img.src='./images/yeoman.png';
img.onload=function(){
vardata=getBase64Image(img);
console.log(data);
}
document.body.appendChild(img);
}
main()
</script></body>
</html>
然后可以在控制台看到base64的数据
希望可以帮到你
㈨ 怎么在前端生成缩略图，只上传缩小后的图片
需要浏览器支持html5。
用FileReader读取本地文件，再用Image加载此文件并缩放绘制到canvas上。最后canvas.ToDataURL()取得缩放后文件的Base64编码，将此编码上传到服务端，解码为byte[]后，写入文件。
㈩ java怎么接收html5的base64
<img src="data:image/png;base64,图片base64编码"/>
前端显示的时候这样显示就好了
至于后台接收，这个编码就是一个字符串，用String 接收就好了