js使用canvas绘制高清图片
来源:互联网 发布:在线c语言教学系统 编辑:程序博客网 时间:2024/05/16 19:15
H5能使用canvas绘制图像,但是有些时候我们需要绘制高清的图片。
先介绍下几个定义:
什么是devicePixelRatio:
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels
(dips))的比例。 公式表示就是:window.devicePixelRatio = 物理像素 / dips
dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
如果devicePixelRatio > 1说明是高清屏幕了,现在的手机设备很多都是高清屏幕,我的手机devicePixelRatio 是2。
js代码
(function() { var img = null; //在需要绘制的图片放在方法外定义,如果一个画板多次绘制时,不会出现闪屏的问题。 var w = 0, h = 0 ; //图片显示的宽高 var ratio = 1 ; //devicePixelRatio值 var ratio_w = 0, ratio_h = 0; //绘制高清图片宽高 var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); $("#drawImg").each(function() { //只有当屏幕宽度变化和img对象为空时候才进行一次初始化参数 if(img == null || w != window.innerWidth) { ratio = getPixelRatio(ctx); //获取设备的devicePixelRatio w = window.innerWidth; //获取设备的显示屏幕宽高 h = this.height * (window.innerWidth / this.width); //图片加载完this.height才大于0. ratio_w = canvas.width = w * ratio; //计算屏幕的高清图片的宽高,同时设置画板的像素 ratio_h = canvas.height = h * ratio; img = new Image(ratio_w, ratio_h); //多次创建imgae绘制会闪屏 //这个是重点,我们需要把canvas画板通过css样式控制显示高度 $("#canvas").css({ width: (w + 'px'), height: (h + 'px') }); } img.src = "images/foo.png"; //只有在load完成才会进行绘制。所以绘制需要写在onload事件中 img.onload = function() { ctx.clearRect(0, 0, ratio_w, ratio_h); //清除画板,不清除图像会覆盖。 ctx.drawImage(img, 0, 0, ratio_w, ratio_h); //绘制高清图片 } }); //获取设备的devicePixelRatio function getPixelRatio(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return(window.devicePixelRatio || 1) / backingStore; };})()
html代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> </head> <body> <img id="drawImg" src="images/foo.png" style="display: none;"/> <canvas id="canvas"></canvas> <script type="text/javascript" src="js/star.js" ></script> </body></html>
绘制成功,我们看下看html的canvas代码,style中的高宽是属性中的高宽的50%,因为设备的devicePixelRatio为2。也就是说,画板像素就是图片像素大小,但是显示大小为屏幕大小
0 0
- js使用canvas绘制高清图片
- 使用html5 canvas绘制图片
- android中Canvas使用drawBitmap绘制图片
- android中Canvas使用drawBitmap绘制图片
- android中Canvas使用drawBitmap绘制图片
- android中Canvas使用drawBitmap绘制图片
- 使用canvas绘制股票图【envision.js】
- canvas 绘制图片
- canvas 绘制半透明图片
- canvas绘制图片详解
- Canvas绘制图片模糊
- Canvas绘制图片
- 高清图片搜索引擎
- android使用Canvas在图片上绘制文字
- Android 使用Canvas中的drawBitmap方法绘制拉伸的图片
- Android 使用Canvas在图片上绘制文字
- JS使用canvas给图片打马赛克
- 使用canvas绘制时钟
- 应用程序使用RAW socket从内核中抓取指定协议的数据包流程分析;
- css负边距可以实现的布局(上)左固定右自适应,多行多列,等高布局
- Kinect开发学习笔记之(七)骨骼数据的提取
- 细节缺陷createPreparedCellForItemAtIndexPath:withLayoutAttributes:applyAttributes:isFocused
- HDU 4614 Vases and Flowers
- js使用canvas绘制高清图片
- 二叉树的常见面试题(1)
- em 重新安装
- hdu 2819 Swap 二分图匹配 匈牙利算法 解题报告
- 移动端定义字体
- wemall商城系统源码普通版,使用说明
- 出栈序列判定
- Kinect开发学习笔记之(八)彩色、深度、骨骼和用户抠图结合
- Loadrunner http JSON接口请求进行测试