drawImageURL(url) 在画布上绘制指定链接的图片

功能分类： Canvas Applab JavaScript 少儿编程

在当前激活画布上绘制指定 url 链接的图片。

在 APP 应用里使用 canvas 画布，并在画布里绘制图片或图形，这样做有一个好处就是，通过这种方式，你可以在像素级别上获取图像数据并进行相应处理，而这已经足够你创建包含一些常见的图片处理功能的应用。使用 drawImageURL 可以将指定图片绘制到当前激活画布上，绘制起始位置为画布最左上角的 (0,0) 位置。

像素颜色是如何工作的: 在屏幕上我们看到的每个像素的颜色由四个值组成。这四个值分别为 Red 红色值、Green 绿色值、Blue 蓝色值以及 alpha 透明度值，这四个值共同决定了屏幕上显示的色彩及明暗度。这四个值中的前三个代表三个不同颜色的值，每个范围都是从最小的 0 到最大的 255 总共 256 个值。alpha 透明度值则比较特殊，通过它来确定像素与屏幕上同一点上的其他像素相比的不透明程度。通常 alpha 值最小为 0 - 表示像素完全透明，最大为 255 - 表示像素完全不透明。这四个值通常按 Red 红色、Green 绿色、Blue 蓝色的顺序排列，前三个简称 RGB；加上最后一个 Alpha 透明度，合起来简称为 RGBA。完全红色（只有红色）的像素颜色为 (255, 0, 0, 255)，完全绿色（只有绿色）的像素颜色为 (0, 255, 0, 255)，完全蓝色（只有蓝色）的像素颜色为 (0, 0, 255, 255)。完全黑色则是 (0, 0, 0, 255)，完全白色则是 (255, 255, 255, 255)。前三个值越低越接近黑色，越高越接近白色。

在使用 drawImageURL(url) 方法绘制图片时，使用参数 url 来指定绘制图片的链接。这个链接可以通过下面两种方式填写。

1. 使用互联网图片：直接复制互联网图片链接。

在多数网页浏览器里，在显示图片的上方，点击鼠标右键后会出现几个图片相关的操作选项，其中一个选项就是复制图片链接。将复制的链接放在代码里作为 url 参数，这样就可以在你的 APP 里显示这张图片了。

2. 使用自己的图片：上传自己的图片到 Applab。

你也可以将自己电脑里的图片在 Applab 里上传到你的项目，将上传后图片的文件名作为 url 参数，这样也可以在你的 APP 里显示这张图片。具体做法是：

  • 找到相关代码模块里的 url 参数项，点击参数项右边的下拉按钮，并点击 选择... 选项：

  • 在弹出的窗口里，点击 上传图片文件 按钮。

  • 选择你电脑里的图片文件并上传。
  • 成功上传后，弹出窗口里会显示所有上传图片的列表。找到相关图片并点击图片右侧的 选择 按钮，图片文件名会自动填写到代码模块里并作为 url 参数。

示例代码


// 在画布上画出猫的图片
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/studio/cat_thumb.png");

示例代码：图像数据处理 从画布获取图像数据，处理后显示到另一个画布。


// 从画布获取图像数据，处理后显示到另一个画布。
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/studio/octopus_thumb.png");
button("id", "Squish");
setPosition('id', 100, 0);
onEvent("id", "click", function() {
  var canvasData=getImageData(0, 0, 100, 100);
  canvasData.width=400;
  createCanvas('canvas2', 100, 100);
  setPosition('canvas2', 0, 150);
  setActiveCanvas('canvas2');
  putImageData(canvasData, 0, 0);
});

示例代码：图像黑白处理 获取图像数据，将每个像素数据进行处理，并将处理后的数据重新显示。


// 获取图像数据，将每个像素数据进行处理，并将处理后的数据重新显示。
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png");
button("id", "Greyscale");
setPosition('id', 200, 0);
onEvent("id", "click", function() {
  var imageData = getImageData(0, 0, 175, 200);
  putImageData(makeBlackAndWhite(imageData), 0, 225);
});

function makeBlackAndWhite(thisImageData){
    for(var y=0; y < thisImageData.height; y++) {
      for(var x=0; x < thisImageData.width; x++) {
        if (getRed(thisImageData, x, y)!=0 && getGreen(thisImageData, x, y)!=0 && getBlue(thisImageData, x, y)!=0) {
          var newRGB=(getRed(thisImageData, x, y)+getGreen(thisImageData, x, y)+getBlue(thisImageData, x, y) ) / 3;
          setRGB(thisImageData, x, y, newRGB, newRGB, newRGB);
         }
      }
    }
  return thisImageData;
}

语法规则


drawImageURL(url);

参数说明

名称 类型 必需 参数描述
url string Yes 指定要加载到画布里图片文件的上传文件名或 url 网络链接。

返回值

没有返回值。只在显示结果页面体现代码执行前后变化。

提示说明

  • 为 image 图片控件 指定 url 如果为网络连接，需要填写完整路径，如以 http:// 或 https:// 开头的路径。
  • 使用这个方法之前，需要确保屏幕上 canvas 画布已被创建，你可以在 Applab 里的 设计 模式里创建画布，或在代码里使用 createCanvas() 方法创建画布。
  • 上面的多个例子使用了 getImageData() 方法来获取画布上的数据，并对这些数据进行处理。

查看更多少儿编程教程、JavaScript 介绍

返回文档首页