jQuery(function ($) {
$("img").load(function () {
var w = $(this).width(),
h = $(this).height();
$(this).after($(" ").css({"width": w, "height": h, "backgroundColor": "blue"}));
var ctx = $(this).next("canvas")[0].getContext("2d");
ctx.drawImage($(this)[0], 0, 0, w, h);
});
});
drawImage出来的图片尺寸变形,不是原来图片的形状,会看到canvas背景蓝色。
回复讨论(解决方案)
请问你用的是什么浏览器呀???我用的chrome opera ie9貌似都没有你说的问题
.after($(" ")
canvas的实际宽高(canvas代码种实际参考的大小) 要这样设置 否则默认是 300-150
样式里面的 宽高 代表 渲染大小
实际宽高 和 样式 宽高 不一致 就会拉伸了
canvas画布的尺寸没问题,用drawImage画出来的图片与源img节点尺寸不一样
canvas里面的width和height跟css里面的width和height是不一样的,我以前就被坑过。。 统一用canvas.width比较好,画板的坐标神马的跟这个width是一样的,跟css里面的不一样
canvas画布的尺寸没问题,用drawImage画出来的图片与源img节点尺寸不一样
2楼已经和你说的很清楚了
谢了各位,解决了
怎么解决的呀,也碰到了同样的问题,望楼主告知下解决的方法哦!!
怎么解决的呀,也碰到了同样的问题,望楼主告知下解决的方法哦!!
canvas的width和height要设置成属性而不是样式
就是这种
不是 和 canvas {width: 400px; height: 300px;}
原来如此。。。。 坑了我好久。。。。
查看更多关于canvas、drawImage的问题,高手速进_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did103674