如何从调整大小或拉伸的src加载图像

how to load image from src resized, or stretched

本文关键字：src 加载 图像 调整      更新时间：2023-09-26

在画布中绘制此图像时，我正在使用fill（）。我使用以下代码加载图像：

var cerceve = new Image();
if ($(".cerceve.accessory-selected").length) {
    cerceve.onload = function () {
        cerceveDeferred.resolve();
    };
    cerceve.src = $(".cerceve.accessory-selected:first img").attr("src");

基本上，我定义了Image对象的src，然后当它加载时，我开始在屏幕上绘制它。但我想以自定义尺寸加载图像，我该怎么做？我不能使用drawImage()调整大小，因为我需要使用fill()方法，并且它没有指定任何调整大小选项。

例如，如果我在加载cerceve之后设置cerceve.height = 40;，它会绘制高度为40的图像（40比原始高度大），但源图像没有拉伸，而是重复绘制许多相同的图像。我给它一个自定义的高度，图像的行为与重复选项。我想让它伸展一下。

好的，我得到了。在画布上绘制图像时，应该使用上下文缩放，而不是在加载后尝试调整源图像的大小。context.scale(x,y);可能是最好的选择。

相关文章：