在canvas中使用二进制
二进制在canvas画布中又有哪些应用呢? 一、准备工作首先,我们需要在canvas上做个图,先简单的来。首先,我们先来创建个100*100,背景是黑色的canvas, <canvas width="100" height="100" id="canvas"></canvas> var oCanvas = document.getElementById('canvas'); var ctx = oCanvas.getContext('2d'); ctx.fillRect(0,100,100); 二、获取某块的颜色值canvas已经提供了一个可以获取图像的像素数据的接口,getImageData()方法,该方法返回一个ImageData 对象,该对象拷贝了画布指定矩形的像素数据。 比如我们获取左上角10px*10px的像素数据, ctx.getImageData(0,10,10); data属性存放的是图像的像素信息,他从图像的左上角依次向右并换行的方式,列出了rgba的十进制值,所以10 * 10 * 4(个)=400,此data长度才是400,当然这儿的a与css中的rgba中的a不同,此处颜色值都是从0-255的。 height和width则是图像的宽高像素值。 三、整张转化blob此处使用到了canvas的toBolb()方法和fileReader。 语法canvas.toBlob(callback,type,encoderOptions);
我们将整张图片转化下, canvas.toBlob(function(blob) { ????var reader = new FileReader(); // blob转Uint8Array reader.onload = function (e) { var buf = new Uint8Array(this.result); console.info(buf); // 转化后的数据 } reader.readAsArrayBuffer(blob); }); 此时就得到整个图片的二进制数据了,如果后端需要前端传二进制数据,那么可以直接发送数据了。 四、直接保存成图片这个以前也写过了,再来一次。此功能主要是用到了canvas的toDataURL方法,具体用法可以查看http://www.zhuyuntao.cn/2017/03/10/canvas保存图片到本地/或者MDN的toDataURL。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |