首页 > 代码库 > 移动端图片优化技巧 canvas代替image

移动端图片优化技巧 canvas代替image

通常来讲,移动端展示一张图片是用浏览器来渲染的,如果图片过大,手机性能不太好的情况下,手机会显示比较卡。

原因是没有处罚设备本身的GPU来渲染,可以使用canvas触发GPU来渲染图片。

使用 drawImage()方法

如:

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img= new Image();
img.src = http://www.mamicode.com/url;
img.onload = funciton (){
  ctx.drawImage(img,0,0);
}
 

移动端图片优化技巧 canvas代替image