js写一个方法根据图片url地址获取图片数据并通过canvas绘制图片

可以使用以下代码实现：

function drawImageFromUrl(url) {
  // 创建一个Image对象
  var img = new Image();

  // 设置图片加载完成后的回调函数
  img.onload = function() {
    // 创建一个canvas元素
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    // 设置canvas的宽高与图片一致
    canvas.width = img.width;
    canvas.height = img.height;

    // 在canvas上绘制图片
    ctx.drawImage(img, 0, 0);

    // 将canvas转换为图片数据
    var imageData = canvas.toDataURL();

    // 打印图片数据
    console.log(imageData);
  };

  // 设置图片url并开始加载图片
  img.src = url;
}

// 使用示例
drawImageFromUrl('https://example.com/image.jpg');

上述代码中，我们首先创建一个Image对象，并设置其src为指定的图片url。然后，我们在Image对象的onload回调函数中创建一个canvas元素，并获取其2d上下文。接下来，我们设置canvas的宽高与图片一致，并使用drawImage方法将图片绘制在canvas上。最后，我们使用toDataURL方法将canvas转换为图片数据，并打印出来