18:27 提问
毛玻璃效果，在微信里面不支持安卓怎么解决
图片模糊，ios可以
我是做微信这方面的，用的css3方法，可是安卓不支持，怎么办
按赞数排序
微信自带浏览器，在电脑上用IE6调一下，如果可以应该就可以了。
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐移动端上传照片 预览+draw on Canvas demo（解决iOS等设备照片旋转90度的bug）
时间： 23:02:45
&&&& 阅读：3793
&&&& 评论：
&&&& 收藏：0
本人的一个移动端H5项目，需求如下:
手机相册选取或拍摄照片后在页面上预览
然后绘制在canvas画布上。
这里，我们先看一个demo（）
操作步骤：
1、点击选择文件，拍摄一张照片，此时"预览："文字下会显示你刚才拍摄的照片；
2、再点击"draw on Canvas"，该按钮下的画布会绘制你刚才拍摄的照片。
正常的结果：
让input file支持拍照+相册选取
&input accept="image/*" type="file" id="file" /&
//有一些特殊的安卓机还需要加上 capture="camera" 属性才能支持拍照
需求一的预览功能使用html5提供的新API：FileReader
FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
主流浏览器都支持。除了IE有点问题，详情看下图：
&&&&使用方法（使用drawTempPhoto方法实现需求一）：
//绘制照片
function drawTempPhoto() {
&&&&//检验是否为图像文件
&&&&var file = document.getElementById("file").files[0];
&&&&if (!/image\/\w+/.test(file.type)) {
&&&&&&&&alert("看清楚哦，这个需要图片！");
&&&&&&&&return false;
&&&&var reader = new FileReader();
&&&&//将文件以Data URL形式读入页面
&&&&reader.readAsDataURL(file);
&&&&reader.onload = function (e) {
&&&&&&&&//预览效果
&&&&&&&&var img = $("#photo")[0];
&&&&&&&&//加载图片，此处的this.result为base64格式
&&&&&&&&img.src = this.
在本人的三星note5的手机中，需求一会出现照片预览逆时针旋转90度的bug（其实用下面介绍的的exif.js方法，可以知道iOS和三星所拍的照片Orientation值都是6，而前者做了预览的修正，后者则直接显示了出来，导致了旋转）。
判断是否为三星手机设备，然后把预览的图片顺时针旋转90度恢复正常（例如可以用canvas技术模拟预览效果）。
于是修改的drawTempPhoto方法如下（line：21-27）：
//绘制照片
&&&&function drawTempPhoto() {
&&&&&&&&//检验是否为图像文件
&&&&&&&&var file = document.getElementById("file").files[0];
&&&&&&&&if (!/image\/\w+/.test(file.type)) {
&&&&&&&&&&&&alert("看清楚哦，这个需要图片！");
&&&&&&&&&&&&return false;
&&&&&&&&var reader = new FileReader();
&&&&&&&&//将文件以Data URL形式读入页面
&&&&&&&&reader.readAsDataURL(file);
&&&&&&&&reader.onload = function (e) {
&&&&&&&&&&&&//预览效果
&&&&&&&&&&&&var img = $("#photo")[0];
&&&&&&&&&&&&//加载图片，此处的this.result为base64格式
&&&&&&&&&&&&img.src = this.
&&&&&&&&&&&&img.onload = function(){
&&&&&&&&&&&&&&&&//获取照片的拍摄方向
&&&&&&&&&&&&&&&&var orient = getPhotoOrientation(img);
&&&&&&&&&&&&&&&&alert("orient1:" + orient);
&&&&&&&&&&&&&&&&//判断是否是三星手机
// if (isSamsung) {
// 做旋转的适配&&
&&&&&&&&&&&&};
需求二绘制到Canvas，使用exif.js解决iOS（包括三星note5）等一些手机照片旋转90度的bug
在iOS上，表现如下：
可见，在iOS上第一张图正常，而第二张图逆时针旋转了90度，而其他的安卓两步都是正常的显示。
那我们来看看exif.js是什么？
Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
EXIF 数据主要来自拍摄的照片，多用于移动端开发，PC 端也会用到，此插件兼容主流浏览器，IE10 以下不支持。
下载地址：
这里我们知道了exif.js其实是获取一张拍摄照片的元信息的，进而获取它最初的拍照方向，这很可能跟iOS图片旋转的bug有关。
而exif.js提供的一张照片的Orientation属性如下：
解决方案：
1、我首先引入exif.js：
&script src="./js/exif.js"&&/script&
2、然后封装成getPhotoOrientation方法：
//获取照片的元信息（拍摄方向）
function getPhotoOrientation(img){
&&&&EXIF.getData(img, function () {
&&&&&&&&orient = EXIF.getTag(this, ‘Orientation‘);
&&&&return
3、分别在操作步骤一选择图片和操作步骤二draw on Canvas，Alert照片的Orientation值，本人的测试机有限，请见谅，结果如下：
Orientation值
华为荣耀4A
可以看到，小米4S和PC都是undefined，表示图片没有拍摄方向或者根本没记录，华为荣耀4A是1，表示的是正确的方向，以上都没问题。但iphone 6S为6！所以之所以出现了图片的旋转，是因为它本身的Orientation就不正常！！
因此解决这个bug的思路是：获取到照片拍摄的方向，对ios照片进行角度旋转修正。
修改的demo如下：http://jsfiddle.net/qz5ev26/embedded/
除了上面引入的exif.js和添加的getPhotoOrientation方法，我又修改了drawPhoto方法：
①旧drawPhoto方法：
//绘制照片
function drawPhoto(photo, x, y, w, h) {
&&&&var canvas = document.getElementById("canvas");
&&&&if (canvas.getContext) {
&&&&&&&&var ctx = canvas.getContext("2d");
&&&&&&&&//draw on Canvas
&&&&&&&&var img = new Image();
&&&&&&&&img.onload = function () {
&&&&&&&&&&&&var canvas_w = Number(ctx.canvas.width);
&&&&&&&&&&&&var canvas_h = Number(ctx.canvas.height);
&&&&&&&&&&&&// 执行Canvas的drawImage语句
&&&&&&&&&&&&ctx.drawImage(img, x, y, w, h);
&&&&&&&&img.src = photo. // 设置图片源地址
②新drawPhoto方法：（line：4-6，19-30）
//绘制照片
function drawPhoto(photo, x, y, w, h) {
&&&&//获取照片的拍摄方向
&&&&var orient = getPhotoOrientation(photo);
&&&&alert("orient2:"+orient);
&&&&var canvas = document.getElementById("canvas");
&&&&if (canvas.getContext) {
&&&&&&&&var ctx = canvas.getContext("2d");
&&&&&&&&//draw on Canvas
&&&&&&&&var img = new Image();
&&&&&&&&img.onload = function () {
&&&&&&&&&&&&var canvas_w = Number(ctx.canvas.width);
&&&&&&&&&&&&var canvas_h = Number(ctx.canvas.height);
&&&&&&&&&&&&//判断图片拍摄方向是否旋转了90度
&&&&&&&&&&&&if (orient == 6) {
&&&&&&&&&&&&&&&&ctx.save();//保存状态
&&&&&&&&&&&&&&&&ctx.translate(canvas_w / 2, canvas_h / 2);//设置画布上的(0,0)位置，也就是旋转的中心点
&&&&&&&&&&&&&&&&ctx.rotate(90 * Math.PI / 180);//把画布旋转90度
&&&&&&&&&&&&&&&&// 执行Canvas的drawImage语句
&&&&&&&&&&&&&&&&ctx.drawImage(img, Number(y) - canvas_h / 2, Number(x) - canvas_w / 2, h, w);//把图片绘制在画布translate之前的中心点，
&&&&&&&&&&&&&&&&ctx.restore();//恢复状态
&&&&&&&&&&&&} else {
&&&&&&&&&&&&&&&&// 执行Canvas的drawImage语句
&&&&&&&&&&&&&&&&ctx.drawImage(img, x, y, w, h);
&&&&&&&&&&&&}
&&&&&&&&img.src = photo. // 设置图片源地址
运行结果如下：
完美~标签：原文地址：http://www.cnblogs.com/xjnotxj/p/5576073.html
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
代码如下：
&canvas id="myCanvas" width="800" height="800" style="display:"&&/canvas&
&script type="text/javascript"&
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(400,400);
ctx.lineWidth=2;
ctx.strokeStyle= "#ff0000";
ctx.stroke();
效果如下图所示：
图1 如下图所示是微信端的效果(安卓手机有问题，苹果手机没有问题)，
图2 如下图所示是其他浏览器的效果，包括在qq中打开
来源: 微信开放平台问答
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
感觉是你canvas的位置不对，设置html body canvas 的padding margin 都为0 试试
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
感觉微信那边是放大了一样，确定没有缩放页面？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
遇到同样的问题，canvas缩放在iOS上没有问题，在Android微信中打开不能横向缩放，在Android手机上各种浏览器上是正常的，在PC端上用chrome测试也是正常的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不是安卓和苹果的问题，是屏幕像素比的问题，用window.devicePixelRatio获取到你手机屏幕的像素比，然后对应比例来设置canvas里的参数，而且直接用canvas画图，会很模糊，怎么解决呢，我从网上查阅了一下，自己写了一个函数，你看下
function CanvalHD(canvasThis,ctxThis){
(function (canvas, ctx) {
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStorePixelR
if (devicePixelRatio !== backingStorePixelRatio) {
var oldWidth = canvas.
var oldHeight = canvas.
canvas.width = oldWidth *
canvas.height = oldHeight *
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
ctx.scale(ratio, ratio);
})(canvasThis, ctxThis);
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。IE下使用excanvas.js之后，动态创建的canvas不支持getContext的解决方法引入excanvas.js以后，在ie下，文档中的canvas就可以用了，但是如果是通过createElement方法创建的就不行了var canvas=document.createElement(&canvas&);if(canvas.getContext){alert(&support getContext()&);}这段代码在ie下不工作，于是把google搞的这个让ie支持canvas的代码大概地读了一遍，知道了是怎么回事。将代码放到aptana里面看，10分钟不到，785行代码，还不错，我想，这得益于之前仔细看过犀牛书前面js core部分7遍以及对canvas和vml的了解吧。
原来，加载并执行excanvas.js这个脚本代码的时候，G_vmlCanvasManager_.init();这句语句遍历了页面中所有的canvas元素，然后初始化这些元素，亦即是将标准canvas的那些个方法赋予ie下的canvas：var els = doc.getElementsByTagName(&canvas&);for (var i = 0; i & els. i++) {if (!els[i].getContext) {this.initElement(els[i]);}}如果是文档原来就有的canvas标签，那就没有问题，这段脚本将找到的canvas元素作为参数传递给G_vmlCanvasManager_.initElement()这个方法。但是通过createElement方法创建的canvas就不行了，因为调用这段脚本的时候，后来新创建的canvas元素还没有被它找到。那么，解决办法就是新创建了一个canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。
但是，G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的，我在全局范围下就没有办法引用到，还好，在excanvas.js文件的后面，有一句语句，G_vmlCanvasManager = G_vmlCanvasManager_;由于js的函数中，如果一个变量不通过var来定义，那么就会把这个变量当作一个全局变量，好啦，现在有一个全局变量来引用它了。那么，下面是解决问题的代码：$(function(){var canvas=document.createElement(&canvas&);document.body.appendChild(canvas);if($.browser.msie){canvas=window.G_vmlCanvasManager.initElement(canvas);}if(canvas.getContext){alert(&support&);}});这里我用了jquery，在DOM ready以后才执行这段脚本。另外，记得canvas=window.G_vmlCanvasManager.initElement(canvas);之前要将新创建好的canvas追加到文档流中：document.body.appendChild(canvas);
阅读(...) 评论()如何解决html2canvas不支持css3_百度知道
如何解决html2canvas不支持css3
我有更好的答案
/script&;if (!/canvas& &lt有以下两种方法可以判断浏览器是否支持html5：方法一：&script&
function checkhHtml5() {
if (typeof(Worker) ;script&&lt.getElementById(&Canvas&).getContext){alert(&不支持html5&);
}else{alert(&quot!== &undefined&canvas id=&quot：&支持HTML5&);
alert(&不支持HTML5&);
&lt。方法二;&支持html5&);
} &/Canvas&script&) {
alert(&quot
改变中国IT教育，我们正在行动
主营：IT教育/IT培训
canvas和css3有什么关系么
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。