OpenHarmony开发实战：图片编辑（JS）

已于 2024-04-10 17:58:48 修改
阅读量957 收藏 28
点赞数 7
分类专栏： 鸿蒙 OpenHarmony 文章标签： harmonyos android 鸿蒙 OpenHarmony 前端
于 2024-04-10 17:51:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137605330
版权

本篇Codelab基于canvas组件、图片编解码，介绍了图片编辑实现过程。主要包含以下功能：

  1. 图片的解码和绘制。
  2. 使用PixelMap进行图片编辑，如裁剪、旋转、亮度调节、透明度调节、饱和度调节等操作。

相关概念

  • canvas组件：提供画布组件。用于自定义绘制图形。
  • 图片处理：提供图片处理效果，包括通过属性创建PixelMap、读取图像像素数据、读取区域内的图片数据等。

相关权限

本篇Codelab使用了媒体文件存储能力，需要在配置文件config.json里添加媒体文件读写权限：

  • ohos.permission.MEDIA_LOCATION
  • ohos.permission.READ_MEDIA
  • ohos.permission.WRITE_MEDIA

环境搭建

软件要求

  • DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
  • OpenHarmony SDK版本：API version 9及以上版本。

硬件要求

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

  2. 搭建烧录环境。

    1. 完成DevEco Device Tool的安装
    2. 完成RK3568开发板的烧录

  3. 搭建开发环境。

    1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
    3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。

├──entry/src/main/js	              // 代码区
│  └──MainAbility
│     ├──common
│     │  ├──bean
│     │  │  └──messageItem.js         // 多线程封装消息
│     │  ├──constant
│     │  │  └──commonConstants.js     // 常量
│     │  ├──images                    // 图片资源
│     │  └──utils
│     │     ├──adjustUtil.js          // 饱和度、亮度调节工具
│     │     ├──imageUtil.js           // 图片获取、打包工具
│     │     ├──logger.js              // 日志工具             
│     │     ├──opacityUtil.js         // 透明度调节工具
│     │     └──rotateUtil.js          // 旋转工具
│     ├──i18n		                  // 国际化中英文
│     │  ├──en-US.json			
│     │  └──zh-CN.json		
│     ├──model
│     │  └──cropModel.js              // 裁剪数据处理
│     ├──pages
│     │  └──index
│     │     ├──index.css              // 首页样式文件	
│     │     ├──index.hml              // 首页布局文件
│     │     └──index.js               // 首页业务处理文件
│     ├──workers
│     │  ├──adjustBrightnessWork.js   // 亮度异步调节
│     │  └──adjustSaturationWork.js   // 饱和度异步调节
│     └──app.js                       // 程序入口
└──entry/src/main/resources           // 应用资源目录

图片解码

本章节将介绍如何将图片解码，并显示在canvas组件上。需要完成以下功能：

  1. 获取图片的PixelMap对象。
  2. 在canvas组件上绘制第一步获取的PixelMap对象。

在index.js文件的onInit生命周期中初始化canvas画布，具体有以下步骤：

  1. 调用imageUtil工具类的getImageFd方法，根据资源文件获取图片fd。
  2. 调用imageUtil工具类的getImagePixelMap方法，将获取的fd创建成图片实例，通过实例获取其PixelMap。
  3. 通过canvas id获取CanvasRenderingContext2D对象。
  4. 将获取的PixelMap绘制到canvas组件上。
// index.js
export default {
  onInit() {
    ...
    this.initCanvas().then(() => {
      this.postState = false;
    });
  },
  async initCanvas() {
    ...
    // 获取图片fd
    this.imageFd = await getImageFd(CommonConstants.IMAGE_NAME);
    // 获取图片pixelMap
    this.imagePixelMapAdjust = await getImagePixelMap(this.imageFd);
    ...
    // 获取canvas对象
    const canvasOne = this.$element('canvasOne');
    this.canvasContext = canvasOne.getContext('2d');
    ...
    // 在canvas组件上绘图
    this.drawToCanvas(this.imagePixelMapAdjust, this.drawImageLeft, this.drawImageTop,
      this.drawWidth, this.drawHeight);
  }
}

