codecamp

图像变换

图片处理指对PixelMap进行相关的操作,如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、位图操作,本文介绍图像变换。

开发步骤

图像变换相关API的详细介绍请参见API参考

  1. 完成图片解码,获取Pixelmap对象。
  2. 获取图片信息。
    1. // 获取图片大小
    2. pixelMap.getImageInfo().then( info => {
    3. console.info('info.width = ' + info.size.width);
    4. console.info('info.height = ' + info.size.height);
    5. }).catch((err) => {
    6. console.error("Failed to obtain the image pixel map information.And the error is: " + err);
    7. });
  3. 进行图像变换操作。

    原图:

    • 裁剪
      1. // x: 裁剪起始点横坐标0
      2. // y: 裁剪起始点纵坐标0
      3. // height: 裁剪高度400,方向为从上往下(裁剪后的图片高度为400)
      4. // width: 裁剪宽度400,方向为从左到右(裁剪后的图片宽度为400)
      5. pixelMap.crop({ x: 0, y: 0, size: { height: 400, width: 400 } });

    • 缩放
      1. // 宽为原来的0.5
      2. // 高为原来的0.5
      3. pixelMap.scale(0.5, 0.5);

    • 偏移
      1. // 向下偏移100
      2. // 向右偏移100
      3. pixelMap.translate(100, 100);

    • 旋转
      1. // 顺时针旋转90°
      2. pixelMap.rotate(90);

    • 翻转
      1. // 垂直翻转
      2. pixelMap.flip(false, true);

      1. // 水平翻转
      2. pixelMap.flip(true, false);

    • 透明度
      1. // 透明度0.5
      2. pixelMap.opacity(0.5);

图片解码
位图操作
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }