Downloading image from a canvas: downloaded image is blank

Question

I'm using Open Seadragon to display deep zoom images on a page. I want to include a link to download the image. I have it mostly working, except the image that gets downloaded is blank.

Here is my fiddle

Here is the code I'm using

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

Since this question was posted 6 years ago the url provided in the question doesn't seem to work anymore. But I just had similar issue so sharing the answer in case someone else have this problem. Here is another example of url ='https://pgalawfirm.com/wp-content/uploads/2017/05/pga-logo-mobile-view.png'. Mind you this code is for non-svg images. (jpg, jpeg, ico)

Downloading this image with standard methods will result in seemingly blank image being downloaded. Thats because, some images like this one (of mode 'RGBA') are actually fully white and the reason you see them on the website is because of transparency parameter alpha. So you are downloading fully white image onto white background therefore they seem 'blank'. Here is the code of how to check if the image is fully white and if it is, changes the background and then saves it.

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

You need to wait until all the tiles have loaded. For regular use, this won't be a problem, as the user presumably won't hit the button until they can see something.