网站后台添加关键词,京创影视app,有什么好的网站查做外贸出口的企业,设计图片的app软件uni.canvasGetImageData
返回一个数组#xff0c;用来描述 canvas 区域隐含的像素数据#xff0c;在自定义组件下#xff0c;第二个参数传入自定义组件实例 this#xff0c;以操作组件内 组件。
// 获取目标 canvas 的像素信息 pixelData
let canvas uni.createSelector…
uni.canvasGetImageData
返回一个数组用来描述 canvas 区域隐含的像素数据在自定义组件下第二个参数传入自定义组件实例 this以操作组件内 组件。
// 获取目标 canvas 的像素信息 pixelData
let canvas uni.createSelectorQuery().select(.signature__canvas)
canvas.boundingClientRect().exec(function (data) {let canvasw Math.ceil(data[0].width)let canvash Math.ceil(data[0].height)uni.canvasGetImageData({width: canvasw,height: canvash,canvasId: canvas_sign,x: 0,y: 0,success: function (pixelData) {console.log(pixelData)},fail: (err) {console.log(canvas 区域隐含的像素数据失败, err)},})
})此处获取像素信息传入 x0y0widthcanvas宽度heightcanvas高度获取到整个画布所有的像素点信息 如图是 pixelData 的打印 注意里面的 Uint8ClampedArray 的长度808752此值是 width812* height249* 4 得出来的 为什么是 *4 cannvas 的 imagedata 数据是一个由 RGBA 构成的数组每四个值包含一个像素点的信息RGBA R - 红色0-255、G - 绿色0-255、B - 蓝色0-255、A - alpha 通道0-255; 0 是透明的255 是完全可见的 所以imagedata 实际上是 R G B A R G B A … 的一个数组
判断像素点是否有值
简单来讲如果是4*3的12个像素点中间两个像素点有值的情况下 程序判断有值无值需要先从第一行开始从第一列开始也可以看第一行第一个有没有第一行第二个有没有。。。依此看下去第一行看完了看第二行。。。
const pixelDataWidth pixelData.width
const pixelDataHeight pixelData.height
for (var x 0; x pixelData.width; x) {for (var y 0; y pixelData.height; y) {var i (x * pixelData.width y) * 4// 每个像素判断 rgba 是否有值则认为有数据if (pixelData.data[i] ! 0 || pixelData.data[i 1] ! 0 || pixelData.data[i 2] ! 0 || pixelData.data[i 3] ! 0) {// ...}}
}我们通过上面循环能够知道哪个像素点有值了之后就能得出一个边界值 startX、startY、endX、endY startX 为最偏左的点的 XstartY 为最偏上的 YendX 为最偏右的 XendY 为最偏下的 Y
// startX 和 startY 为取小逻辑即有值坐标比初始坐标小则将 startX 和 startY 赋值
var startX pixelData.width 1
var startY pixelData.height 1
// endX 和 endY 为取大逻辑即有值坐标比初始-1-1大则将 endX 和 endY 赋值
var endX -1
var endY -1if (startX x) startX x
if (startY y) startY y
if (endX x) endX x
if (endY y) endY y这样我们就得到了startX、startY、endX、endY
uni.canvasToTempFilePath
uni.canvasToTempFilePath({x: 100, // 画布x轴起点默认0y: 200, // 画布y轴起点默认0width: 50, // 画布宽度默认为canvas宽度-xheight: 50, // 画布高度默认为canvas高度-ydestWidth: 100, // 输出图片宽度默认为 width * 屏幕像素密度destHeight: 100, // 输出图片高度默认为 height * 屏幕像素密度canvasId: myCanvas,success: function(res) {// 在H5平台下tempFilePath 为 base64console.log(res.tempFilePath)}
})x: startX,
y: startY,
width: endX - startX,
height: endY - startY,
destWidth: endX - startX,
destHeight: endY - startY,按照上面的 x、y、width。。。输出即可