// imageUtil.js
export async function getImageFd(imageName) {
  let mResourceManager = await resourceManager.getResourceManager();
  let rawImageDescriptor = await mResourceManager.getRawFd(imageName);
  let fd = rawImageDescriptor?.fd;
  return fd;
}
export async function getImagePixelMap(fd) {
  let imageSource = image.createImageSource(fd);
  if (!imageSource) {
    return;
  }
  let pixelMap = await imageSource.createPixelMap({
    editable: true,
    desiredPixelFormat: CommonConstants.PIXEL_FORMAT
  });
  return pixelMap;
}

图片裁剪

本篇Codelab提供四种裁剪比例，全图裁剪、1：1裁剪、16：9裁剪、4：3裁剪。需要完成以下步骤实现裁剪功能：

  1. 根据裁剪比例，获取canvas画布上需要绘制的裁剪框宽高。
  2. 根据裁剪比例，获取原图需要裁剪的宽高。
  3. 根据第二步获取的原图需要裁剪的宽高，对图片进行裁剪。
  4. 根据裁剪后原图宽高，适配屏幕大小，重新绘制。

// index.js
export default {
  // 任意点击四种裁剪比例
  cropClick(clickIndex) {
    this.cropClickIndex = clickIndex;
    switch (clickIndex) {
      // 全图裁剪
      case CommonConstants.CropType.ORIGINAL:
        cropOriginal(this);
        break;
      // 1：1裁剪
      case CommonConstants.CropType.ONE_TO_ONE:
        cropSquareImage(this);
        break;
      // 16：9裁剪
      case CommonConstants.CropType.SIXTEEN_TO_NINE:
        cropRectangleImage(this);
        break;
      // 4：3裁剪
      case CommonConstants.CropType.FOUR_TO_THREE:
        cropBannerImage(this);
        break;
      default:
        break;
    }
    drawScreenSelection(this, this.canvasCropContext);
  }
}

以1：1裁剪为例，调用cropSquareImage方法，获取原图需要裁剪的宽高以及裁剪框的宽高。点击切换编辑类型或保存，调用cropDrawImage方法裁剪图片，最后适配屏幕重新绘制。

// cropModel.js
export function cropSquareImage(context) {
  ...
  let length = Math.min(context.originalImage.width, context.originalImage.height);
  // 原图需要裁剪的宽高
  context.cropWidth = length;
  context.cropHeight = length;
  let drawLength = Math.min(context.drawWidth, context.drawHeight);
  // 裁剪框宽高
  context.cropDrawWidth = drawLength;
  context.cropDrawHeight = drawLength;
}
export async function cropDrawImage(context) {
  ...
  let imagePixel = context.imagePixelMapAdjust;
  let diffX = (context.originalImage.width - context.cropWidth) / CommonConstants.HALF;
  let diffY = (context.originalImage.height - context.cropHeight) / CommonConstants.HALF;
  context.cropLeft = Math.floor(diffX * accuracy) / accuracy;
  context.cropTop = Math.floor(diffY * accuracy) / accuracy;
  // 裁剪图片
  await imagePixel.crop({ x: context.cropLeft, y: context.cropTop,
    size: {
      height: context.cropHeight,
      width: context.cropWidth
    }
  });
  // 裁剪后原图宽高
  context.originalImage.width = context.cropWidth;
  context.originalImage.height = context.cropHeight;
  context.imagePixelMapAdjust = imagePixel;
}

// index.js
// 选择裁剪框后，裁剪并适应屏幕显示
async crop() {
  await cropDrawImage(this);
  // 适配屏幕
  this.adjustSize();
  this.canvasCropContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  // 重新绘制
  this.drawToCanvas(this.imagePixelMapAdjust, this.drawImageLeft, this.drawImageTop, this.drawWidth,
    this.drawHeight);
  cropOriginal(this);
}

图片旋转

本篇Codelab提供逆时针旋转、顺时针旋转两种方式，每次旋转角度为90度。在index.html文件中，使用两个image组件实现逆时针旋转、顺时针旋转按钮。点击对应图片时，触发onclick事件并回调onRotate方法。

