Blinkでの画像のNaturalSizeの導出過程を追う

画像の描画時にバイナリヘッダにあるサイズ情報を読んでいるか？

それとも一旦表示してみてpxサイズを取得するのか？

まとめ

以下、Chromiumを読んだメモ

ヘッダファイル便利

たぶんこれがimg要素の実体

currentSrc, SetSrc, Src() とかあるし多分合ってる

サイズ関係のgetter関数たち

code:.h

unsigned width();

unsigned height();

unsigned naturalWidth() const;

unsigned naturalHeight() const;

unsigned LayoutBoxWidth() const;

unsigned LayoutBoxHeight() const;

width, height は定数ではないということか

currentWidth みたいな意味合いかな？

code:cc

unsigned HTMLImageElement::naturalWidth() const {

return DensityCorrectedIntrinsicDimensions().Width().ToUnsigned();

}

DensityCorrectedIntrinsicDimensionsを実行しているだけ

「密度補正された固有寸法」

LayoutSize型の定数を返す関数

code:cc

LayoutSize HTMLImageElement::DensityCorrectedIntrinsicDimensions() const {

IntSize overridden_intrinsic_size = GetOverriddenIntrinsicSize();

if (!overridden_intrinsic_size.IsEmpty())

return LayoutSize(overridden_intrinsic_size);

ImageResourceContent* image_resource = GetImageLoader().GetContent();

if (!image_resource || !image_resource->HasImage())

return LayoutSize();

float pixel_density = image_device_pixel_ratio_; /* なんだ?? */

このあたりが本質

code:cc

if (image_resource->HasDevicePixelRatioHeaderValue() &&

image_resource->DevicePixelRatioHeaderValue() > 0)

pixel_density = 1 / image_resource->DevicePixelRatioHeaderValue();

あとはLayoutSizeを取得して、px_density補正しているだけ

code:cc

RespectImageOrientationEnum respect_image_orientation =

LayoutObject::ShouldRespectImageOrientation(GetLayoutObject());

LayoutSize natural_size(

image_resource->IntrinsicSize(respect_image_orientation));

natural_size.Scale(pixel_density);

return natural_size;

}

最終的にサイズを決定しているのはnatural_size

まずはDevicePixelRatioHeaderValueを読み解く

image_resource->DevicePixelRatioHeaderValue() の実装

code:cc

float ImageResourceContent::DevicePixelRatioHeaderValue() const {

return device_pixel_ratio_header_value_;

}

code:cc

scoped_refptr<Image> ImageResourceContent::CreateImage(bool is_multipart) {

String content_dpr_value =

info_->GetResponse().HttpHeaderField(http_names::kContentDPR);

あとはいまは関係ない

code:cc

wtf_size_t comma = content_dpr_value.ReverseFind(',');

if (comma != kNotFound && comma < content_dpr_value.length() - 1) {

content_dpr_value = content_dpr_value.Substring(comma + 1);

}

device_pixel_ratio_header_value_ =

content_dpr_value.ToFloat(&has_device_pixel_ratio_header_value_);

if (!has_device_pixel_ratio_header_value_ ||

device_pixel_ratio_header_value_ <= 0.0) {

device_pixel_ratio_header_value_ = 1.0;

has_device_pixel_ratio_header_value_ = false;

}

コード中でBitmapImageを見たら、svg以外の画像という認識ができる

code:cc

if (info_->GetResponse().MimeType() == "image/svg+xml")

return SVGImage::Create(this, is_multipart);

return BitmapImage::Create(this, is_multipart);

}

code:cc

code:cc

struct NameEntry {

const char* name;

unsigned hash;

unsigned char length;

};

HTTP HeaderがNameEntry型で列挙されている

code:cc

...

{ "Cache-Control", 7757542, 13 },

{ "Content-DPR", 8569724, 11 },

{ "Content-Disposition", 362682, 19 },

...

つまり

なるほど

https://gyakky.herokuapp.com/gyazo/content-dpr/a196681066f27ea6e6247805c908839e#.png

ここからは、LayoutSizeの求め方

code:cc

LayoutSize natural_size(

image_resource->IntrinsicSize(respect_image_orientation));

natural_size.Scale(pixel_density);

return natural_size;

}

code:cc

IntSize ImageResourceContent::IntrinsicSize(

RespectImageOrientationEnum should_respect_image_orientation) {

if (!image_)

return IntSize();

if (should_respect_image_orientation == kRespectImageOrientation &&

image_->IsBitmapImage())

return ToBitmapImage(image_.get())->SizeRespectingOrientation();

return image_->Size();

}

code:cc

IntSize BitmapImage::SizeRespectingOrientation() const {

UpdateSize();

return size_respecting_orientation_;

}

code:cc

void BitmapImage::UpdateSize() const {

if (!size_available_ || have_size_ || !decoder_)

return;

size_ = decoder_->FrameSizeAtIndex(0);

if (decoder_->OrientationAtIndex(0).UsesWidthAsHeight())

size_respecting_orientation_ = size_.TransposedSize();

else

size_respecting_orientation_ = size_;

have_size_ = true;

}

code:cc

IntSize DeferredImageDecoder::FrameSizeAtIndex(size_t index) const {

// FIXME: LocalFrame size is assumed to be uniform. This might not be true for

// future supported codecs.

return metadata_decoder_ ? metadata_decoder_->FrameSizeAtIndex(index) : size_;

}

この仮設間違えた気がする

ここではすでに求まっているsize_を返しているだけかも？

image_resourceがcreateされる箇所、SetSrcあたりを追ってみるべき

/icons/hr.icon

詳細不明

SetSize

bool HeaderAvailable()

ParseSize()

HeaderAvailableの呼び出し元

ここから逆に辿っていくといいかも