微信、支付宝、百度（drawImage及canvasGetImageData、支付宝（getImageData））踩坑，uni-app 获取图片底色像素值

Li_Ning21

已于 2024-03-12 14:04:13 修改

阅读量1.9k

点赞数

文章标签：微信 uni-app

于 2022-11-21 13:43:15 首次发布

本文链接：https://blog.csdn.net/Li_Ning21/article/details/127961166

版权

本文介绍了在微信、支付宝、百度小程序中使用uni-app获取图片底色像素值的过程，强调了踩坑经历。通过drawImage在canvas上绘制图片，然后利用canvasGetImageData或getImageData获取像素数据。微信端需指定canvas-id，支付宝端图片需转为base64，百度端drawImage参数顺序与其它两端不同，并需额外处理像素对象。

摘要由CSDN通过智能技术生成

数不尽的坑，其实都是自己没有耐心每端小程序去阅读api导致。

首先以微信实现为例，this.saveImgPath为当前选中图片地址。（选中图片部分就不赘述了，uni.chooseImage。自行查阅）

基本思路，将选中的图片，通过各端drawImage绘制到canvas中，然后获取截图部分canvasGetImageData（采用图片（10,10）作标点的像素）

在这里插入图片描述

微信端

canvas取 canvas-id，
drawImage参数为
drawImage(String imageResource, Number sx, Number sy, Number sWidth, Number sHeight，Number dx, Number dy, Number dWidth, Number dHeight)
调用uni.canvasGetImageData，获取像素数组（一维）

支付宝端
4. canvas取 id，
5. drawImage参数为
drawImage(String base64, Number sx, Number sy, Number sWidth, Number sHeight，Number dx, Number dy, Number dWidth, Number dHeight) 注意，图片为base64
6. 调用canvas的实例方法getImageData，获取像素数组（一维）

百度端
7. canvas取 canvas-id，
8. drawImage参数为
drawImage(String imageResource, Number dx, Number dy, Number dWidth, Number dHeight，Number sx, Number sy, Number sWidth, Number sHeight)
9. 调用uni.canvasGetImageData，获取像素对象（一维）需用Array.from(colors)处理

<template>
    <view style="height: 100vh;width: 100vw;position: fixed; left: 200%">
      <!-- #ifndef MP-ALIPAY -->
      <canvas canvas-id="image-canvas" style="width:100%;height: 100%;"></canvas>
      <!-- #endif -->