<!-- index.html -->
<div class="space-around-row adjust-width crop-height">
    <!-- 逆时针旋转 -->
    <image src="common/images/ic_anti_clockwise.png" class="edit-image" onclick="onRotate(-90)"></image>
    <!-- 顺时针旋转 -->
    <image src="common/images/ic_clockwise.png" class="edit-image" onclick="onRotate(90)"></image>
</div>

在index.js文件中，实现onRotate方法。根据方法入参angle，调用PixelMap接口提供的rotate方法，完成图片旋转功能。

// index.js
export default {
  // 点击逆时针旋转
  onRotate(angle) {
    let that = this;
    this.postState = true;
    rotate(this.imagePixelMapAdjust, angle, () => {
      that.exchange();
    });
  }
}
// rotateUtil.js
export async function rotate(pixelMap, angle, callback) {
  if (!pixelMap) {
    return;
  }
  await pixelMap.rotate(angle);
  callback();
}

图片色域调节

本篇Codelab的色域调节是使用色域模型RGB-HSV来实现的。

  • RGB：是我们接触最多的颜色空间，分别为红色（R）、绿色（G）和蓝色（B）。
  • HSV：是用色相H，饱和度S，明亮度V来描述颜色的变化
    • H：色相H取值范围为0°～360°，从红色开始按逆时针方向计算，红色为0°，绿色为120°，蓝色为240°。
    • S：饱和度S越高，颜色则深而艳。光谱色的白光成分为0，饱和度达到最高。通常取值范围为0%～100%，值越大，颜色越饱和。
    • V：明度V表示颜色明亮的程度，对于光源色，明度值与发光体的光亮度有关；对于物体色，此值和物体的透射比或反射比有关。通常取值范围为0%（黑）到100%（白）。

亮度调节

完成以下步骤实现亮度调节：

  1. 将PixelMap转换成ArrayBuffer。
  2. 将生成好的ArrayBuffer发送到worker线程。
  3. 对每一个像素点的亮度值按倍率计算。
  4. 将计算好的ArrayBuffer发送回主线程。
  5. 将ArrayBuffer写入PixelMap，重新绘图。

说明： 当前亮度调节是在UI层面实现的，未实现细节优化算法，只做简单示例。调节后的图片会有色彩上的失真。

// index.js
export default {
  // pixelMap转换ArrayBuffer及发送ArrayBuffer到worker，
  postToWorker(type, value, workerName) {
    let sliderValue = type === CommonConstants.AdjustId.BRIGHTNESS ? this.brightnessValue : this.saturationValue;
    this.workerInstance = new worker.ThreadWorker(workerName);
    const bufferArray = new ArrayBuffer(this.imagePixelMapAdjust.getPixelBytesNumber());
    this.imagePixelMapAdjust.readPixelsToBuffer(bufferArray).then(() => {
      let message = new MessageItem(bufferArray, sliderValue, value);
      this.workerInstance.postMessage(message);
      this.postState = true;
      // 收到worker线程完成的消息
      this.workerInstance.onmessage = this.updatePixelMap.bind(this);
      this.workerInstance.onexit = () => {
        if (type === CommonConstants.AdjustId.BRIGHTNESS) {
          this.brightnessValue = Math.floor(value);
        } else {
          this.saturationValue = Math.floor(value);
        }
      }
    });
  }
}
// AdjustBrightnessWork.js
// worker线程处理部分
workerPort.onmessage = function (event) {
  let bufferArray = event.data.buffer;
  let lastValue = event.data.lastValue;
  let currentValue = event.data.currentValue;
  let buffer = adjustImageValue(bufferArray, lastValue, currentValue);
  workerPort.postMessage(buffer);
}
// adjustUtil.js
// 倍率计算部分
export function adjustImageValue(bufferArray, last, cur) {
  return execColorInfo(bufferArray, last, cur, CommonConstants.HSVIndex.VALUE);
}

透明度调节

PixelMap接口提供了图片透明度调节的功能。拖动滑块调节透明度，回调setOpacityValue方法，获取需要调节的透明度，最后调用opacity方法完成透明度调节。

// index.js
export default {
  setOpacityValue(event) {
    let slidingOpacityValue = event.value;
    let slidingMode = event.mode;
    if (slidingMode === CommonConstants.SLIDER_MODE_END || slidingMode === CommonConstants.SLIDER_MODE_CLICK) {
      adjustOpacity(this.imagePixelMapAdjust, slidingOpacityValue).then(pixelMap => {
        this.imagePixelMapAdjust = pixelMap;
        this.drawToCanvas(this.imagePixelMapAdjust, this.drawImageLeft, this.drawImageTop,
          this.drawWidth, this.drawHeight);
        this.opacityValue = Math.floor(slidingOpacityValue);
      });
    }
  }
}
// opacityUtil.js
export async function adjustOpacity(pixelMap, value) {
  if (!pixelMap) {
    return;
  }
  pixelMap.opacity(parseInt(value) / CommonConstants.SLIDER_MAX_VALUE).catch(err => {
    Logger.error(`opacity err ${JSON.stringify(err)}`);
  });
  return pixelMap;
}

饱和度调节

饱和度调节与亮度调节步骤类似：

  1. 将PixelMap转换成ArrayBuffer。
  2. 将生成好的ArrayBuffer发送到worker线程。
  3. 对每一个像素点的饱和度值按倍率计算。
  4. 将计算好的ArrayBuffer发送回主线程。
  5. 将ArrayBuffer写入PixelMap，重新绘图。

说明： 当前饱和度调节是在UI层面实现的，未实现细节优化算法，只做简单示例。调节后的图片会有色彩上的失真。

