Загрузка изображения с холста: загруженное изображение пустое

Question

Я использую Open Seadragon для отображения изображений с глубоким увеличением на странице. Я хочу включить ссылку для загрузки изображения. У меня это в основном работает, за исключением того, что загружаемое изображение пустое.

Вот моя скрипка

Вот код, который я использую

function seadragon(){
    var url = "http://26.img.americanancestors.org/8e09e1f1-e1e9-4414-a0f5-86a6f09454a2.xml";

    var viewer = OpenSeadragon({
                    id: "databaseviewer",
                    prefixUrl: "../../Scripts/openseadragon/images/",
                    tileSources: url,
                    maxZoomLevel: 20
                });

    viewer.addHandler('open', function() {
                    var img = viewer.drawer.canvas.toDataURL("image/png");
                    console.log(img);
                    var downloadlink = document.getElementById("download");
                    downloadlink.href = img;
                    downloadlink.download = 'SeadragonImage';

                });
}

seadragon();

Answer 1

Поскольку этот вопрос был опубликован 6 лет назад, URL, указанный в вопросе, похоже, больше не работает. Но у меня была аналогичная проблема, поэтому поделитесь ответом, если у кого-то есть эта проблема. Вот еще один пример url ='https://pgalawfirm.com/wp-content/uploads/2017/05/pga-logo-mobile-view.png'. Имейте в виду, что этот код предназначен для изображений, отличных от SVG. (jpg, jpeg, ico)

Загрузка этого образа стандартными методами приведет к загрузке, казалось бы, пустого образа. Это потому, что некоторые изображения, подобные этому (в режиме «RGBA»), на самом деле полностью белые, и причина, по которой вы видите их на веб-сайте, связана с параметром прозрачности альфа. Итак, вы загружаете полностью белое изображение на белый фон, поэтому они кажутся «пустыми». Вот код того, как проверить, является ли изображение полностью белым, и если это так, изменить фон, а затем сохранить его.

      import numpy as np
from statistics import mean
import PIL.Image
import requests
from tqdm import tqdm

image_url = 'https://pgalawfirm.com/wp-content/uploads/2017/05/pga-logo-mobile-view.png'
filename = 'non_blank_image.png'

def transparency_factor(im):
    matrix_img = np.asarray(im)
    w = im.width 
    h = im.height
    mean_distribution =[]
    for i in range (0, w):
        r = mean(matrix_img[:,i,0])
        g = mean(matrix_img[:,i,1])
        b = mean(matrix_img[:,i,2])
        mean_distribution.append(mean([r,g,b]))
        avg_colour =[mean([r,g,b])]
    if avg_colour[0] == 255:
        transparency_factor = True
    else:
        transparency_factor = False
    return transparency_factor

def remove_transparency(im, bg_colour=(200, 200, 200)):        
    if im.mode in ('RGBA', 'LA') or (im.mode == 'P' and 'transparency' in im.info):     
        alpha = im.convert('RGBA').split()[-1]        
        bg = PIL.Image.new("RGBA", im.size, bg_colour + (255,))
        bg.paste(im, mask=alpha)
        return bg
    else:
        return im

def download_image(image_url): # any type apart from svg

    response = requests.get(image_url, stream=True)                
    file_size = int(response.headers.get("Content-Length", 0))       

    progress = tqdm(response.iter_content(1024), f"Downloading {filename}", 
total=file_size, unit="B", unit_scale=True, unit_divisor=1024)
    with open(filename, "wb") as f:
        for data in progress.iterable:                     
            f.write(data)
            progress.update(len(data))  

download_image(image_url)            
im = PIL.Image.open(filename)
im.mode
if im.mode == 'RGBA':
    if transparency_factor(im):
        im = remove_transparency(im) 
        im.save(filename)

Answer 2

Вам нужно подождать, пока все плитки не загрузятся. Для регулярного использования это не будет проблемой, так как пользователь, вероятно, не нажмет кнопку, пока не увидит что-то.