// index.js
export default {
  // pixelMap转换ArrayBuffer及发送ArrayBuffer到worker，
  postToWorker(type, value, workerName) {
    let sliderValue = type === CommonConstants.AdjustId.BRIGHTNESS ? this.brightnessValue : this.saturationValue;
    this.workerInstance = new worker.ThreadWorker(workerName);
    const bufferArray = new ArrayBuffer(this.imagePixelMapAdjust.getPixelBytesNumber());
    this.imagePixelMapAdjust.readPixelsToBuffer(bufferArray).then(() => {
      let message = new MessageItem(bufferArray, sliderValue, value);
      this.workerInstance.postMessage(message);
      this.postState = true;
      // 收到worker线程完成的消息
      this.workerInstance.onmessage = this.updatePixelMap.bind(this);
      this.workerInstance.onexit = () => {
        if (type === CommonConstants.AdjustId.BRIGHTNESS) {
          this.brightnessValue = Math.floor(value);
        } else {
          this.saturationValue = Math.floor(value);
        }
      }
    });
  }
}
// adjustSaturationWork.js
// worker线程处理部分
workerPort.onmessage = function (event) {
  let bufferArray = event.data.buffer;
  let lastValue = event.data.lastValue;
  let currentValue = event.data.currentValue;
  let buffer = adjustSaturation(bufferArray, lastValue, currentValue)
  workerPort.postMessage(buffer);
}
// adjustUtil.js
// 倍率计算部分
export function adjustSaturation(bufferArray, last, cur) {
  return execColorInfo(bufferArray, last, cur, CommonConstants.HSVIndex.SATURATION);
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

 有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

蜀道山QAQ
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
华为harmonyos公测-OpenHarmony:https://repo.huaweicloud.com/harmonyos/os/2.0
07-01
OpenHarmony OpenHarmony介绍 OpenHarmony是HarmonyOS的开源版 由华为捐赠给开放原子开源基金会（OpenAtom Foundation）开源。 第一个开源版本支持在128KB~128MB的设备上运行 OpenHarmony源代码仅支持在Linux环境下...
OpenHarmony项目练习开发实战-用户名问题.docx
最新发布
06-03
OpenHarmony项目练习开发实战-用户名问题.docx
OpenHarmony实战开发-图片选择和下载保存案例。
m0_70749039的博客
04-15 935
本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。
OpenHarmony开发实战：图片编辑（ArkTS）
shudaoshanQAQ的博客
04-09 1255
本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了图片编辑实现过程
OpenHarmony开发实战：电子相册（ArkTS，这些年我所经历的所有面试英文
m0_61943758的博客
04-10 838
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
【鸿蒙学习必备】OpenHarmony 开发语言（ArkTS）常见问题汇总（建议收藏）
爱码小哥
04-10 1267
适用于：OpenHarmony 3.2 Beta5 API 9解决措施@Builder装饰的方法中使用了自定义组件，那么该方法每次被调用时，对应的自定义组件均会重新创建，普通方法中不使用@builder装饰，无法容纳自定义组件。适用于：OpenHarmony 3.2 Beta5 API 9解决措施定义个callback函数的样例，示例如下：定义回调函数// 页面中定义个2个参数,空返回的callback函数在使用时进行初始化赋值// callback函数初始化}}鸿蒙开发咨询、解答、项目实战。
OpenHarmony实战开发-图片解码(ArkTS)如何实现图片显示或图片处理。
2401_82546228的博客
05-15 976
图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG、ICO。
OpenHarmony开发实战：ArkTS基础知识(1)，面试怎么做自我介绍
2401_84166396的博客
04-13 1060
为了体现@Prop单向绑定功能，我们在ListItemComponent组件中添加了一个@Prop修饰的字段isSwitchDataSource，当通过点击改变ListItemComponent组件中isSwitchDataSource状态时，ListItemComponent作为List的子组件，并不会通知其父组件List刷新状态。我们使用条件渲染控制语句，创建的圆型文本组件。组件状态管理装饰器用来管理组件中的状态，它们分别是：@State、@Prop、@Link。2. 搭建烧录环境。
基于C和Python的OpenHarmony应用开发源码
04-05
本资源提供了一套基于C和Python语言的OpenHarmony应用开发源码。项目文件共242个，包括142个C源文件、86个头文件、5个mk文件、5个Python脚本以及相关的许可证、Makefile、Markdown文档和gn文件。该源码旨在帮助...
OpenHarmony轻量级驱动开发 -思维导图
02-07
OpenHarmony轻量级驱动开发 -思维导图
原创：OpenHarmony 3.2：OTA升级包制作脚本
08-02
原创：OpenHarmony 3.2：OTA升级包制作脚本
OpenHarmony开发实战：弹性布局（ArkTS(1)，2024年最新移动互联网app检测取证系统
m0_60388419的博客
04-10 881
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
ArkUI（ETS）openHarmony 自定义图片查看组件
maniuT的博客
03-21 1172
日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在ets中如何实现呢？今日分享的组件由subsampling-scale-image-view+swiper来实现深度缩放视图、图像显示、手势平移缩放双击等。此组件主要实现深度缩放视图、图像显示、手势平移缩放双击等。subsampling-scale-image-view：深度缩放视图、图像显示、手势平移缩放双。swiper图片轮播。setOrientation设置旋转角度。基本概念构建第一个ArkTS应用……
OpenHarmony实战开发-image、image-animator组件的使用。
m0_70749039的博客
04-01 678
OpenHarmony提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
JavaScript 6 图片处理
狗剩的专栏
10-17 624
function makevisible(cur,which){if (which==0)cur.filters.alpha.opacity=100elsecur.filters.alpha.opacity=20}onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">  
推荐一款图片编辑download的js插件
qq_37319220的博客
01-11 6613
该插件功能强大包含裁剪、绘画、添加文字、添加图形、添加图标、旋转、过滤器等，挺不错的推荐给大家 百度网盘地址 链接：https://pan.baidu.com/s/1mjK3DKs 密码：ue23
js操作像素实现图片编辑
brokenkay的博客
12-26 2961
基础概念 众所周知,图片是由一个个像素点组成.每一个像素点包含四个值,决定了渲染出来的状态.这四个值为rgba(red, green, blue, alpha). 前三个值是红绿蓝,值的大小范围从0到255,或者从0%到100%之间. 第四个值alpha,规定了色彩的透明度,它的范围为0到1之间.其中0代表完全透明,1代表完全可见. 红绿蓝是色彩中的三元色,通过设置这三种颜色所占的比重,可以变幻出其他所有颜色. 比如某个标签的文字想设置为红色,就可以通过css设置rgba值(代码如下). span {
OpenHarmony
12-27
此外，如果你想更进一步，你还可以基于OpenHarmony开源项目进行二次开发，开发出属于自己的操作系统。 OpenHarmony的项目地址为：[https://gitee.com/openharmony](https://gitee.com/openharmony)。你可以在该地址...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值